Sass-也許你想跟CSS玩起來（上篇）

我們努力，我們堅持，共勉！

眾所周知，css其實不是一門程式語言，熟悉的人都知道css全名為Cascading Style Sheets(層疊樣式表)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。我們用它來實現表現層和結構層的分離，也就是html和樣式的分離。你可以用它為網頁制定樣式，但是他無法像JavaScript一樣聲明變量，調用函數，使用條件語句，可以說JavaScript是靈活的，動態的，而css是死板的，一成不變的。

所以，有人想要為其加入程式設計的思想，讓他擁有遍歷，擁有方法，甚至擁有繼承，能夠告訴你語法上的錯誤，所以有了css預處理，它的思想是先用一門新的專門程式設計的語言來設計網頁樣式，再編譯成css，其實最後引用的仍舊是編譯出來的css。

說到css預處理，可能大部分人首先想到的是Less。現在做css預處理的語言比較優秀的Less是其一：它快速方便入門簡單，sass是其二：相對來說說它更加靈活，語法更多(尤其是if,else,for)，當然好多人不使用的原因是嫌棄它安裝不方便(還好有淘寶鏡像)，其三是Stylus：他與sass比較類似都是更加靈活強大。這裡因為我比較喜愛Sass並且相信它不會那麼快死去，所以對sass做一個簡單介紹。

想好什麼時候我們可以用css預處理

誠然，css預處理讓我們對樣式的處理更加程式化，但是我們仍需要考慮好在怎樣的環境中使用它，因為我們知道，無論你的sass程式碼多麼酷炫，邏輯多麼纈密，到最後都是產生了一個css檔案(老前輩對年輕的我的教誨)。

所以我們需要根據專案的大小以及開發時間團隊成本來確定，如果專案比較小需要的css並不是太多並且開發時間緊迫團隊裡很多人還不會使用，那麼可能使用原生的css可能會更好一些。

sass基礎

安裝~

咳咳，我不得不說好多開發者本來是想使用sass的，但是因為sass是基於ruby的，高牆在上，ruby裝半天裝不上，於是放棄呼。這裡推薦你看下W3Cplus的教學使用淘寶的鏡像來進行安裝，包括node的一些包的安裝我都是使用的淘寶鏡像來進行安裝的，很快很強大。

編譯~

咳咳，很多朋友都安裝完了，但是發現編譯很麻煩。這裡繼續上連結sass編譯教程，我在這裡推薦大家使用無尾熊來進行編譯，雖然無尾熊已經停止更新但是它確實是十分實用的，less，sass都可以編譯，而且可以在編譯時進行壓縮。

sass和scss

先來看看區別吧

<span style="color: #800000;">$color : red;

//sass语法
.box
    color:$color;

//scss语法
.box</span>{<span style="color: #ff0000;">
　　color</span>:<span style="color: #0000ff;">$color</span>;
}

其實sass語法是sass最開始的語法結構，是透過tab縮進來進行的一個規則，有點類似jade模板的那種縮進，而且這種語法規則十分嚴格，有啥不對勁，編譯的時候就報錯。

而scss呢，是sass的新語法格式，不要認為他是另外一種預處理語言，其實它是sass在發現之前的語法結構太過於嚴格，並且和css有點不像後重新定制的語法結構，它在外觀上是與css基本一致的，而且它十分寬鬆，你可以直接將先前的css程式碼複製過來。

我在這裡寫在了一個程式碼區塊中只是範例，其實他們檔案名稱是分別以.sass和.scss來結尾的。

變數宣告和呼叫

這是sass的程式設計元素基礎之一。在JS中我們使用var來宣告變量，當然ES6中新加了let,const。而在sass宣告和呼叫變數的規則如下

<span style="color: #800000;">$height: 15px !default;  //声明默认变量
$height: 50px;　　//声明普通变量
body</span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> $height</span>; 
}

變數有預設變數和普通變數之分，預設變數只需像!important 一樣在值後面加上!default即可。其實一般情況下我們只需要宣告普通變量，預設變數在開發元件時使用比較方便。變數聲明我就不用說了，真的很簡單。

巢狀和局部變量，全域變數

和JS類似，sass語法中也有局部變數和全域變數。如下在最外層聲明的是全域變量，全域範圍內可以調用，在em{}中聲明的是em的局部變量，只在em{}內部內進行調用。

<span style="color: #800000;">$color:#000;　　//全局变量
.block </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> $color</span>;
}<span style="color: #800000;">
em </span>{<span style="color: #ff0000;">
  $color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">　　//局部变量
  a {    //选择器嵌套
    color</span>:<span style="color: #0000ff;"> $color</span>;<span style="color: #ff0000;">
    font</span>:<span style="color: #0000ff;"> {    //属性嵌套
　　  size: 12px</span>;<span style="color: #ff0000;">
　　  weight</span>:<span style="color: #0000ff;"> bold</span>;
　  }<span style="color: #800000;">
    &:hover </span>{ //伪类嵌套<span style="color: #ff0000;">
     color</span>:<span style="color: #0000ff;"> $color</span>;
    }<span style="color: #800000;">   
  }
}</span>

数据类型

 和JS类似，sass也拥有自己的数据类型分别是

• 数字: 如，1、 2、 13、 10px；
•  字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz；
•  颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
•  布尔型：如，true、 false；
•  空值：如，null；
•  值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

混合宏

编程的思想嘛。混合宏是一个类似于函数的存在，当然，他并不是函数。简单来说就是加了参数功能的灵活度提升的可重用的代码块。

<span style="color: #800000;">@mixin border-radius</span>{<span style="color: #ff0000;">
    -webkit-border-radius</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 5px</span>;
}<span style="color: #800000;">

button </span>{<span style="color: #ff0000;">
    @include border-radius;
</span>}

这里是一个简单的混合宏的使用，先是用@mixin定义了一个名叫border-radius的混合宏，然后在代码中利用@include进行调用，其实这样的话并不能太大体现出混合宏的特色。看下面的

<span style="color: #800000;">@mixin border-radius1($radius)</span>{<span style="color: #ff0000;">
  -webkit-border-radius</span>:<span style="color: #0000ff;"> $radius</span>;<span style="color: #ff0000;">
  border-radius</span>:<span style="color: #0000ff;"> $radius</span>;
}<span style="color: #800000;">
@mixin border-radius2($radius:5px)</span>{<span style="color: #ff0000;">
  -webkit-border-radius</span>:<span style="color: #0000ff;"> $radius</span>;<span style="color: #ff0000;">
  border-radius</span>:<span style="color: #0000ff;"> $radius</span>;
}<br><br><span style="color: #800000;">
.box1 </span>{<span style="color: #ff0000;">
  @include border-radius(5px);
</span>}<span style="color: #800000;">
.box2 </span>{<span style="color: #ff0000;">
  @include border-radius;
</span>}<span style="color: #800000;">
.box2 </span>{<span style="color: #ff0000;">
  @include border-radius(5px);
</span>}

从代码里可以看出，混合宏可以像函数一样传入参数，并且可以像ES6的函数扩展一样添加参数默认值，如果在调用的时候不传参数，那么就会使用默认的值，这样极大的增加了代码的灵活性，省却很多开发时间。

其实，mixin的灵活还不仅仅如此，它可以传入多个参数，这样我们想到了函数可以根据参数数量的不同来执行不同的代码。yes ！sass也可以做到！

<span style="color: #800000;">@mixin size($width,$height)</span>{<span style="color: #ff0000;">    //两个参数或者多个参数可以这样这样定义
  width</span>:<span style="color: #0000ff;"> $width</span>;<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> $height</span>;
}<span style="color: #800000;">

.box-center </span>{<span style="color: #ff0000;">
  @include size(100px,200px);
</span>}

<span style="color: #800000;">@mixin box-shadow($shadows...)</span>{<span style="color: #ff0000;">    //参数过多可以使用...来代替
  @if length($shadows) >= 1 {
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> $shadows</span>;<span style="color: #ff0000;">
    box-shadow</span>:<span style="color: #0000ff;"> $shadows</span>;
  }<span style="color: #800000;"> @else </span>{<span style="color: #ff0000;">
    $shadows</span>:<span style="color: #0000ff;"> 0 0 2px rgba(#000,.25)</span>;<span style="color: #ff0000;">
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> $shadow</span>;<span style="color: #ff0000;">
    box-shadow</span>:<span style="color: #0000ff;"> $shadow</span>;
  }<span style="color: #800000;">
}<br></span>

.box {
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

上面两个代码块第一个比较简单，就是增加参数数目。下面的代码块我们利用sass的if else方法来实现了判断，如果参数数目大于等于1，也就是传了参数，那么我们执行上面的代码，如果没有传参我们执行下面的代码，设置默认的$shadows值生成代码块。

但是混合宏也有不足之处：那就是调用一个混合宏生成的css代码并不会进行合并，这也是因为他能够传参所设置的，所以对于复用性很强的代码块不推荐使用混合宏。

继承和占位符

sass允许你使用@extend继承别的代码块，并且通过@extend所继承的代码块会在生成css的时候进行合并~哈哈，完美解决了上面的问题

<span style="color: #800000;">.btn1 </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 6px 10px</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 14px</span>;
}<span style="color: #800000;">

%btn2 </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 6px 10px</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 14px</span>;
}<span style="color: #800000;">
<br /></span>

%btn3 {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

<span style="color: #800000;">
.btn-primary1 </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #f36</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
  @extend .btn1;
</span>}<span style="color: #800000;">

.btn-primary2 </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #f36</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
  @extend %btn2;
</span>}

上面的代码中.btn1是预先定义好的类，然后我们在.btn-primary1中继承他的所有代码块，而%btn2就是在标题里所提到的占位符，占位符的代码块如果不被继承在生成的css中是不会显示出来的，所以如果你是用sass编译css的话，公共类使用占位符来定义是一个很不错的选择。为了加深理解我们看下上面的代码所生成的css代码。

<span style="color: #800000;">.btn1, .btn-primary1 </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 6px 10px</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 14px</span>; }<span style="color: #800000;">

.btn-primary2 </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 6px 10px</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 14px</span>; }<span style="color: #800000;">

.btn-primary1 </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #f36</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #fff</span>; }<span style="color: #800000;">

.btn-primary2 </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #f36</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #fff</span>; }

继承btn1的btn-primary1他和btn1进行了合并，而我们使用占位符定义的%btn2，%btn3在生成代码里没有显示，因为btn-primary2继承了%btn2，所以他继承的公共部分被单独拿出来，如果有多个代码块继承%btn2，他们会进行合并。

占位符还是混合宏，主要还是看你的代码怎么使用，如果只是静态的代码公共块，那么占位符会比较适合，而如果是可变的代码例如写一个复杂的css3动画之类的，可能混合宏比较适合了。

插值#{}

如果接触过jade模板的朋友会比较熟悉，这里的插值和它用法是基本一致的。让我们来看一个复杂的代码块

<span style="color: #800000;">$properties: (margin, padding);
@mixin set-value($side, $value) </span>{<span style="color: #ff0000;">
    @each $prop in $properties {
        #{$prop</span>}<span style="color: #800000;">-#</span>{<span style="color: #ff0000;">$side</span>}<span style="color: #800000;">: $value;
    }
}
.login-box </span>{<span style="color: #ff0000;">
    @include set-value(top, 14px);
</span>}

首先我们声明了一个$properties的变量，里面是一个值列表里面两个字符串，@mixin方法里我们通过@each方法循环出值列表里面的字符串然后利用插值的方法将字符串插入进去，我们看下生成的css代码

<span style="color: #800000;">.login-box </span>{<span style="color: #ff0000;">
  margin-top</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
  padding-top</span>:<span style="color: #0000ff;"> 14px</span>; }

这里只是做一个示例，正常情况下我们不会用这么复杂的方法来生成这么短的css代码，那样才是真正的浪费开发时间，当然茶余饭后做个组件开发的话，还是很有用的。

运算

sass允许我们做一些基本的运算：加减乘除，但是我要说的是：注意单位！注意单位！注意单位！当然如果你异想天开em+px，px*px，px/rem。。。我表示。。。

需要知道的是sass里允许进行颜色运算，也就是说 #222222 * 2你将会得到 #444444，其实颜色的运算机制是分段运算也就是说如果22*2 22*2 22*2然后在进行合并的。

字符串运算：

字符串可以通过+来进行链接，放心减号是不管用的。。。需要注意的是因为sass的字符串有两种类型，带引号和不带引号，相同相加当然出来的是一致的。如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串，其实就是谁在左边就跟着谁。

<span style="color: #800000;">p:before </span>{<span style="color: #ff0000;">
  content</span>:<span style="color: #0000ff;"> "Foo " + Bar</span>;<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> sans- + "serif"</span>;
}<span style="color: #800000;">
//生成的css如下
p:before </span>{<span style="color: #ff0000;">
  content</span>:<span style="color: #0000ff;"> "Foo Bar"</span>;<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> sans-serif</span>; }

 

上面的内容就是sass的上篇。都是一些基础的东西，下篇的话会整理一下说到函数和方法规则相关的东西。