你應該知道的Sass經常使用方法

最近在本身vue的項目中用到Sass，便寫下一些經常使用的方法總結和介紹Sass在vue中的配置

像一些Sass是什麼的基礎概念，在這裏我就不提了，只提供乾貨，相信別的文章關於Sass的描述仍是不少的。

個人項目是用vue-cli腳手架配置的項目

安裝Sass

• mac自帶ruby環境，能夠用經過下列命令查看

ruby -v
複製代碼

• 首先輸入下列命令：

$ gem install sass
複製代碼

若是出現permitted問題一般是權限問題

ERROR:  While executing gem ... (Gem::FilePermissionError)You don't have write permissions for the /Library/Ruby/Gems/2.3.0 directory. 複製代碼

那就輸入如下命令：

$ sudo gem install sass
$ npm install sass-loader -D
複製代碼

若是安裝無限等待嘗試下面替換RubyGems鏡像

$ gem sources --remove https://rubygems.org/
//若是你係統不支持https用http
$ gem sources -a https://ruby.taobao.org/ 
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org# 請確保只有 ruby.taobao.org
$ gem install sass
複製代碼

若是出現下面錯誤

ERROR: While executing gem ... (Errno::EPERM) Operation not permitted - /usr/bin/sass
複製代碼

嘗試下面方法

$ sudo gem install -n /usr/local/bin sass
複製代碼

安裝完成嘗試查看sass版本

$ sass -v
複製代碼

配置

安裝完成後在build/webpack.base.conf.js文件的modoles設置內加入如下的配置

module: {
    rules: [
    {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      }
     ]
}
複製代碼

使用

而後呢，咱們要使用它了，咱們建立一個vue的文件開始寫代碼，而後在vue文件的style添加lang

<style lang="scss">
/*  在此處寫Sass */
</style>
複製代碼

Sass經常使用的用法

（1）變量

SASS容許使用變量，全部變量以$開頭。

/* 變量聲明 */
$fontStack:    Helvetica, sans-serif;
$primaryColor: #333;

body {
  font-family: $fontStack;
  color: $primaryColor;
}
複製代碼

等同於👇css的寫法

body {
  font-family: Helvetica, sans-serif;
  color: #333;
}
複製代碼

若是變量須要鑲嵌在字符串之中，就必須須要寫在#{}之中。

$side : left;
#div1 {
    margin-#{left}:10px;
}
複製代碼

（2）計算功能

SASS容許在代碼中使用算式：

.div2 {
    margin: 10px * 2;
    padding:(14px / 2);
}
複製代碼

等同於👇css的寫法

.div2 {
    margin: 20px;
    padding: 7px;
}
複製代碼

（3）嵌套

SASS容許選擇器嵌套。好比:

• 選擇器嵌套

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }
}
複製代碼

等同於👇css的寫法

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}
複製代碼

• &的嵌套

在嵌套的代碼塊內，可使用&引用父元素。好比a:hover僞類，能夠寫成：

a {
    margin: 10px;
    &:hover {
        color: #000;
    }
}
複製代碼

等同於👇css的寫法

a {
    margin: 10px;
}
a:hover {
    color: #000;
}
複製代碼

• 屬性嵌套(不多用，或者說不用，由於這樣寫更麻煩)

屬性也能夠嵌套，好比border-color屬性，能夠寫成：

p{
    border: {  //注意，border後面必須加上冒號。
        color: #000;
    }
}

//轉化css後
p{
    border-color: #000;
}
複製代碼

（4）繼承

SASS容許一個選擇器，繼承另外一個選擇器。好比，現有div3：

.div3 {
    margin: 2px;
}

/* .div4繼承.div3 */
.div4 {  
    @extend .div3;
    font-size: 10px;
}
複製代碼

等同於👇css的寫法

.div3, .div4 {
  margin: 2px;
}
.div4 {
  font-size: 10px;
}
複製代碼

（5）Mixin

Mixin有點像C語言的宏（macro），是能夠重用的代碼塊。

• 一、使用@mixin命令，定義一個代碼塊
• 二、後續能夠經過@include複用

@mixin p1 {
    float: left;
}

div {
/*使用@include命令，調用這個mixin。*/
    @include p1; 
    top: 10px;
}
複製代碼

等同於👇css的寫法

div {
  float: left;
  top: 10px;
}
複製代碼

mixin的強大之處，在於能夠指定參數和缺省值。這樣咱們就能夠複用一些樣式，只須要傳遞一個參數，就像調用一個函數同樣！

• 例子1: 沒有默認值

@mixin box-sizing ($sizing) {
    -webkit-box-sizing:$sizing;     
       -moz-box-sizing:$sizing;
            box-sizing:$sizing;
}
.box-border{
    border:1px solid #ccc;
    @include box-sizing(border-box);/*引用*/
}
複製代碼

等同於👇css的寫法

.box-border {
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
複製代碼

• 例子2:有默認值
  • 沒有默認值的參數要放在參數列表的前面。

@mixin p2($val1, $val2:20px) {
/* 若是不加入參數，就用默認參數 */
    float: $val1;
    top: $val2;
}
//使用的時候，根據須要加入參數：
div {
    @include p2(left);
}
複製代碼

等同於👇css的寫法

div {
  float: left;
  top: 20px;
}
複製代碼

（6）導入文件

• @import命令，用來插入外部文件。
• 若是插入的是.css文件，則等同於css的import命令。

@import "path/filename.scss";

@import "foo.css";
複製代碼

（7）註釋

SASS共有兩種註釋風格。

• 標準的CSS註釋 /* comment */ ，會保留到編譯後的文件。
• 單行註釋 // comment，只保留在SASS源文件中，編譯後被省略。

sass的內容遠不止這些，日常使用的話，上面的就夠用了,若是看完本博客後也有興趣繼續深刻學習sass能夠去看一下官方文檔： Sass中文文檔