sass

前端之Sass/Scss實戰筆記

時間 2015-09-14 13:04:06  極客頭條

原文   http://segmentfault.com/a/1190000003742313

主題  Sass

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