SASS小結，sassless

SASS小結，sassless

SASS是Syntactically Awesome Stylesheete 的縮寫，它是css的一個開發工具，提供了很多便利和簡單的文法，讓css看起來更像是一門語言，這種特性也被稱為“css先行編譯”。它的主要設計思想是讓我們可以按照編程的思路編寫自己的樣式，然後通過“編譯器”產生我們所需要的css檔案。sass並不是css的替代品，它只是讓css變得更加高效、可維護，也不必去修改編譯後的css檔案。

一、安裝sass

sass是基於ruby的產物，因此在安裝sass前需要先安裝ruby：https://www.ruby-lang.org/zh_cn/downloads/。下載對應系統的版本，一路next即可。安裝完成後，在命令列輸入ruby -v可查看ruby版本。

$ ruby -vruby 2.0.0p451 (2014-02-24) [x64-mingw32]

安裝完ruby後，在命令列輸入gem install sass即可安裝sass，安裝完後可通過sass -v來查看sass版本。

$ sass -vSass 3.3.5 (Maptastic Maple)

二、編譯sass檔案2.1 sass檔案格式

sass有兩種可選的檔案尾碼.sass和.scss，兩者的主要區別就是在書寫格式上。

.sass檔案是縮排式的寫法，對格式要求比較嚴謹，末尾不能有分號

.test    margin: 5px 10px    font-size: 14px    color: #333

.scss檔案的寫法和css一致

.test {    margin: 5px 10px;    font-size: 14px;    color: #333;}

2.2 編譯sass

SASS檔案的尾碼為.scss，可以使用下面的命令將scss檔案編譯為最終使用的css檔案：

sass demo.scss

或者指定css檔案名稱

sass demo.scss product.css

也可以設定輸出css檔案的風格

sass --style compressed test.scss test.css

輸出樣式的風格可以有四種選擇，預設為nested

• nested：嵌套縮排的css代碼
• expanded：展開的多行css代碼
• compact：簡潔格式的css代碼
• compressed：壓縮後的css代碼

 watch單個檔案

sass --watch test.scss:test.css

watch檔案夾

sass --watch src:dest

三、sass文法1. 變數

SASS支援變數的定義，你可以使用$來定義一個變數，這樣我們就可以把一些公用的樣式定義為一個變數，在使用時直接引用即可：

$white:#fff;$font12:12px;.menu{    color: $white;    font-size: $font12;}

編譯後：

.menu {  color: white;  font-size: 12px;}

如果在字串中引用變數，則需要將變數名寫在#{}中。如：

$img-dir: "public/images/";.test {    background-image: url(#{$img-dir}icon.png);}

可以設定預設變數提供SASS預設值，它的含義是：如果這個變數被聲明賦值了，那就用它聲明的值，否則就用預設值。這在書寫sass庫檔案時非常有用。設定預設變數的方法也非常簡單，只需在變數值後加上!default即可。

$color: #ccc;$color: #000 !default;p {    color: $color;}

SASS還支援多值變數

$colors: #fff #ccc #999 #666 #333;

我們可以通過length($colors)來擷取多值變數的值的個數，通過nth($colors, index)來擷取第index個位置的值。ps: index的取值範圍為1到length($colors)。

$colors: #fff #ccc #999 #666 #333;p::after {  content: "#{length($colors)}";    // 5  color: nth($colors, 1);            // #fff}

2 .嵌套

SASS支援兩種嵌套方式：選取器嵌套和屬性嵌套。嵌套極大程度上降低了選取器名稱和屬性的重複書寫。

• 選取器嵌套
  選取器嵌套是指從一個選取器中嵌套子選取器，來實現選取器的繼承關係。

.header{   .logo{       display: block;       border: none;   }   ul li{       line-break: normal;   }}

編譯後：

.header .logo {  display: block;  border: none;}.header ul li {  line-break: normal;}

也可以通過&來表示父元素選取器，比如我們聲明一個a標籤的樣式：

a{    text-decoration: none;    &:hover{        color: #007998;    }}

編譯後：

a {  text-decoration: none;}a:hover {  color: #007998;}

• 屬性嵌套
  屬性嵌套，是指將帶有相同首碼單詞的屬性提出來，作為一個公有的屬性，嵌套進其他屬性，就像很多姓氏一樣的人，把這些人姓氏只記一次，後面跟上不同的名字。

h3{    font:{        size:26px;        weight:normal;        family:arial    }}

編譯後：

h3 {  font-size: 26px;  font-weight: normal;  font-family: arial;}

3 sass匯入檔案匯入.sass或.scss檔案

css有一個不太常用的特性，即@import匯入功能，它允許在一個css檔案中匯入其他css檔案。然而，結果是只有執行到@import規則時，瀏覽器才會去下載其他css檔案，這會導致頁面樣式載入特別慢，從而容易出現頁面閃的問題。

sass也有@import匯入規則，與css不同的是，sass中的@import規則會在產生css檔案時，把相關的檔案匯入合并成一個檔案，而無需瀏覽器去下載其他的檔案。另外在被匯入檔案中定義的變數等也可以在匯入檔案中正常使用。

在使用@import匯入sass檔案時，可以省略sass檔案的尾碼名.sass或.scss，例如：

- a.scss    body {        background-color: #f00;    }- style.scss    @import "a";    div {        color: #333;    }

編譯後的style.css檔案內容如下:

body {    background-color: #f00;}div {    color: #333;}

如果你是編譯整個sass目錄的話，會發現一個問題，在產生style.css的同時也產生了一個a.css，這個結果並不是我們想要的，a.scss作為一個中間檔案，一般情況下是不需要在產生css的。sass開發人員也考慮到了這點，我們只需要在檔案名稱前加上底線_，sass編譯的時候就會忽略這個檔案，@import引用的時候可以加底線引用，也可以不加。還是上面的例子，我們可以進行修改：

- _a.scss    body {        background-color: #f00;    }- style.scss    @import "a";    div {        color: #333;    }

匯入css檔案

當然，如果你需要像原生css那樣去匯入其他的css檔案，也是可以的，如果符合以下三條中的任意一種情況，sass就會認為你想用css原生的@import:

• 被匯入的檔案名稱以.css結尾
• 被匯入的檔案是一個線上的url地址
• 以@import url(...)方式去匯入檔案

4 注釋

sass支援原生css的注釋格式/* 注釋內容 */，同時也支援類似js中的單行注釋// 注釋內容。對於單行注釋，sass會在產生的css檔案中刪除單行注釋，只保留css原生的注釋內容，例如：

.test {    margin: 10px;    // 這塊注釋不會出現在產生的css檔案中    color: #333;     /* 這塊注釋會出現在產生的css檔案中 */}

當然，如果你把多行注釋寫在原生css不允許的地方時，在編譯產生css檔案時，sass會將這些注釋抹掉。例如：

.test {    padding /* 這塊注釋不會出現在產生的css檔案中 */: 10px    margin: 5px /* 這塊注釋也不會出現在產生的css檔案中 */ 10px;}

5. 函數

SASS中，你可以對屬性值進行簡單的運算， 比如：

$white:#fff;$font12:12px;    .newsize{        font-size: $font12 + 2;        color:$white - #007998;    }

編譯後產生：

.newsize {  font-size: 14px;  color: #ff8667;}

當然除了最基本的加減乘除運算函數，SASS還提供了很多其他有趣的函數，像我們最常用的顏色函數lighten（減淡）和darken（加深）。

.lgt{    color: lighten($black,10%);    background-color: darken($white,50%);}

編譯後可以得到一個運算好的顏色值：

.lgt {  color: #1a1a1a;  background-color: gray;}

更多的函數資訊，請查看SASS官方函數大全

6 混合器mixin簡單混合器

sass中的混合器一般用來解決大段代碼重複的問題。比如我們經常使用的單行文本溢出顯示省略符號，可以使用@mixin來定義一個簡單的混合器：

@mixin ellipsis {    width: 100%;    overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;}

然後在需要用到的地方我們可以通過@include來使用這個混合器：

.text {    @include ellipsis;}

輸出的css為：

.text {    width: 100%;    overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;}

帶參數的混合器

混合器不僅可以實現代碼的重複利用，還可以傳遞參數，根據需要產生不同的css。這在跨瀏覽器的css3相容方面尤為好用。例如：

@mixin radius($value) {    -moz-border-radius: $value;    -webkit-border-radius: $value;    border-radius: $value;}

使用時，我們只需傳入相應的參數值即可。

.test {    @include radius(3px);}

產生的css為：

.test {    -moz-border-radius: 3px;    -webkit-border-radius: 3px;    border-radius: 3px;}

另外我們還可以給參數提供預設值，如：

@mixin link-colors($normal: #333, $hover: $normal, $visited: $normal) {    color: $normal;    &:hover {        color: $hover;    }    &:visited {        color: $visited;    }}

調用時，可以傳參，也可以不傳：

.text {    @include link-colors;}.error {    @include link-colors(red);}a {    @include link-colors(blue, green, yellow);}

產生的css為：

// 鑒於篇幅問題，已將產生的程式碼改成單行.text { color: #333;}.text:hover { color: #333;}.text:visited { color: #333;}.error { color: red;}.error:hover { color: red;}.error:visited { color: red;}a { color: blue;}a:hover { color: green;}a:visited {color: yellow;}

7、繼承

SASS通過@extend實現繼承

.pclass{  border: 4px solid #ff9aa9;}.subclass{  @extend .pclass;  border-width: 2px;}

編譯後：

.pclass, .subclass {  border: 4px solid #ff9aa9;}.subclass {  border-width: 2px;}

這種繼承雖然方便，但是也有一定的弊端。比如我們僅僅想繼承.pclass類中的樣式，而實際並不需要.pclass的這個類。換句話說就是我們的html中並沒有class="pclass"這樣的代碼，這樣的話產生的css中的.pclass其實就是多餘的。

對於這種情況，sass3.2.0及以後的版本也給我們提供瞭解決方案：佔位選取器%。

佔位選取器%

佔位選取器的優勢在於：聲明之後，如果不調用，則不會產生類似.pclass的多餘css代碼。佔位選取器通過%標識來定義，也是通過@extend來調用。

%pclass{  border: 4px solid #ff9aa9;}.subclass{  @extend %pclass;  border-width: 2px;}

產生的css為：

.subclass {  border: 4px solid #ff9aa9;  border-width: 2px;}

8 sass條件判斷@if添加判斷

sass中的@if語句和js中的if很相似。可以單獨使用，也可以配合@else使用。

$lte7: true;    // 是否支援ie7以下版本$theme: yellow;.clearfix {    @if $lte7 {        zoom: 1;    }    &:after {        content: ".";        display: block;        height: 0;        clear: both;        visibility: hidden;    }}body {    @if $theme == red {        background: rgba(255, 0, 0, 0.5);    } @else if $theme == yellow {        background: rgba(255, 255, 0, 0.5);    } @else if $theme == black {        background: rgba(0, 0, 0, 0.5);    }}

產生css為：

.clearfix {    zoom: 1;}.clearfix:after {    content: ".";    display: block;    height: 0;    clear: both;    visibility: hidden;}body {    background: rgba(255, 255, 0, 0.5);}

三目運算判斷

三目運算子的文法為：@if($condition, $condition_true, $condition_false)，例如：

$fontBold: true;.title {    font-weight: if($fontBold, bold, normal);}

產生的css為

.title {    font-weight: bold;}

SASS工具：

• sass線上編譯

• sass可視化編譯工具: Koala

原文：http://www.ido321.com/1455.html