一、Sass的語法格式及編譯調(diào)試

1. Sass和scss的區(qū)別

本質(zhì)上來說是同一個東西急黎，只是語法上有細微的差異：
現(xiàn)有一段基礎CSS代碼：

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

使用Sass語法編譯如下：

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

Sass 語法是 Sass 的最初語法格式，他是通過 tab 鍵控制縮進的一種語法規(guī)則，而且這種縮進要求非常嚴格邻眷。另外其不帶有任何的分號和大括號南缓。常常把這種格式稱為 Sass 老版本湃鹊，其文件名以“.sass”為擴展名本昏。

使用Scss語法編譯如下：

$fon-stack: Helvetica,sans-serif;
$primary-color: #333;

body{
   font: 100% $font-stack;
   color: $primary-color;
}

SCSS 是 Sass 的新語法格式，從外形上來判斷他和 CSS 長得幾乎是一模一樣痢缎，代碼都包裹在一對大括號里胁勺，并且末尾結(jié)束處都有一個分號。其文件名格式常常以“.scss”為擴展名牺弄。

2. Sass 編譯

在項目中還是引用“.css”文件姻几，Sass 只不過是做為一個預處理工具，提前幫你做事情势告，只有你需要時候，他才有攻效抚恒。所以Sass 的編譯就出現(xiàn)了咱台。因為 Sass 開發(fā)之后，要讓 Web 頁面能調(diào)用 Sass 寫好的東西俭驮，就得有這么一個過程回溺，這個過程就稱之為 Sass 編譯過程。Sass 的編譯有多種方法：

命令編譯
GUI工具編譯
自動化編譯

2.1 Sass命令編譯

單文件編譯：↓

sass sass/style.scss:css/style.css

多文件編譯：↓

sass sass/:css/

上面的命令表示將項目中“sass”文件夾中所有“.scss”(“.sass”)文件編譯成“.css”文件混萝，并且將這些 CSS 文件都放在項目中“css”文件夾中遗遵。

監(jiān)測代碼變化，實時編譯：↓

sass --watch sass/style.scss: css/style.css

sass--watch.jpg

一旦我的 sacc/style.scss 文件有任何修改逸嘀，只要我重新保存了修改的文件车要，命令終端就能監(jiān)測，并重新編譯出文件崭倘。

2.2 Sass GUI工具編譯
實用性完全比不上命令行翼岁，我直接跳過了。

2.3 Sass 自動化編譯
現(xiàn)在還不會用司光，留著后面來看琅坡。

Grunt 配置 Sass編譯的示例代碼：↓

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                files: {
                    'style/style.css' : 'sass/style.scss'
                }
            }
        },
        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['sass']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

Gulp 配置 Sass 編譯的示例代碼：↓

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

gulp.task('watch', function() {
    gulp.watch('scss/*.scss', ['sass']);
});

gulp.task('default', ['sass','watch']);

3. [Sass]不同樣式風格的輸出方法

3.1 [Sass]嵌套輸出方式 nested

例如這樣一段sass：

$bg-color: #f0f0f0;
$red-color: #ff5050;
.nav {
  background-color: $bg-color;
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    color: $red-color;
  }
}

這段代碼在編譯的時候需要帶上參數(shù)：--style nested (默認以這個參數(shù)編譯)↓

sass --watch sass/style.scss:css/style.css --style nested

編譯以后的css樣式如下：↓

.nav {
  background-color: #f0f0f0; }
  .nav ul {
    margin: 0;
    padding: 0;
    list-style: none; }
  .nav li {
    display: inline-block; }
  .nav a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    color: #ff5050; }

默認以nested方式編譯.png

3.2 [Sass]展開輸出方式 expanded
這個輸出的 CSS 樣式風格和 nested 類似，只是大括號在另起一行残家，同樣上面的代碼榆俺，在編譯時需要帶參數(shù)--style expanded，

sass --watch sass/style.scss:css/style.css --style expanded

編譯出來：↓

.nav{
    background-color: #f0f0f0;
}
.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav li {
  display: inline-block;
}
.nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

以expanded方式編譯.png

3.3 [Sass]緊湊輸出方式 compact
在編譯的時候帶上參數(shù)--style compact:

sass --watch sass/style.scss:css/style.css --style compact

編譯出來：↓

.nav { background-color: #f0f0f0; }
.nav ul { margin: 0; padding: 0; list-style: none; }
.nav li { display: inline-block; }
.nav a { display: block; padding: 6px 12px; text-decoration: none; color: #ff5050; }

以compact方式編譯.png

3.4 [Sass]壓縮輸出方式 compressed
在編譯的時候帶上參數(shù) --style compressed:

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

壓縮輸出方式會去掉標準的 Sass 和 CSS 注釋及空格。也就是壓縮好的 CSS 代碼樣式風格：↓

.nav{background-color:#f0f0f0}.nav ul{margin:0;padding:0;list-style:none}.nav li{display:inline-block}.nav a{display:block;padding:6px 12px;text-decoration:none;color:#ff5050}

image.png

3.5 [Sass]的調(diào)試
在Chrome的開發(fā)者工具中找到Sources茴晋，在這里的修改可以及時得到反饋迂求，和在websorem里面操作一樣，保存一次編譯一次晃跺。

瀏覽器調(diào)試.png

二揩局、Sass的基本特性-基礎

1、聲明變量

Sass 變量.png

上圖非常清楚告訴了大家掀虎，Sass 的變量包括三個部分：

聲明變量的符號“$”
變量名稱
賦予變量的值

Bootstrap Sass版本定義primary-button的方法：↓

$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7
$btn-primary-color : #fff !default;
$btn-primary-bg : $brand-primary !default;
$btn-primary-border : darken($btn-primary-bg, 5%) !default;

2凌盯、普通變量與默認變量

- 普通變量：

定義之后可以在全局使用：↓

$fontSize: 14px;
body{
    font-size: $fontSize;
}

編譯后的代碼：↓

body{font-size:14px;}

- 默認變量：
sass 的默認變量僅需要在值后面加上!default即可。

$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight;
}

編譯后的代碼：↓

body{line-height:1.5;}

覆蓋默認樣式：只需要在默認變量之前重新聲明下變量即可 ↓

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight;
}

編譯后的代碼：↓

body{line-height:2;}

默認變量的價值在進行組件化開發(fā)的時候會非常有用烹玉。

3驰怎、變量的調(diào)用

定義變量：

$brand-primary: darken(#428bca,6.5%) !default;  //#337ab7
$btn-primary-color: #fff default;
$btn-primary-bg: $brand-primary !default; 
$btn-primary-border: darken($btn-primary-bg,4%)  !default;

調(diào)用：

.btn-primary{
    background-color: $btn-primary-bg;
    color: $btn-primary-color;
    border: 1px solid $btn-primary-border;
}

編譯出來的CSS：

.btn-primary{
    background-color: #337ab7;
    color: #fff;
    border: 1px solid #2e6da4;
}

4、局部變量和全局變量

- 全局變量與局部變量
示例：

$color: orange !default;  //定義全局變量(在選擇器二打、函數(shù)县忌、混合宏...的外面定義的變量為全局變量)
.block 
  color: $color;        //調(diào)用全局變量
}
em{
  $color: red;          //定義局部變量
  a {
    color: $color;      //調(diào)用局部變量
  }
}
span{
  color: $color;        //調(diào)用全局變量
}

css編譯結(jié)果：↓

.block{color: orange;}
em a{color: red;}
span{color: orange;}

可以得知，在元素內(nèi)部定義的變量不會影響其他元素继效。示例中寫在元素外部的變量：$color: orange !default;是一個全局變量症杏；而寫在元素內(nèi)部的變量：$color:orange !default;就是一個局部變量。

- 全局變量的影子
當在局部范圍（選擇器內(nèi)瑞信、函數(shù)內(nèi)厉颤、混合宏內(nèi)...）聲明一個已經(jīng)存在于全局范圍內(nèi)的變量時，局部變量就成為了全局變量的影子凡简”朴眩基本上，局部變量只會在局部范圍內(nèi)覆蓋全局變量秤涩。

示例中的 em 選擇器內(nèi)的變量 $color 就是一個全局變量的影子帜乞。

//SCSS
$color: orange !default;  //定義全局變量
.block {
  color: $color;          //調(diào)用全局變量
}
em {
  $color: red;            //定義局部變量（全局變量 $color 的影子）
  a {
    color: $color;        //調(diào)用局部變量
  }
}

- 什么時候聲明變量？
滿足所有下述標準時方可創(chuàng)建新變量：

該值至少重復出現(xiàn)了兩次筐眷；
該值至少可能會被更新一次黎烈；
該值所有的表現(xiàn)都與變量有關（非巧合）。

基本上浊竟，沒有理由聲明一個永遠不需要更新或者只在單一地方使用變量怨喘。

5、Sass嵌套

5.1 選擇器嵌套
例如有這樣的html結(jié)構(gòu)：

<header>
    <nav>
        <a href=“##”>Home</a>
        <a href=“##”>About</a>
        <a href=“##”>Blog</a>
    </nav>
<header>

使用sass 方法選中header中的a標簽：

nav{
  a{
    color: red;
    header &{
      coloe: green;
    }
  }
}

連體符 & 使用方法振定，編譯結(jié)果：↓

nav a {
  color: red;
}
header nav a {
  color: green;
}

5.2 屬性嵌套
CSS 有一些屬性前綴相同必怜，只是后綴不一樣，比如：border-top/border-right后频，與這個類似的還有 margin梳庆、padding暖途、font 等屬性。假設你的樣式中用到了：

.box{
  border-top: 1px solid red;
  border-bottom: 1px solid green;
}

在Sass中我們可以這樣寫：

.box{
  border: {      //這里border后面的" : "是關鍵膏执；
    top: 1px solid red;
    bottom: 1px solid green;
  }
}

5.3 偽類嵌套
其實偽類嵌套和屬性嵌套非常類似驻售，只不過他需要借助&符號一起配合使用。我們就拿經(jīng)典的“clearfix”為例吧：↓

.clearfix{
  &:before,&:after{
    content:"";
    display: table;
  }
  &:after{
    clear: both;
    overflow: hidden;
  }
}

編譯后的代碼：↓

.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

避免選擇器嵌套：

選擇器嵌套最大的問題是將使最終的代碼難以閱讀更米。開發(fā)者需要花費巨大精力計算不同縮進級別下的選擇器具體的表現(xiàn)效果欺栗。
選擇器越具體則聲明語句越冗長，而且對最近選擇器的引用(&)也越頻繁征峦。在某些時候迟几，出現(xiàn)混淆選擇器路徑和探索下一級選擇器的錯誤率很高，這非常不值得栏笆。
為了防止此類情況类腮，我們應該盡可能避免選擇器嵌套。然而蛉加，顯然只有少數(shù)情況適應這一措施蚜枢。

6、混合宏

當頁面樣式越來越復雜针饥，需要重復使用大段的樣式時厂抽，就需要使用混合宏。

6.1 聲明混合宏

不帶參數(shù)的混合宏

在Sass中使用@mixin來聲明一個混合宏打厘，如：↓

@mixin border-radius{
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

其中 @mixin 是用來聲明混合宏的關鍵詞修肠，有點類似 CSS 中的 @media、@font-face 一樣户盯。border-radius 是混合宏的名稱。大括號里面是復用的樣式代碼饲化。

帶參數(shù)的混合宏

除了聲明一個不帶參數(shù)的混合宏之外莽鸭，還可以在定義混合宏時帶有參數(shù)，如:↓

@mixin border-radius($radius:5px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

復雜的混合宏

可以在大括號里面寫上帶有邏輯關系吃靠，幫助更好的做你想做的事情,如：↓

@mixin box-shaow($shadow...){
  @if length($shadow) >= 1{
    @include prefixer(box-shadow,$shadow);
  }@else{
    $shadow: 0 0 4px rgba(0,0,0,.3);
    @include prefixer(box-shdow,$shadow);
  }
}

這個 box-shadow 的混合宏硫眨，帶有多個參數(shù)，這個時候可以使用“ … ”來替代巢块。簡單的解釋一下礁阁，當 $shadow 的參數(shù)數(shù)量值大于或等于“ 1 ”時，表示有多個陰影值族奢，反之調(diào)用默認的參數(shù)值“ 0 0 4px rgba(0,0,0,.3) ”姥闭。

6.2 調(diào)用混合宏
關鍵詞@include來調(diào)用聲明好的混合宏。例如在你的樣式中定義了一個圓角的混合宏“border-radius”:↓

@mixin border-radius{
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

在一個按鈕中要調(diào)用定義好的混合宏“border-radius”越走，可以這樣使用：↓

button{
  @include border-radius;
}

編譯后的CSS如下：↓

button {
    -webkit-border-radius: 10px;
    border-radius: 10px
}

調(diào)用混合宏@mixin.png

6.3 混合宏的參數(shù)

傳一個不帶值的參數(shù)

在混合宏中棚品，可以傳一個不帶任何值的參數(shù)靠欢，比如：↓

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

上述混合宏中的“border-radius”中定義了一個不帶任何值的參數(shù)“$radius”。在調(diào)用的時候可以給這個混合宏傳一個參數(shù)值：↓

.box{
  @include border-radius(3px);
}

表示在給混合宏傳遞了一個“border-radius”的值為“3px”铜跑。編譯后的CSS：↓

.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

傳一個帶值的參數(shù)

在 Sass 的混合宏中门怪，還可以給混合宏的參數(shù)傳一個默認值，例如：↓

@mixin border-radius($radius: 3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

在混合宏“border-radius”傳了一個參數(shù)“$radius”锅纺，而且給這個參數(shù)賦予了一個默認值“3px”掷空。

在調(diào)用類似這樣的混合宏時，會多有一個機會囤锉，假設你的頁面中的圓角很多地方都是“3px”的圓角坦弟，那么這個時候只需要調(diào)用默認的混合宏“border-radius”:↓

.btn{
  @include border-radius;
}

編譯出來的CSS：

.btn{
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

但有的時候，頁面中有些元素的圓角值不一樣嚼锄，那么可以隨機給混合宏傳值减拭，如：↓

.box{
  @include border-radius(50%);
}

新的值"50%"會覆蓋原有的值“3px”，編譯后的CSS：

.box{
  -webkit-border-radius:50%;
  border-radius:50%;
}

傳多個參數(shù)

sass混合宏除了能傳一個參數(shù)之外区丑，還可以穿多個參數(shù)拧粪，如：↓

@mixin center($width,$height){
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height)/2;
  padding-left: -($width)/2;
}

在混合宏“center”就傳了多個參數(shù)。在實際調(diào)用和其他混合宏是一樣的：↓

.box-center{
  @include center(500px,300px)
}

編譯后的CSS：

.box-center {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  padding-left: -250px;
}

有一個特別的參數(shù)“...”沧侥。當混合宏的參數(shù)過多之時可霎，可以使用參數(shù)來替代，如：↓

@mixin box-shadow($shadows...){
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000,.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }
}

在調(diào)用時傳參：↓

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

編譯出來的CSS↓

.box {
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
}

混合宏的不足

最大的不足之處是會生成冗余的代碼塊宴杀。比如在不同的地方調(diào)用一個相同的混合宏時癣朗。如：↓

@mixin border-radius{
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.box {
  @include border-radius;
  margin-bottom: 5px;
}
.btn {
  @include border-radius;
}

示例在“.box”和“.btn”中都調(diào)用了定義好的“border-radius”混合宏。先來看編譯出來的 CSS：↓

.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 5px;
}
.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

明顯可以看出旺罢，Sass 在調(diào)用相同的混合宏時旷余，并不能智能的將相同的樣式代碼塊合并在一起。這也是 Sass 的混合宏最不足之處扁达。

6.4 sass 擴展/繼承

繼承@extend

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}
.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

編譯后CSS：↓

.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
.btn-primary {
  background-color: #f36;
  color: #fff;
}
.btn-second {
  background-clor: orange;
  color: #fff;
}

從示例代碼可以看出正卧，在 Sass 中的繼承，可以繼承類樣式塊中所有樣式代碼跪解，而且編譯出來的 CSS 會將選擇器合并在一起炉旷，形成組合選擇器。

6.5 [Sass]占位符 %placeholder

Sass中的占位符%placeholder功能很強叉讥。它可以取代以前CSS中的基類造成的代碼冗余：%placeholder聲明的代碼窘行，如果不被@extend調(diào)用的話，不會產(chǎn)生任何代碼图仓。示例：

%mt5{
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

這段代碼如果沒有被@extend調(diào)用罐盔，不會產(chǎn)生任何代碼塊。只有通過@extend調(diào)用才會產(chǎn)生代碼：↓

.btn {
  @extend %mt5;
  @extend %pt5;
}
.block {
  @extend %mt5;
  span {
    @extend %pt5;
  }
}

編譯后的CSS：↓

.btn, .block {
  margin-top: 5px;
}
.btn, .block span {
  padding-top: 5px;
}

由上可知透绩，用過@extend調(diào)用的占位符翘骂，編譯出來的代碼會將相同的代碼合并在一起壁熄。這一點非常棒！

6.6 [Sass]混合宏 VS 繼承 VS 占位符

三者如何選擇碳竟，才能發(fā)揮各自最佳優(yōu)勢草丧？

混合宏的使用

混合宏.png

缺點：通過編譯出來的CSS可以看出，混合宏不會自動合并相同的樣式代碼margin-top:5px;莹桅，這樣極易造成代碼冗余昌执。

優(yōu)點：可以傳參。

總結(jié)：如果代碼塊中涉及到變量诈泼，建議使用混合宏來創(chuàng)建相同的代碼塊懂拾。

繼承

Sass 繼承.png

繼承編譯出來的代碼會將使用繼承的代碼塊合并到一起，通過組合選擇器的方式展現(xiàn)：

.mt, .block, .block span, .header, .header span {
  margin-top: 5px;
}

缺點：不能傳參铐达。

優(yōu)點：代碼干凈不冗余岖赋。

總結(jié)：如果代碼塊不需要任何傳參，而且有一個基類已經(jīng)存在文件中瓮孙，建議使用Sass的繼承唐断。

占位符

占位符.png

對比繼承和占位符，編譯后的CSS基本一致杭抠，只是繼承的代碼塊中生成了.mt的選擇器脸甘，而占位符沒有。那么就是說二者的主要區(qū)別是：
占位符是獨立定義的偏灿，不調(diào)用不會產(chǎn)任何代碼丹诀；
繼承是首先由一個基類存在.mt，不管調(diào)用與否翁垂，基類樣式都會被編譯出來铆遭。

混合宏、繼承沿猜、占位符.png

7疚脐、Sass插值 #{}

想寫一個更干凈的、高效的和面向?qū)ο蟮腃SS邢疙。Sass中的插值（interpolation）就是重要的一部分。示例：

$space:(margin,padding);
@mixin set-value($side,$value){
  @each $prop in $space{
    #{$prop}-#{side}: $value;
  }
}
.container{
  @include set-value(top,20px);
}

它可以讓變量和屬性工作的很完美望薄，編譯后的CSS：

.container {
  margin-top: 20px;
  padding-top: 20px;
}

當你想設置屬性值的時候你可以使用字符串插入進來疟游。另一個有用的用法是構(gòu)建一個選擇器『壑В可以這樣使用：

@mixin generate-sizes($class,$small,$medium,$big){
  .#{$class}-small{
    font-size: $small;
  }
  .#{$class}-medium{
    font-size: $medium;
  }
  .#{$class}-big{
    font-size: $big;
  }
}
@include generate-sizes("header-text", 12px, 20px, 40px)

編譯之后：

.header-text-small {
  font-size: 12px;
}
.header-text-medium {
  font-size: 20px;
}
.header-text-big {
  font-size: 40px;
}

8. 注釋

sass有兩種注釋方式：

類似CSS注釋：/* 這里是注釋 */
類似JS注釋：//這里是注釋

區(qū)別是颁虐，/* */會在編譯的CSS中顯示，//在編譯的CSS里不顯示卧须。示例：

//定義占位符
%mt5{
  margin-top: 50px;
}
/*調(diào)用一個函數(shù)*/
.box{
  @extend %mt5
}

編譯后：

.box {
  margin-top: 5px;
}

/*調(diào)用一個占位符*/

9. 數(shù)據(jù)類型

sass中包含以下幾種數(shù)據(jù)類型：

數(shù)字：如1另绩、2儒陨、3、10px笋籽；
字符串：有引號字符串或無引號字符串蹦漠，如，“foo”车海、‘bar’笛园、baz；
顏色：blue侍芝、#ff5050研铆、rgba(255,180,20,0.3)；
布爾值：true州叠、false棵红；
空值：null；
值列表：用空格或者逗號分開咧栗，如：1.5em 1em 0 2em 逆甜、Helvetice,Arial,sans-serif

10. 字符串

SassScript支持CSS的兩種字符串類型：

有引號的字符串：“Lucida Grande”、‘http://sass-lang.com’楼熄；
無引號的字符串：sans-serifbold忆绰。

在CSS編譯時不會改變其類型，只有使用插值#{}時可岂，有引號字符串將被編譯為無引號字符串错敢，這樣方便了在混合宏中引用選擇器名:

@mixin firefox-message($selector){
  body.firefox #{$selector}:before{
    content: "Hi,Firefox users!"
  }
}
@include firefox-message(".header")

編譯為：

body.firefox .header:before{
  content: "Hi,firefox user!";
}

11. 值列表

所謂值列表，是指sass如何處理CSS中 margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial,sans-serif 這種通過空格或者逗號分割的一系列值缕粹。
獨立的值被視為只包含一個值的值列表稚茅。

Sass列表函數(shù)（Sass list functions）賦予了值列表更多功能（Sass進級會有講解）：

nth函數(shù)（nth function）可以直接訪問值列表中的某一項；
join函數(shù)（join function）可以將多個值列表連結(jié)在一起平斩；
append函數(shù)（append function）可以在值列表中添加值亚享；
@each規(guī)則（@each rule）則能夠給值列表中的每個項目添加樣式。

值列表中可以再包含值列表绘面，比如 1px 2px, 5px 6px 是包含 1px 2px 與 5px 6px 兩個值列表的值列表欺税。如果內(nèi)外兩層值列表使用相同的分隔方式，要用圓括號包裹內(nèi)層揭璃，所以也可以寫成 (1px 2px) (5px 6px)晚凿。當值列表被編譯為 CSS 時，Sass 不會添加任何圓括號瘦馍，因為 CSS 不允許這樣做歼秽。(1px 2px) (5px 6px)與 1px 2px 5px 6px 在編譯后的 CSS 文件中是一樣的，但是它們在 Sass 文件中卻有不同的意義情组，前者是包含兩個值列表的值列表燥筷，而后者是包含四個值的值列表箩祥。

可以用 () 表示空的列表，這樣不可以直接編譯成 CSS肆氓，比如編譯 font-family: ()時袍祖，Sass 將會報錯。如果值列表中包含空的值列表或空值做院，編譯時將清除空值盲泛，比如 1px 2px () 3px 或 1px 2px null 3px。

三键耕、Sass的基本特性-運算

程序中的運算是常見的一件事情寺滚，但在 CSS 中能做運算的，到目前為止僅有 calc() 函數(shù)可行屈雄。但在 Sass 中村视，運算只是其基本特性之一。

3.1 加法

在變量或?qū)傩灾卸伎梢宰黾臃ㄟ\算：

.container{
  width: 20px + 8in;    //1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
  height: 8in + 20px;   //按第一個值得單位計算
}

點這里查看關于單位in的單位in的定義
編譯后：

.container{
  width: 788px;
  height: 8.20833in;
}

單對于不同類型的單位是酒奶，在sass中計算會報錯蚁孔。如下所示：

.container{
  width: 20px + 1em;
}

報錯：”Incompatible units: 'em' and ‘px'. “

in mm cm pt pc px等單位都能運算，ex em rem等相對于當前字體的單位不能運算惋嚎。

sass加法實例.png

3.2 減法

示例：

$full-width: 960px;
$sidebar-width: 200px;
.content{
  width:{
    $full-width - $siderbar-width;
  }
}

編譯的CSS代碼：

.content{
  width: 760px;
}

在遇到不同單位時杠氢，編譯也會報錯。

3.3 乘法

Sass中乘法運算和加減法運算略有不同另伍，當一個單位同時聲明兩個值時會有問題鼻百。比如：

一個單位同時聲明兩個值.png

在乘法運算時，兩個值的單位相同時摆尝，只需要為一個數(shù)值提供單位即可：

后面的值不帶單位.png

不同類型的單位進行乘法運算時也會報錯：

不同類型單位不能乘法.png

實例：@for循環(huán)讓icon圖標的background-position的Y軸值按20px遞減：

遞減.png

3.4 除法

Sass的乘法運算規(guī)則也適用于除法運算温艇，但還有一個特殊之處。CSS中”/“作為一個符號出現(xiàn)堕汞，因此在sass直接使用”/“作為除號勺爱，編譯時即得不到我們需要的結(jié)果，也不會報錯讯检，比如：

.container{
  width: 100px / 2;
}

編譯后的CSS：

.container{
  width: 100px / 2;
}

修正這個問題只需要給運算外面添加一個小括號（）即可:

.container{
  width: (100px / 2);
}

編譯后的CSS：

.container{
  width: 50px;
}

另外還有其他的情況” / “符號被當做除法運算：

如果數(shù)值或它的任意部分是存儲在一個變量中琐鲁，或是函數(shù)返回值。
如果數(shù)值被圓括號包圍
如果數(shù)值是另外一個數(shù)學表達式的一部分人灼。

p {
  font: 10px/8px;             // 純 CSS绣否，不是除法運算
  $width: 1000px;
  width: $width/2;            // 使用了變量，是除法運算
  width: round(1.5)/2;        // 使用了函數(shù)挡毅，是除法運算
  height: (500px/2);          // 使用了圓括號，是除法運算
  margin-left: 5px + 8px/2px; // 使用了加（+）號暴构，是除法運算
}

3.5 變量計算

示例：

$content-width: 720px;
$sidebar-width: 220px;
$gutter:20px;
.container{
  width: $content-width + $sidebar-width + $gutter;
  margin: 0 auto;
}

編譯結(jié)果：

.container {
  width: 960px;
  margin: 0 auto;
}

3.6 數(shù)字運算

計算 Grid 單列列寬的運算示例：

.container{
  width: ((220px + 720px) - 11 * 20) / 12;
}

編譯結(jié)果：

.container{
  width: 60px;
}

3.7 顏色運算

所有算數(shù)運算都支持顏色值跪呈，并且是分段運算的段磨，也就是說，紅耗绿、綠和藍各顏色分段進行運算苹支。如：

p{
  color: #010203 + #040506；
}

計算方式：#( 01+04)(02+05)(03+06)误阻，編譯后的CSS：

p{
   color: #050709;
}

也可以是數(shù)字和顏色值一起運算债蜜，同樣也是分段運算，例如：

p{
  color: #010203 * 2
}

計算方式為：#(012)(022)(03*2)究反，編譯后的CSS：

p{
  color: #020406
}

3.8字符運算

Sass中可以通過”+“來對字符串進行連接寻定，和JS類似：

$content: "Hello" + " " + "Sass!";
.box: before{
  content: " #{$content}";
}

編譯出來的CSS：

.box{
  content:"Hello Sass"
}

連接字符

div{
  cursor: e + -resize;
}

編譯后CSS：

div{
  cursor: e-resize;
}

注意運算的第一個值帶引號，結(jié)果也帶引號精耐；第一個值沒有引號狼速，結(jié)果也不帶引號：

字符運算.png

Sass基礎人門-學習筆記

Sass基礎人門-學習筆記

一、Sass的語法格式及編譯調(diào)試

1. Sass和scss的區(qū)別

2. Sass 編譯

3. [Sass]不同樣式風格的輸出方法

二揩局、Sass的基本特性-基礎

1、聲明變量

2凌盯、普通變量與默認變量

3驰怎、變量的調(diào)用

4、局部變量和全局變量

5、Sass嵌套

6、混合宏

7疚脐、Sass插值 #{}

8. 注釋

9. 數(shù)據(jù)類型

10. 字符串

11. 值列表

三键耕、Sass的基本特性-運算

3.1 加法

3.2 減法

3.3 乘法

3.4 除法

3.5 變量計算

3.6 數(shù)字運算

3.7 顏色運算

3.8字符運算