scss 常用語法

點擊查看 sass 官方文檔

---

1.編譯

初學可以在atom 中編譯

1. 安裝命令 gem install sass
2. atom中安裝atom-sass ,mac 中“control+option+c”,windows中“Alt + Ctrl + c” 監控修改的樣式文件；

在終端通過指令控制

1. sass --watch sass文件夾名：css文件夾名 --style 編譯后的格式
2. sass --watch 單個scss文件名稱：css文件名稱 --style 編譯后的格式
3. "1，2"中的文件夾或者文件名稱路徑不能出錯

通過終端輸出的4種格式選擇：

（1）nested

Sass 默認的輸出格式，能夠清晰反映 CSS 與 HTML 的結構關系。選擇器與屬性等單獨占用一行，縮進量與 Sass 文件中一致，每行的縮進量反映了其在嵌套規則內的層數。

 #main { color: #fff; background-color: #000; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; } 

（2）expanded

Expanded 輸出更像是手寫的樣式，選擇器、屬性等各占用一行，屬性根據選擇器縮進，而選擇器不做任何縮進。

#main { color: #fff; background-color: #000; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; } 

（3）compact

Compact 輸出方式比起上面兩種占用的空間更少，每條 CSS 規則只占一行，包含其下的所有屬性。嵌套過的選擇器在輸出時沒有空行，不嵌套的選擇器會輸出空白行作為分隔符。

#main { color: #fff; background-color: #000; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; } 

（4）compressed

Compressed 輸出方式刪除所有無意義的空格、空白行、以及注釋，力求將文件體積壓縮到最小，同時也會做出其他調整，比如會自動替換占用空間最小的顏色表達方式。

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline} 

2.變量

//編譯前 $color-white:#fff; p{ color: $color-white; } 

//編譯后 p { color: #fff; } /*# sourceMappingURL=scss-test.css.map */ 

3.嵌套

(1) 嵌套普通標簽

//編譯前 $color-white:#fff; div{ height: 100px; p{ color: $color-white; } } 

//編譯后 div { height: 100px; } div p { color: #fff; } 

（2）嵌套偽類:通過"&"實現

//編譯前
a {
  color: #fff;
  &:active{
    color: #000;
  }
}

//編譯后
a {
  color: #fff; }
  a:active {
    color: #000; }

/*# sourceMappingURL=scss-test.css.map */

(3)在父級嵌套中，使用“&”引用父級

//編譯前
.test {
  color: #fff;
  & {
    color:#666;
  }
  & &_ss{
    color: #999;
  }
}

//編譯后
.test {
  color: #fff; }
  .test {
    color: #666; }
  .test .test_ss {
    color: #999; }
/*# sourceMappingURL=scss-test.css.map */

(4)嵌套屬性

//編譯前
div{
  font:{size: 16px;
        weight:400;
        family:sans-serif;
  }
  border:2px solid #999{
    left:4px;
    right:4px;
  }
}

//編譯后
div {
  font-size: 16px;
  font-weight: 400;
  font-family: sans-serif;
  border: 2px solid #999;
    border-left: 4px;
    border-right: 4px; }

/*# sourceMappingURL=scss-test.css.map */

4.混合：@mixin 和 @include

1.基礎
@mixin 名稱 {
...
};

//編譯前 @mixin test{ width:100px; }; div{ @include test; } //編譯后 div { width: 100px; } /*# sourceMappingURL=scss-test.css.map */ 

2.可以傳參數
@mixin 名稱 （option1,option2...）{
...
};

@mixin test($width){
  width:100px;
};
div{
  @include test(100px);
}
//編譯后
div {
  width: 100px; }

/*# sourceMappingURL=scss-test.css.map */

3.設置參數默認值
@mixin 名稱 （option1:value1,option2:value2,option3,option4...）{
...
};

//編譯前 @mixin test($width,$height:10px){ width:100px; height:$height; }; div{ @include test(100px); } //編譯后 div { width: 100px; height: 10px; } /*# sourceMappingURL=scss-test.css.map */ 

5.函數(functions)

Sass 函數官網地址

（1）sass自帶函數(更多自帶方法請查看官網)

//編譯前 .div1{ width: max(10px,20px,40px); } .div2{ height: min(10px,20px,40px); } .div3{ height: ceil(10.1px); } .div4{ height: floor(10.1px); } 

//編譯后.div1 { width: 40px; } .div2 { height: 10px; } .div3 { height: 11px; } .div4 { height: 10px; } /*# sourceMappingURL=style.css.map */ 

(2)自定義函數

語法：
@function 函數名（參數1,參數2）{
...
}

//編譯前 @function addWidth($width1,$width2){ @return $width1+$width2; } div{ width:addWidth(100px,20px); } 

//編譯后 div { width: 120px; } /*# sourceMappingURL=scss-test.css.map */ 

(3)自定義函數取list顏色值

/*! * 配置樣式 */ $color_list:("red":"#ff5050","white":"#fff"); /** * 獲取顏色 */ @function get_color($key){ @return map-get($color_list,$key); }; //使用方法 div{ color: get_color(red); } 

//編譯后
div{
  color:#ff5050;
}

6.繼承擴展：@extend

@extend 會繼承指定元素的所有樣式，包括子元素的所有樣式

//編譯前
.test1{
  width: 100px;
}
.test1 p{
  color: #999;
}
.test2 {
  @extend .test1;
  height: 10px;
}

//編譯后
.test1, .test2 {
  width: 100px; }

//.test2也繼承了.test1 的子元素p的樣式
.test1 p, .test2 p {
  color: #999; }

.test2 {
  height: 10px; }

/*# sourceMappingURL=scss-test.css.map */

7.導入樣式：@import

將多個文件中的樣式導入到一個文件，減少http請求次數;
每個需要import的文件稱為partials，文件需要以下划線“_”開頭，如"_color.scss"，以“_”開頭的文件不會編譯生產對應的css文件；

//編譯前 //_color.scss 文件內容: .color-blue{ color: blue; }; //style.scss 文件內容： @import 'color'; 

//編譯后 //不生成對應的_color.css //style.css 文件 .color-blue { color: blue; } /*# sourceMappingURL=style.css.map */ 

8.注釋 ：Comment

(1)多行注釋

會出現在編譯后的css文件中

/* * 多行注釋 */ 

(2)單行注釋

不會出現在編譯后的css文件中

//單行注釋 

(3)多行強制注釋

會出現在編譯后的css文件中，即使文件壓縮也會保留

 /*！ * 多行強制注釋 */ 

9.SassScript 支持 6 種主要的數據類型：

數字，1, 2, 13, 10px //"number" 字符串，有引號字符串與無引號字符串，"foo", 'bar', baz//"string" 顏色，blue, #04a3f9, rgba(255,0,0,0.5)//"color" 布爾型，true, false//"bool" 空值，null//"null" 數組 (list)，用空格或逗號作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif//"list " maps, 相當於 JavaScript 的 object，(key1: value1, key2: value2) 

image.png

11.基礎運算

(1)加：+

//編譯前 .div1{ width: 10px+10px; } .div2{ width: 10px+10; } 

//編譯后 .div1 { width: 20px; } .div2 { width: 20px; } /*# sourceMappingURL=style.css.map */ 

(2)減：-

//編譯前 .div1{ width: 10px-5px; } .div2{ width: 10px-5; } 

//編譯后 .div1 { width: 5px; } .div2 { width: 5px; } /*# sourceMappingURL=style.css.map */ 

(3)乘：*

//編譯前 .div1{ //乘法計算的時候單位只能有一個，下面 10px*1px報錯 width: 10px*1px; } .div2{ width: 10px*2; } 

//編譯后 .div1{ //報錯 width: 10px*px; } .div2 { width: 20px; } /*# sourceMappingURL=style.css.map */ 

(4)除：/

//編譯前 .div1{ //不正確 width: 10px/2; } .div2{ //不正確 width: 10px/2px; } .div3{ //不正確 width: (10px/2px); } .div4{ //正確 width: (10px/2); } 

//編譯后 .div1 { width: 10px/2; } .div2 { width: 10px/2px; } .div3 { width: 5; } .div4 { width: 5px; } /*# sourceMappingURL=style.css.map */ 

12.插值語句

語法：
#{}

//編譯前 $height:10px; $name:height; /* * @author:#{$name} */ .div-#{$name}{ #{$name}: #{$height}; }; 

//編譯后 /* * @author:height */ .div-height { height: 10px; } /*# sourceMappingURL=style.css.map */ 

更多資源請到sass官網查看

文末福利：

福利一：前端，Java，產品經理，微信小程序，Python等資源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入門與實戰全套詳細視頻教程：https://www.jianshu.com/p/e8197d4d9880

領取方式：
如果需要學習視頻，歡迎關注 【編程微刊】微信公眾號，回復【領取資源】一鍵領取以下所有干貨資源，獲取更多有用技術干貨、文檔資料。所有文檔會持續更新，歡迎關注一起成長！

作者：喜歡坑隊友的程序員
鏈接：https://www.jianshu.com/p/a5fd66c8e9ac
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。