前端學習之路——scss篇

標籤：range   環境變數   ken   字串   and   lan   rem   href   put   

學習資料：

　　sass文法 http://www.w3cplus.com/sassguide/syntax.html

　　Sass http://sass.bootcss.com/docs/sass-reference/

　　　　 http://www.ruanyifeng.com/blog/2012/06/sass.html

一、什麼是SASS

SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。

二、安裝和使用

Sass依賴於ruby環境，所以裝sass之前先確認裝了ruby。先導官網下載個ruby。在安裝的時候，請勾選Add Ruby executables to your PATH這個選項，添加環境變數，不然以後使用編譯軟體的時候會提示找不到ruby環境。安裝好ruby後，然後安裝Sass。（mac內建）

輸入一下命令：

gem install sass

這樣，sass就可以使用了。

三、基本使用

Sass 有兩種文法。 第一種被稱為 SCSS (Sassy CSS)，是一個 CSS3 文法的擴充版本；二種比較老的文法成為縮排文法（或者就稱為 "Sass"）， 提供了一種更簡潔的 CSS 書寫方式。使用 sass-convert 命令實現兩者相互轉換。本文介紹的是Scss用法。

# 將 Sass 轉換為 SCSS$ sass-convert style.sass style.scss# 將 SCSS 轉換為 Sass$ sass-convert style.scss style.sass

3.1 注釋

SASS共有兩種注釋風格。標準的CSS注釋 /* comment */ ，會保留到編譯後的檔案。單行注釋 // comment，只保留在SASS源檔案中，編譯後被省略。在/*後面加一個驚嘆號，表示這是"重要注釋"。即使是壓縮模式編譯，也會保留這行注釋，通常可以用於聲明著作權資訊。

3.2 變數

SASS可以使用變數，所有變數以$開頭。如果變數需要鑲嵌在字串之中，就必須需要寫在#{}之中。變數後面添加 !default ，表示該值是預設值。

$left: left;div{    float: $left;    margin-#{$left}: 20px;}

多個變數

多值變數分為list類型和map類型，簡單來說list類型有點像js中的數組，而map類型有點像js中的對象。

/* list */$linkColor:         #08c #333 !default;//第一個值為預設值，第二個滑鼠滑過值a{  color:nth($linkColor,1);  &:hover{    color:nth($linkColor,2);  }}/* map */$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);@each $key, $value in $headings {  #{$key} {    font-size: $value;  }}編譯為：/* list */a { color: #08c; }a:hover { color: #333; }/* map */h1 { font-size: 2em; }h2 { font-size: 1.5em; }h3 { font-size: 1.2em; }

3.3 嵌套

SASS可以使用選取器嵌套。

div {    img{        width: 50px;    }}//編譯為div img{ width: 50px; }

屬性也可以嵌套，比如 border-color 屬性。

div{    border: {        color: red;    }}//編譯為div{ border-color: red; }

注意：border後面必須加上冒號。

在嵌套的代碼塊內，可以使用 & 引用父元素。比如 a:hover 偽類。

a{    &:hover{        color: #ccc;    }}//編譯為a:hover{ color: #ccc;}

3.4 @at-root

sass3.3.0中新增的功能，用來跳出選取器嵌套的。預設所有的嵌套，繼承所有上級選取器，但有了這個就可以跳出所有上級選取器。適用 BEM 命名方式（如： .block 、.block__element 、.block--modifier）、@keyframe。先看如果使用嵌套寫法是什麼樣的情況。

.block {    color: red;    #{&}_element {        color:blue;    }    #{&}--modifier {        color: orange;    }}編譯為.block { color: red; }.block .block_element { color: blue; }.block .block--modifier { color: orange; }

明顯編譯出來的CSS並不是我們想要的代碼。 @at-root 可以實現上面 BEM 的特性。

.block {    color: red;    @at-root #{&}_element {        color:blue;    }    @at-root #{&}--modifier {        color: orange;    }}編譯為：.block { color: red; }.block_element { color: blue; }.block--modifier { color: orange; }

3.5 計算

SASS允許在代碼中使用算式。這裡就不做描述了。

四、代碼重用4.1 繼承

SASS通過 @extend 命令使一個選取器class2繼承另一個選取器class1

.class1{    width: 50px / 2;    height: 50px + 50px;}.class2{    @extend .class1;    height: 50px;}編譯為：.class1, .class2 { width: 50px / 2; height: 100px; }.class2 { height: 50px; }

 

編譯後以群組選取器方式顯示；如果選取器class2不需要選取器class1的某個屬性，可添加該屬性進行覆蓋，並單獨顯示出來。（看文檔的時候總是將群組選擇的 “,” 看成 “.”，誤認為後代選取器了，所以寫出來。）

4.2 Mixin

Sass中使用 @mixin 聲明混合，可以傳遞參數，參數名以$符號開始，多個參數以逗號分開，也可以給參數設定預設值 $opacity:50 ，如果一個參數可以有多組值，如 box-shadow、transition 等，那麼參數則需要在變數後加三個點表示，如 $variables... 。使用 @mixin 命令，定義一個代碼塊。再使用 @include 命令，調用這個 @mixin。

@mixin opacity($opacity:50) {  opacity: $opacity / 100;  filter: alpha(opacity=$opacity);}.opacity{  @include opacity; }.opacity-80{  @include opacity(80); }編譯為：.opacity { opacity: 0.5; filter: alpha(opacity=50); }.opacity-80 { opacity: 0.8; filter: alpha(opacity=80); }

 4.3 函數

Sass定義了很多函數可供使用，當然你也可以自訂函數，以 @fuction 開始。實際項目中我們使用最多的應該是顏色函數，而顏色函數中又以lighten減淡和darken加深為最，其調用方法為lighten($color,$amount)和darken($color,$amount)，它們的第一個參數都是顏色值，第二個參數都是百分比。

$color: red;@function rem($rem){    @return $rem / 10 + rem;}.box{    foot-size: rem(20);    color: lighten($color, 20%);}編譯為：.box { foot-size: 2rem; color: #ff6666; }

五、進階使用5.1 條件陳述式

@if可以用來判斷：

p {  @if 1 + 1 == 2 { border: 1px solid;  }  @if 5 < 3      { border: 2px dotted; }  @if null       { border: 3px double; }}編譯為：p { border: 1px solid; }

@if 聲明可以由幾個 @else if語句，一個 @else 聲明組成。

$type: monster;p {  @if $type == ocean {    color: blue;  } @else if $type == matador {    color: red;  } @else if $type == monster {    color: green;  } @else {    color: black;  }}編譯為：p { color: green; }

5.2 迴圈語句

@for迴圈：from x to y： 不含y；from x through y：包含y。

@for $i from 1 to 3 {    .border-#{$i} {        border: #{$i}px solid blue;    }}@for $i from 1 through 3 {  .item-#{$i} { width: 2em * $i; }}編譯為：.border-1 { border: 1px solid blue; }.border-2 { border: 2px solid blue; }.item-1 { width: 2em; }.item-2 { width: 4em; }.item-3 { width: 6em; }

@each

$animal-list: puma, sea-slug, egret, salamander;@each $animal in $animal-list {  .#{$animal}-icon {    background-image: url(‘/images/#{$animal}.png‘);  }}編譯為：.puma-icon { background-image: url("/images/puma.png"); }.sea-slug-icon { background-image: url("/images/sea-slug.png"); }.egret-icon { background-image: url("/images/egret.png"); }.salamander-icon { background-image: url("/images/salamander.png"); }

@while

$i: 6;@while $i > 0 {  .item-#{$i} { width: 2em * $i; }  $i: $i - 2;}編譯為：.item-6 { width: 12em; }.item-4 { width: 8em; }.item-2 { width: 4em; }

六、編譯

在命令列中運行 Sass 進行編譯,只要輸入：

sass input.scss output.css 

命令 Sass 監視檔案的改動並更新 CSS ：

sass --watch input.scss:output.css

如果你的目錄裡有很多 Sass 檔案，你還可以命令 Sass 監視整個目錄：

sass --watch app/sass:public/stylesheets

在命令列後面添加 --style 編譯格式 可以選擇編譯方式。

編譯方式有四種：

　　nested（預設）：選取器與屬性等單獨佔用一行，縮排量與 Sass 檔案中一致，每行的縮排量反映了其在嵌套規則內的層數。當閱讀大型 CSS 檔案時，這種樣式可以很容易地分析檔案的主要結構；

　　expanded：選取器、屬性等各佔用一行，屬性根據選取器縮排，而選取器不做任何縮排；

　　compact：每條 CSS 規則只佔一行，包含其下的所有屬性。嵌套過的選取器在輸出時沒有空行，不嵌套的選取器會輸出空白行作為分隔字元；

　　compressed：刪除所有無意義的空格、空白行、以及注釋，力求將檔案體積壓縮到最小，同時也會做出其他調整，比如會自動替換佔用空間最小的顏色表達方式。

編譯錯誤，命令列中會報錯，並提示錯誤碼行數。

 

前端學習之路——scss篇