sass學習筆記分享

1.安裝：

GFW攔了，Ruby可能裝不了

先清除原Ruby源，而後切換到淘寶源

gem sources --remove rubygems.org/

gem sources -a ruby.taobao.org/

gem install sass （有可能權限不夠，那就sudo）

國際慣例 -v查版本，看是否安裝成功。

2.兩種後綴

.scss和.sass

二者的區別在於

.sass是一開始用的語法後綴，縮進式，靠縮進區分代碼塊，相似Python（比較老）

.scss是v3.0後的新語法後綴，Sassy CSS，更貼合css的語法，靠{}區分代碼塊（更經常使用，優選）

exp：

sass：/ * 多行註釋    只要縮進就表明繼續    直到不縮進了，註釋結束
// 單行註釋也是這樣   只要縮進就是繼續
@import reset=des   color: #777 font-size: 12px.new-content +desul list-style: none li margin: 0scss:/* 跟css多行註釋同樣 先後都須要星號*標記 */
// 單行註釋也跟css同樣// 每行註釋都須要「//」
@iixin des {    mport 「reset」;@mcolor: #777; font-size: 12px;}.new-content { @include des;}ul { list-style: none; li { margin:0; }}複製代碼

3.編譯sass

sass 1.scss:1.css

4.自動編譯

sass —watch 1.scss:1.css

也能夠自動編譯整個目錄

sass —watch scss目錄:css目錄

5.編譯有四種格式

nested：嵌套（缺省值，編譯後的一樣按照嵌套縮進）

compact：緊湊（全部聲明變成單行模式）

expanded：擴展（變成易讀模式，美化後的規範格式，一個聲明一行）

compressed：壓縮（去掉沒必要要的空格和換行變成壓縮模式.min）

sass —watch scss:css —style 格式

exp：sass —watch scss:css —style compact

6.變量

$light-color: #fff;

$light-border: 1px solid $light-color;

-和_雖然能夠混合使用（$light-color == $light_color），但最好仍是統一

7.嵌套

.nav {

    margin: 0;

    padding: 0;

    ul {

        list-style: none;

            li {

                font-size: 16px;

                font-weight: bold;

                color: #777;

            }

       }

}

8.嵌套時調用父選擇器用&

.nav {

    margin: 0;

    li {

        list-style: none;

            a {

                font-size: 16px;

                &:hover {

                    color: #fff;

                }

            }

    }

    & &-item {

        border: 1px solid #ddd;

    }  

}

9.屬性嵌套

.des {

    font-size: 15px;

    font-weight: bold;

    font-family: "Microsoft YaHei";

    border: 1px solid #f60;

    border-left: none;

    border-right: 0;

}

.des {

    font: {

        size: 15px;

        weight: bold;

        family: "Microsoft YaHei」;

    }

    border: 1px solid #f60 {

        left: none;

        right: 0;

    }

}

10.@mixin（混合：定義好的可帶參數的樣式模塊）

@mixin content {

    font-size: 16px;

    .title {

        color: #777;

    }

    .des {

        font-size: 12px;

    }

}

.news-content {

    @include content;

    color: #f60;

}

@mixin content($des-size:16px, $title-color:#666) {

    font-size: 16px;

    .title {

        color: $title-color;

    }

    .des {

        font-size: $des-size;

    }

}

.news-content {

    @include content();

    color: #f60;

}

.news-content {

    @include content(14px, #ddd);

    color: #f60;

}

.news-content {

    @include content($title-color:#777,$des-size:12px );

    color: #f60;

}

11.@extend （繼承 or 擴展）

.des {

    font-size: 14px;

}

.des a {

    color: blue;

}

.content {

    @extend .des;

    color: #ddd;  

    .title {

        font-size: 20px;

    }

}

12.@import Partials

_reset.scss （partials的文件名要以_下劃線開頭，這樣會認爲該文件爲partials，就不會單獨的去編譯它）

body {

    margin: 0;

    padding: 0;

}

1.scss

@import "reset"

……

13.註釋

/*

* 多行註釋

* 與css的同樣

* 會在編譯輸出的css裏出現

* 但不會出如今壓縮模式下編譯輸出的css裏

*/

// 單行註釋與css的也同樣，不會出如今編譯輸出的css裏

/*!

* 強制註釋

* 就是多行註釋內容第一個字符以 ! 開頭

* 會一直在編譯輸出的css裏出現

*/

14.數據類型

函數：type-of()

有數字類型、字符串類型、列表類型、顏色類型

15.數字類型

可進行數學運算

但注意：1.乘法若是每一個乘數都有單位，那結果將帶有多個單位，因此請保證只有一個乘數有單位。

2.除法符號 / 由於在css中衝突，因此用 ( ) 將除法運算包起來

3.除法若是被除數和除數帶有相同的單位，則結果的單位會被抵消。

16.數字函數

abs() 絕對值（有單位帶單位，無單位就是純數字）

round() 四捨五入

ceil() 進位取整 ceil(5.1) // return 6

floor() 退位取整 floor(6.9) // return 6

percentage() 變成百分數 percentage(65px / 100px) // return 65%（請把單位抵消，或者都不帶單位，不然報錯）

min(1,2,3,5) // return 1

max(2,10,5,6) // return 10

17.字符串

"字符串類型"

""+abc = "abc"

123 + "abc" = "123abc"

mao-123 = "mao-123"

123/mao = "123/mao"

mao*123（報錯，字符串相乘是沒有意義的）

18.字符串函數

$str : "Hello"

to-upper-case($str) // 所有大寫

to-lower-case($str) // 所有小寫

str-length($str) // 返回字符串長度

str-index($str, "H") // 返回指定字符串的索引，從1開始計算

str-insert($str, "要插入的字符串內容", 要插入的起始位置索引，從1開始算)

19.顏色

16進制：#ff0000，#f00

rgb(255, 0, 0)

hsl(0, 100%, 50%) //色相、飽和度、明度

20.rgb & rgba

red green blue

red green blue alpha（不透明度 0 - 1，0徹底透明，1徹底不透明）

21.hsl & hsla

hue 色相 0 - 360°

s 飽和度 0 - 100

l 明度 0 - 100%

alpha（不透明度 0 - 1，0徹底透明，1徹底不透明）

22.顏色函數 adjust-hue()

調整色相

$hex-color: #f00

$hsl-color: hsl(0, 100, 50%)

background-color: adjust-hue($hex-color, 120deg) // deg角度，可加可不加

background-color: adjust-hue($hsl-color, -120deg) // 能夠是負數角度

23.顏色函數 lighten() 和 darken()（更亮和更暗）

$color: #def

lighten($color, 30%) // 提升30%明度

darken($color, 20%) // 下降20%明度

24.顏色函數 saturate() 和 desaturated()

$color: #cde

saturate($color, 50%) // 增長50%飽和度

desaturated($color, 20%) // 減小20%飽和度

25.顏色函數 opacify() 和 transparentize()

$color: hsla(120, 100%, 50%, .5);

opacify($color, .3) // 增長0.3不透明度 更不透明

transparentize($color, .2) // 減小0.2不透明度 更透明

26.List類型 列表類型

1px solid #ddd

0 auto

5px 3px 6px 5px

27.列表函數

$list:5px 10px 4px 8px;

$list2: 111px 222px;

length() // return 列表項數 length($list) return 4

nth() // return 列表指定項 nth($list, 3) return 4px

index() // return 指定列表項的索引 index($list, 4px) return 3

append() // return 追加列表項 append($list, 6px, auto) return 5px 10px 4px 8px 6px

第三個參數可選comma space auto

join() // return列表合併 join($list, $list2, comma) return 5px,10px,4px,8px,111px,222px

第三個參數可選comma space auto

28.Map類型 鍵值對

$map:(key1: val1, key2: val2);

$map2:(key3: val3, key4: val4);

$map3:(key1: val1, key2: val2, key3: val3, key4: val4)

29.Map函數

length() // return Map的鍵值對數量 length($map) return 2

map-get($map, key2) // return Map中指定鍵的值 return val2

map-keys($map) // return Map中的全部鍵 return (「key1", 「key2")

map-values($map) // return Map中的全部值 return (val1, val2)

map-has-key($map, key1) // return Map中是否存在指定鍵 return true

map-merge($map, $map2) // return Map合併 return (key1: val1, key2: val2, key3: val3, key4: val4)

map-remove($map, key2, key1) // return 去掉了指定項的Map return (key3: val3, key4: val4)

29.boolean 布爾值

5px > 10px // return false;

8px > 2px // return true;

>, <, <=, >=, ==

and, or, not

(5px > 3px) and (3px < 6px) // return true

(5px < 3px) or (3px < 6px) // return true

not (3px < 6px) // return false

30.Interpolation

變量模板用法 #{變量}

$ver: "1.0.0";

/* 項目當前版本是 #{$ver} */

31.@if 判斷

@if 條件 {

    ……

}@else if 條件2 {

    ……

}@else {

    …… 

}

32.@for 循環

@for $var from <開始值> through/to <結束值> {

} // through 包含結束值，to不包含結束值

$j: 5;

@for $i from 1 through $j {

    .col-#{$i} {

        width: 100% / $j * $i;

    }

} // 到5結束

@for $i from 1 to $j {

    .col-#{$i} {

        width: 100% / $j * $i;

    }

} // 到4結束

33.@each 遍歷

@each $var in $list {

     ……

}

$status: success error warning;

@each $i in $status {

    .icon-#{$i} {

        background-image: url(../images/status/#{$i}.png);

    }

}

34.@while

@while 條件 {

    ……

}

$i: 10;

@while $i > 0 {

    .menu-item#{$i} {

        width: 2px * $i;

    }

    $i: $i - 2;

}

35.@function 函數

@function 名字 (參數1, 參數2) {

……

}

$fontsize: (big: 24px, small: 12px);

@function size($map, $key) {

    @return map-get($map, $key);

}

size($fontsize, big);

36.警告信息 error warning

@function size($map, $key) {

    @if map-has-key($map, $key) {

        @return map-get($map, $key);

    } @else {

        @warn "在 $map 中沒有找到 #{$key} 這個key";

    }

}

@function size($map, $key) {

    @if map-has-key($map, $key) {

        @return map-get($map, $key);

    } @else {

        @error "在 $map 中沒有找到 #{$key} 這個key";

    }

}