前端之Sass/Scss實戰筆記

王下邀月熊_Chevalier發表於2015-09-13
前端CSS筆記

Introduction

Sass 有兩種語法規則(syntaxes),目前新的語法規則（從 Sass 3開始）被稱為 “SCSS”( 時髦的css（Sassy CSS）),它是css3語法的的擴充級，就是說每一個語法正確的CSS3檔案也是合法的SCSS檔案，SCSS檔案使用.scss作為擴充名。第二種語法別成為縮排語法（或者 Sass），它受到了Haml的簡潔精煉的啟發，它是為了人們可以用和css相近的但是更精簡的方式來書寫css而誕生的。它沒有括號，分號，它使用 行縮排 的方式來指定css 塊，雖然sass不是最原始的語法，但是縮排語法將繼續被支援，在縮排語法的檔案以 .sass 為擴充名。

註釋

有三種形式：

（1）//comment：該註釋只是在.scss原始檔中有，編譯後的css檔案中沒有。

（2）/! /：重要註釋，任何style的css檔案中都會有，一般放置css檔案版權說明等資訊。

（3）/ /：該註釋在compressed的style的css中沒有，其他style的css檔案都會含有。

Quick Start

Installation

Build

1.切換到.scss檔案所在目錄

命令列下切換到程式碼資料夾目錄（如Z:\），假設有檔案test.scss檔案，裡面內容如下：（SASS完全支援css語法）

h1{
    font-size:17px;    
}
h2{
    font-size:18px;
}

2.編譯scss檔案為css檔案

　　執行命令：sass --style compressed test.scss test.css，即可生成壓縮版的css檔案，並且命名為test.css。幾點說明：

（1）--style 後面可以有四個引數可選，分別為expanded、nested、compact、compressed，分別選用不同引數的效果可以自己嘗試體驗。

（2）test.scss和test.css檔案目錄可以自定義，例如把Z盤sass目錄下的test.scss檔案編譯為壓縮版的檔案，並放置在Z盤css目錄下，那麼命令即：sass --style compressed z:\sass\test.scss z:\css\test.css

（3）開發過程中，只需要修改scss檔案，然後編譯；前端頁面只需要引用相應的css檔案即可。

3.偵聽檔案和資料夾

如果希望某一個scss檔案或者相應的資料夾下面檔案修改後，自動進行編譯，那麼可以使用偵聽命令。

（1）偵聽檔案：

sass --watch --style compressed test.scss:test.css

當test.scss檔案有修改後，會自動編譯為test.css，並且是compressed的。

（2）偵聽資料夾：

sass --watch --style compressed sass:css

當sass資料夾下.scss檔案有修改的時候，會自動編譯為與sass中檔案同名的css檔案。

 備註：

（1）注意原始檔和目標檔案之間是冒號，與編譯命令中為空格不同。

（2）生成的map檔案可以查詢source map檔案的作用。

Webpack

Webpack中也內建了sass-loader，通過簡單的配置既可以使用。不過需要注意的是，Webpack的sass-loader還是依賴於node-sass以及sass(gem)，所以如果安裝sass-loader報錯可以先嚐試安裝sass。

變數與選擇器

變數

定義

變數的定義一般以$開頭，某個變數的作用域僅限於他們定義的層級以及子層級。如果變數是定義在所有巢狀選擇器之外的，那麼他們可以在各處被呼叫。

$color1:#aeaeae;
.div1{
    background-color:$color1;
}

編譯後：

.div1 {
  background-color: #aeaeae;
}
/*# sourceMappingURL=test.css.map */

如果希望某個在子選擇器中定義的變數能夠成為全域性變數，可以使用!global關鍵字：

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

巢狀引用

巢狀引用在其他程式語言中即是字串插值，需要用#{}進行包裹：

$left:left;
.div1{
    border-#{$left}-width:5px;
}

變數計算

Sass中也是支援對於變數進行簡單的計算：

$left:20px;
.div1{
    margin-left:$left+12px;
}

變數可以支援計算的型別，還是比較多的：

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
  font: (italic bold 10px/8px); // In a list, parentheses don't count
}

選擇器

巢狀

.div1{
    .span1{
        height: 12px;
    }
    .div2{
        width: 16px;
    }
}

屬性也可以巢狀，比如border-color屬性，可以寫成：

　　p {
　　　　border: {
　　　　　　color: red;
　　　　}
　　}

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

父元素引用

在巢狀的子層級中，允許使用&引用父元素：

.div1{
    &:hover{
        cursor: hand;
    }
}

程式碼重用

繼承

SASS允許一個選擇器，繼承另一個選擇器。比如，現有class1：

.class1{
    font-size:19px;
}
.class2{
    @extend .class1;
    color:black;
}

注意：如果在class2後面有設定了class1的屬性，那麼也會影響class2，如下：

.class1{
    font-size:19px;
}
.class2{
    @extend .class1;
    color:black;
}
.class1{
    font-weight:bold;
}

由此可以看出Scss也是遞迴編譯的。

引用外部css檔案（Partials）

有時網頁的不同部分會分成多個檔案來寫樣式，或者引用通用的一些樣式，那麼可以使用@import。

@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";

Mixin&Include

Mixin有點像C語言的巨集（macro），是可以重用的程式碼塊。

使用@mixin命令，定義一個程式碼塊。

　　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

使用@include命令，呼叫這個mixin。

　　div {
　　　　@include left;
　　}

引數與預設值

  • 邊距設定

@mixin common($value1,$value2,$defaultValue:12px){
    display:block;
    margin-left:$value1;
    margin-right:$value2;
    padding:$defaultValue;
}
.class1{
    font-size:16px;
    @include common(12px,13px,15px);
}
.class2{
    font-size:16px;
    @include common(12px,13px);
}

  • 瀏覽器字首設定設定

下面是一個mixin的例項，用來生成瀏覽器字首。

　　@mixin rounded($vert, $horz, $radius: 10px) {
　　　　border-#{$vert}-#{$horz}-radius: $radius;
　　　　-moz-border-radius-#{$vert}#{$horz}: $radius;
　　　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
　　}

使用的時候，可以像下面這樣呼叫：

　　#navbar li { @include rounded(top, left); }
　　#footer { @include rounded(top, left, 5px); }

程式設計式方法

流程控制

條件語句

@if可以用來判斷：

　　p {
　　　　@if 1 + 1 == 2 { border: 1px solid; }
　　　　@if 5 < 3 { border: 2px dotted; }
　　}

配套的還有@else命令：

　　@if lightness($color) > 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #fff;
　　}

迴圈語句

SASS支援for迴圈：

　　@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
　　}

也支援while迴圈：

　　$i: 6;
　　@while $i > 0 {
　　　　.item-#{$i} { width: 2em * $i; }
　　　　$i: $i - 2;
　　}

each命令，作用與for類似：

　　@each $member in a, b, c, d {
　　　　.#{$member} {
　　　　　　background-image: url("/image/#{$member}.jpg");
　　　　}
　　}

函式

Sass允許使用者自定義函式，原型如下所示：

　　@function double($n) {
　　　　@return $n * 2;
　　}

　　#sidebar {
　　　　width: double(5px);
　　}

顏色函式

SASS提供了一些內建的顏色函式，以便生成系列顏色。

　　lighten(#cc3, 10%)  // #d6d65c
　　darken(#cc3, 10%)  //  #a3a329
　　grayscale(#cc3) // #808080
　　complement(#cc3) // #33c

Reference

相關文章