CSS的預(yù)處理

CSS預(yù)處理器用一種專門的編程語言，進(jìn)行Web頁面樣式設(shè)計(jì)，然后再編譯成正常的CSS文件，以供項(xiàng)目使用。為CSS增加一些編程的特性，無需考慮瀏覽器的兼容性問題，例如你可以在CSS中使用變量、簡單的邏輯程序、函數(shù)等等在編程語言中的一些基本特性，可以讓你的CSS更加簡潔、適應(yīng)性更強(qiáng)、可讀性更佳，更易于代碼的維護(hù)等諸多好處。

• Sass是世界上最成熟、最穩(wěn)定、最強(qiáng)大的專業(yè)級(jí)CSS擴(kuò)展語言！
• Sass (Syntactically Awesome StyleSheets)
• Sass可以讓你的CSS更加簡潔、適應(yīng)性更強(qiáng)、可讀性更佳，更易于代碼的維護(hù)

基本語法

• 變量聲明
• 默認(rèn)變量
• 全局變量與局部變量（使用 $ 定義變量，： 后面是變量值）

//最外層定義的是全局變量
$color:orange;
$color:blue !default;  //默認(rèn)變量
.block {
        color:$color;  //調(diào)用全局變量
}
em {
      $color:red;   //定義局部變量
      a  {
           color:$color;   //調(diào)用局部變量
      }
}

• 數(shù)字 number：
  如，1、 .2、 13%、 10px
• 字符串 string：
  有引號(hào)字符串或無引號(hào)字符串，如，"foo"、 'bar'、 baz
• 顏色 color：
  如，blue、 #04a3f9、rgb(255,0,0)、 rgba(255,0,0,0.5)
• 布爾型 bool：
  如，true、 false
• 空值 null：
  如，null
• 值列表 list：
  用空格或者逗號(hào)分開，如，1.5em 1em、 Helvetica, Arial

注釋

//，不會(huì)輸出到結(jié)果
/.../，輸出到未壓縮的結(jié)果
/!.../,輸出到任意結(jié)果

嵌套 (Nesting)

• 選擇器嵌套
• 屬性嵌套
• 偽類嵌套
• 引用父級(jí)選擇器 &
• 直接子元素嵌套 >

.wrap {
      border:  {   //屬性嵌套
          top:1px solid red;
          bottom: 1px solid green;     
      };
      a {   //選擇器嵌套
             //偽類嵌套
             &：hover {   //&表示父組選擇器
                    background-color: #f00;
              }
      }  
      >.box {     //直接子元素嵌套
          color:#286090;
      }  
}

繼承(Inheritance)與擴(kuò)展(Extend)

• btn-primary繼承自.btn類，使用@extend來繼承已存在的類樣式塊

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

占位符(placeholder)

• 定義占位符：%占位符名（只有通過@extend調(diào)用占位符時(shí)才會(huì)產(chǎn)生代碼）

%mt5 {
        margin-top:5px;
}
%pt5 {
         padding-top:5px;
}
.btn {
          @extend  %mt5;
          @extend  %pt5;
}

混合宏(Mixin)

• 聲明混合宏 @mixin 混合宏名([參數(shù)])
• 調(diào)用混合宏 @include 混合宏名([參數(shù)])

//定義一個(gè)帶參數(shù)的混合宏
@mixin border-radius($radius:5px){
    -webkit-border-radius:$radius;
    border-radius:$radius;
}
button {
    @include border-radius;
}

混合宏、繼承、占位符區(qū)別

1.png

插值(Interpolation)

• 語法：#{$變量名}，生成css時(shí)，插值會(huì)被變量值代替

2.png

• 不可在@include 混合宏時(shí)使用插值

3.png

• 可在@extend時(shí)使用插值

4.png

導(dǎo)入(Import)

• 這些情況與css中的@import一樣

5.png

操作符(Operators)

加法 +
減法 -
乘法 *
除法 /
取余 %

內(nèi)置函數(shù)

• Introspection函數(shù)

type-of($value)：返回一個(gè)值的類型
unit($number)：返回一個(gè)值的單位
unitless($number)：判斷一個(gè)值是否不帶單位
comparable($number-1, $number-2)：判斷兩個(gè)值是否可以做加、減和合并

• Miscellaneous函數(shù)(三元函數(shù))

if($condition,$if-true,$if-false)

數(shù)字函數(shù)

• percentage($value)：將一個(gè)不帶單位的數(shù)轉(zhuǎn)換成百分比值；
• round($value)：將數(shù)值四舍五入，轉(zhuǎn)換成一個(gè)最接近的整數(shù)；
• ceil($value)：將大于自己的小數(shù)轉(zhuǎn)換成下一位整數(shù)；
• floor($value)：將一個(gè)數(shù)去除他的小數(shù)部分；
• abs($value)：返回一個(gè)數(shù)的絕對值；
• min($numbers…)：找出幾個(gè)數(shù)值之間的最小值；
• max($numbers…)：找出幾個(gè)數(shù)值之間的最大值；
• random(): 獲取隨機(jī)數(shù)

列表函數(shù)

• length($list)：返回一個(gè)列表的長度值；
• nth($list, $n)：返回一個(gè)列表中指定的某個(gè)標(biāo)簽值
• join($list1, $list2, [$separator])：將兩個(gè)列給連接在一起，變成一個(gè)列表；
• append($list1, $val, [$separator])：將某個(gè)值放在列表的最后；
• zip($lists…)：將幾個(gè)列表結(jié)合成一個(gè)多維的列表；
• index($list, $value)：返回一個(gè)值在列表中的位置值。

常用指令

@media
@if
@at-root

媒體查詢(Mediaqueries)

6.png

顏色函數(shù)-RGB顏色函數(shù)

• rgb($red,$green,$blue)：根據(jù)紅、綠、藍(lán)三個(gè)值創(chuàng)建一個(gè)顏色；
• rgba($red,$green,$blue,$alpha)：根據(jù)紅、綠、藍(lán)和透明度值創(chuàng)建一個(gè)顏色；
• red($color)：從一個(gè)顏色中獲取其中紅色值；
• green($color)：從一個(gè)顏色中獲取其中綠色值；
• blue($color)：從一個(gè)顏色中獲取其中藍(lán)色值；
• mix($color-1,$color-2,[$weight])：把兩種顏色混合在一起。

顏色函數(shù)-HSL顏色函數(shù)

• hsl($hue,$saturation,$lightness)：通過色相（hue）、飽和度(saturation)和亮度（lightness）的值創(chuàng)建一個(gè)顏色；
• hsla($hue,$saturation,$lightness,$alpha)：通過色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創(chuàng)建一個(gè)顏色；
• hue($color)：從一個(gè)顏色中獲取色相（hue）值；
• saturation($color)：從一個(gè)顏色中獲取飽和度（saturation）值；
• lightness($color)：從一個(gè)顏色中獲取亮度（lightness）值；

Maps的函數(shù)

• map-get($map,$key)：根據(jù)給定的 key 值，返回 map 中相關(guān)的值。
• map-merge($map1,$map2)：將兩個(gè) map 合并成一個(gè)新的 map。
• map-remove($map,$key)：從 map 中刪除一個(gè) key，返回一個(gè)新 map。
• map-keys($map)：返回 map 中所有的 key。
• map-values($map)：返回 map 中所有的 value。
• map-has-key($map,$key)：根據(jù)給定的 key 值判斷 map 是否有對應(yīng)的 value 值，如果有返回 true，否則返回 false。
• keywords($args)：返回一個(gè)函數(shù)的參數(shù)，這個(gè)參數(shù)可以動(dòng)態(tài)的設(shè)置 key 和 value。

指令(Directives)

@for
@each
@while
@function
@debug
@warn
@error