SCSS詳解

SCSS入門

CSS預處理器

• 定義了一種新的專門的編程語言，編譯后成正常的CSS文件。為CSS增加一些編程的特性，無需考慮瀏覽器的兼容問題，讓CSS更加簡潔，適應性更強，可讀性更佳，更易於代碼的維護等諸多好處。
• CSS預處理器語言：scss（sass）、LESS等；

Sass和SCSS的區別

• 文件擴展名不同：“.sass”和“.scss”；
• Sass是以嚴格縮進式語法規則來書寫的，不帶大括號和分號；而SCSS的語法和CSS書寫語法類似。

Sass安裝（Windows版）

先安裝ruby：Ruby 的官網（http://rubyinstaller.org/downloads）下載對應需要的 Ruby 版本

安裝sass：
• 方法一（通過命令安裝sass）：打開命令終端，輸入：gem install sass
• 方法二（本地安裝sass）：從http://rubygems.org/gems/sass 下載sass安裝包，然后在終端輸入: “gem install [把下載的安裝包拖到這里]” 然后直接額回車即可安裝成功。

sass編譯

sass編譯的方法：

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

sass命令編譯（在命令終端輸入sass指令來編譯sass，最直接，最簡單）

單文件編譯：

sass <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css

多文件編譯：

sass sass/:css/

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

缺點及解決方法：

缺點：每次保存scss文件后都要重新編譯太麻煩； 解決方法：開啟“watch”功能：

sass --watch <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css

tip：

文件路徑不要帶中文，如果有中文，watch功能無法正常使用。

sass嵌套輸出方式nested

只要在編譯的時候帶上參數“ --style nested”:

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

sass展開輸出方式expanded

在編譯的時候帶上參數“ --style expanded”:

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

sass展開輸出方式compact

在編譯的時候帶上參數“ --style compact”:

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

sass展開輸出方式compressed

在編譯的時候帶上參數“ --style compressed”:

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

scss語法格式

css代碼：

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

使用scss代碼：

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

tip:如果使用sass舊語法（sass語法），文件后綴名應為“.sass”；如果使用sass新語法（scss語法），文件后綴名應為".scss“語法，否則編譯時編譯不出來。

sass變量聲明

$+變量名+：+變量值；

$width:200px;

普通變量和默認變量

• 普通變量聲明后可以在全局范圍內使用；
• 默認變量僅需在值后面加上!default 即可；
• 默認變量一般是用來設置默認值，然后根據需求來覆蓋的，覆蓋的方式是在默認變量之前重新聲明下變量即可。
• 默認變量的價值在進行組件化開發的時候會非常有用。

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

編譯后的CSS代碼：

body {
    line-height:2;
}

局部變量和全局變量

• 局部變量：在元素里面聲明的變量；
• 全局變量：在元素外面定義的變量；
• 全局變量的影子：和全局變量名字相同的局部變量叫做全局變量的影子。

$color:green;//全局變量
$width:200px;//全局變量
$height:200px;//全局變量
body {
  background-color:$color;//調用全局變量
}
div {
  $color:yellow;//定義局部變量，全局變量$color的影子
  .div {
      background-color:$color;//調用局部變量
      width:$width;//調用全局變量
      height:$height;//調用全局變量
  }
}

sass嵌套

選擇器嵌套

<header>
    <nav>
        <a href="#">home</a>
        <a href="#">page</a>
    </nav>
</header>

css:

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

scss:

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

屬性嵌套(有相同的屬性前綴)

css:

.box {
    font-size: 12px;
    font-weight: bold;
}

scss:

.box {
    font: {
        size: 12px;
        weight: bold;
    }  
}

偽類嵌套

scss:

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

css:

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

sass混合宏

聲明混合宏

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

@mixin :聲明混合宏的關鍵詞；border-radius:混合宏的名稱；大括號內：復用的樣式代碼；

調用混合宏

@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}//聲明混合宏border-radius
button {
    @include border-radius;
}//調用混合宏border-radius

編譯為CSS：

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

混合宏的參數

不帶任何值的參數

@mixin border-radius($radius){
-webkit-border-radius: $radius;
border-radius: $radius;
}//聲明一個帶有參數$radius的混合宏
.box {
@include border-radius(3px);//調用混合宏並給混合宏傳參數“3px”
}

傳一個帶值參數（傳入一個默認值）

@mixin border-radius($radius:3px){
-webkit-border-radius: $radius;
border-radius: $radius;
}//聲明一個傳入了默認參數值的混合宏
.btn {
@include border-radius;//使用默認參數值的混合宏
}
.box { 
@include border-radius(50%);//可以自己傳入參數值
}

編譯出來的CSS：

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

傳多個參數值

@mixin size($width,$height){
    width: $width;
    height: $height;
}
.box-center {
    @include size(500px,300px);
}

編譯出來的CSS：

.box-center {
    width: 500px;
    height: 300px;
}

sass 繼承

scss：

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

編譯為CSS：

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

在sass中的繼承，可以繼承類樣式塊中所有樣式代碼，而且編譯出來的css會將選擇器合並在一起，形成組合選擇器。

sass占位符%

用占位符聲明的代碼，如果不被@extend調用就不會被編譯。

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}
.btn {
  color:red;
}

編譯為CSS：

.btn {
    color:red;
}//%占位符聲明的代碼沒有被編譯產生css代碼

使用@extend調用：

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}
.btn {
  @extend %mt5;//使用@extend調用占位符代碼
  @extend %pt5;
}
.block {
  @extend %mt5;
  span {
    @extend %pt5;
  }
}

編譯為CSS：

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

通過@extend調用的占位符，編譯出來的代碼會將相同的代碼合並在一起，代碼變得十分簡潔。

sass插值

用占位符聲明的代碼，如果不被@extend調用就不會被編譯。

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {//對每個在$properties中的$prop,即$properties中的margin、padding
        #{$prop}-#{$side}: $value;//$prop連接參數$side，值為參數$value
    }
}
.login-box {
    @include set-value(top, 14px);//調用混合宏
}

編譯為CSS：

.login-box {
  margin-top: 14px;
  padding-top: 14px; 
}

不可以：

$margin-big: 40px;
$margin-medium: 20px;
$margin-small: 12px;
@mixin set-value($size) {
    margin-top: $margin-#{$size};
}
.login-box {
    @include set-value(big);
}

也不可以：

@mixin updated-status {
    margin-top: 20px;
    background: #F00;
}
$flag: "status";
.navigation {
    @include updated-#{$flag};
}

可以在使用@extend時使用插值：

%updated-status {
    margin-top: 20px;
    background: #F00;
}
.selected-status {
    font-weight: bold;
}
$flag: "status";
.navigation {
    @extend %updated-#{$flag};
    @extend .selected-#{$flag};
}

sass 注釋

• /*注釋內容*/ :會在編譯出來的css文件中顯示
• //注釋內容 ：不會在編譯出來的css文件中顯示

//定義一個占位符
%mt5 {
    margin-top: 5px;
}
/*調用一個占位符*/
.box {
    @extend %mt5;
}

編譯為CSS：

.box {
    margin-top: 5px;
}
/*調用一個占位符*/

sass運算

sass 加法/減法

變量或屬性中都可以做加法/減法運算

.box {
  width: 20px + 8in;
  height:20px - 5px;
}

編譯為CSS：

.box {
  width: 788px;
  height:25px;
}

不用類型的單位做加法/減法會報錯：

.box {
  width: 20px + 1em;//不同類型單位不能做加法
}

sass 乘法

這樣子會有問題：

.box {
  width:10px * 2px;  
}

應該這樣子：

.box {
  width: 10px * 2;
}

編譯出來的css：

.box {
  width: 20px;
}

同加法減法一樣，不同類型單位做乘法也會報錯。

sass除法

如果除式中沒有變量或者不是在一個數學表達式中（有加法減法等），就要將除式運算用小括號括起來，否則“/”不會被當做除號運算。

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

編譯出來的css：

p {
    font: 10px/8px;//這種是無意義的css
    width: 500px;
    height: 250px;
    margin-left: 9px;
}

除法中相同單位相除不會報錯，會產生一個無單位的值：

.box {
    width: (1000px / 100px);
}

編譯出來的css：

.box {
    width: 10;
}

sass 變量計算

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

編譯出來的css：

.container {
  width: 960px;
}

sass數字運算

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

編譯出來的css：

.box {
  width: 60px;
}

sass顏色運算

所有算術運算都支持顏色值，並且是分段計算的。

p {
  color: #010203 + #040506;
}

計算公式為 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 並且被合成為：

p {
  color: #050709;
}

數字和顏色一起運算：

p {
    color: #010203 * 2;
}

計算公式為 01 2 = 02、02 2 = 04 和 03 * 2 = 06， 並且被合成為：

p {
    color: #020406;
}

sass 字符運算

用“+”對字符串進行連接：

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

編譯出來的css：

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

可以使用“+”直接連接字符：

div {
    cursor: e + -resize;
}

編譯出來的css：

div {
    cursor: e-resize;
}

有引號的字符串和沒有引號的字符串相加，看哪個在“+”號的左邊，如果有引號的在左邊，結果為有引號的；如果沒有引號的在左邊，結果為沒有引號的：

p:before {
    content: "Foo " + Bar;
    font-family: sans- + "serif";
}

編譯出來的css：

p:before {
    content: "Foo Bar";
    font-family: sans-serif; 
}