css預處理器scss

• CSS預處理和SASS語法
  
  • 爲什麼用SASS？
  • SASS語法
    
    • 1.變量
    • 2.嵌套
    • 3.計算功能
    • 4.代碼重用
      
      • 繼承
      • mixin
    • 5.高級用法
      
      • 條件語句
      • 循環語句
      • 自定義函數
  • CSS預處理

爲什麼用SASS？

剛接觸公司的項目，我真的很費解，爲什麼項目裏要用類似SASS,LESS這樣的東西，不是有css嗎，導入css文件不就可以了嗎？這個是用來幹嘛的啊？要知道爲什麼，先來看看SASS到底是什麼，怎麼用的。

SASS語法

我們先來看一個SASS文件的例子：

$class-prefix: "tabs";

ul {
  margin: 0;
  padding: 0;
}

.#{$class-prefix} {
  &-bar {
    margin-bottom: 16px;
  }

  &-nav {
    font-size: 14px;

    &:after,
    &:before {
      display: table;
      content: " ";
    }

    &:after {
      clear: both;
    }
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26

WTF?這都是什麼?

1.變量

先看第一行：

    $class-prefix: "tabs";
    ...
    .#{$class-prefix} {}

• 1
• 2
• 3

SASS中可以使用變量，但是我們要告訴程序這是變量，所以用$開頭，所以這裏class-prefix是變量，它的值是”tabs”，怎麼使用？如果變量需要鑲嵌在字符串之中，就必須需要寫在#{}之中。

2.嵌套

繼續往下看：

.#{$class-prefix} {
  &-bar {
    margin-bottom: 16px;
  }

  &-nav {
    font-size: 14px;

    &:after,
    &:before {
      display: table;
      content: " ";
    }

    &:after {
      clear: both;
    }
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

&是什麼？首先我們得看到這個結構，他是嵌套的，通過一層層的縮進，表示父元素下的子元素，而&就是引用父元素,屬性也可以嵌套，比如border-color屬性，可以寫成(注意，border後面必須加上冒號)：

p {
    border: {
    color: red; 
    }
}

• 1
• 2
• 3
• 4
• 5

上面的這幾個語法是幾乎所有的SASS文件都會遇到，而下面可能不是一定會用到，卻也是代表SASS語法的特性，所以也要普及一下。
下面的這些用法都是摘自阮一峯的博客

3.計算功能

我們可以在SASS中使用計算功能：

body {
　　　margin: (14px/2);
　　　top: 50px + 100px;
　　　right: $var * 10%;
}

• 1
• 2
• 3
• 4
• 5

4.代碼重用

繼承

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

.class1 {
　　border: 1px solid #ddd;
}

• 1
• 2
• 3

class2要繼承class1，就要使用@extend命令：

.class2 {
　　@extend .class1;
　　font-size:120%;
}

• 1
• 2
• 3
• 4

mixin

Mixin有點像C語言的宏（macro），是可以重用的代碼塊。
使用@mixin命令，定義一個代碼塊。

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

• 1
• 2
• 3
• 4

使用@include命令，調用這個mixin。

　　div {
　　　　@include left;
　　}

• 1
• 2
• 3

mixin的強大之處，在於可以指定參數和缺省值。

　　@mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
　　}

• 1
• 2
• 3
• 4

使用的時候，根據需要加入參數：

　　div {
　　　　@include left(20px);
　　}

• 1
• 2
• 3

下面是一個mixin的實例，用來生成瀏覽器前綴。

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

• 1
• 2
• 3
• 4
• 5

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

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

• 1
• 2

5.高級用法

條件語句

@if可以用來判斷：

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

• 1
• 2
• 3
• 4

配套的還有@else命令

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

• 1
• 2
• 3
• 4
• 5

循環語句

SASS支持for循環：

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

• 1
• 2
• 3
• 4
• 5

也支持while循環：

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

• 1
• 2
• 3
• 4
• 5

each命令，作用與for類似：

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

• 1
• 2
• 3
• 4
• 5

自定義函數

SASS允許用戶編寫自己的函數。

　　@function double($n) {
　　　　@return $n * 2;
　　}
　　#sidebar {
　　　　width: double(5px);
　　}

• 1
• 2
• 3
• 4
• 5
• 6

CSS預處理

所以,SASS究竟做到了什麼？單從上面的語法來看，SASS不再是像css那樣是“不可控制”的裝飾語句：
變量，函數，mixin，繼承這些都可以讓我們少寫很多代碼，嵌套使機構更加的清晰，計算，高級語法是我們能更方便地控制樣式。當然最終目的還是將SASS編譯生成css。網上有這樣一段話我覺得說的很通俗：
CSS 預處理器是什麼？一般來說，它們基於 CSS 擴展了一套屬於自己的 DSL，來解決我們書寫 CSS 時難以解決的問題：
- 語法不夠強大，比如無法嵌套書寫導致模塊化開發中需要書寫很多重複的選擇器；
- 沒有變量和合理的樣式複用機制，使得邏輯上相關的屬性值必須以字面量的形式重複輸出，導致難以維護。

所以這就決定了 CSS 預處理器的主要目標：提供 CSS 缺失的樣式層複用機制、減少冗餘代碼，提高樣式代碼的可維護性。這不是錦上添花，而恰恰是雪中送炭
一個React項目除了CSS預處理，也會使用CSS Module，剛開始聽到這兩個詞，我根本分不清，所以除了弄懂CSS預處理，CSS Modules也要清楚，這個在其他文章中學習。

本文部分內容摘自阮一峯博客
SASS用法指南