sass 常用備忘

2021-09-23 21:19:08 字數 1189 閱讀 3971

所有變數以$開頭

$font_size: 12px;


.container
如果變數巢狀在字串中，需要寫在#{}中

$side : left;


.rounded : 1px solid #000;


}
層級巢狀

.container}
屬性巢狀，注意，border後需要加上冒號:

.container }
可以通過&引用父元素，常用在各種偽類

.link}
簡單理解，是可以重用的**塊，通過@include 命令

// mixin


@mixin focus_style div
編譯後生成

div
還可指定引數、預設值

// 引數、預設值


@mixin the_height($h: 200px) .box_default .box_not_default
編譯後生成

.box_default .box_not_default
通過@extend，乙個選擇器可以繼承另乙個選擇器的樣式。例子如下

// 繼承


.class1.class2
編譯後生成

.class1, .class2 .class2
直接上例子

.container
編譯後生成

.container
用@import 來插入外部檔案

@import "outer.scss";
也可插入普通css檔案

@import "outer.css";
通過@function 來自定義函式

@function higher($h).container
編譯後輸出

.container
兩種風格的注釋

// 單行注釋，編譯後消失

/*


標準的css注釋，會保留到編譯後的**中 


*/
如果重要的注釋，壓縮編譯後還想保留，可在 /* 後面加上 !

/*


!重要注釋，壓縮編譯也不會消失


*/

sass 常用備忘

所有變數以 開頭 font size 12px container 如果變數巢狀在字串中，需要寫在 中 side left rounded 1px solid 000 層級巢狀 container 屬性巢狀，注意，border後需要加上冒號 container 可以通過 引用父元素，常用在各種偽類 ...

sass中常用的mixin

瀏覽器字首 例子 include css3 transition,0.5s mixin css3 property,value value retina mixin image 2x image,width,height 清除浮動 引用例子 include clearfix mixin clearf...

DIV常用備忘

怎樣不出現橫向滾動條而出現豎向滾動條 不讓層出現橫向滾動條 11111111111111111111111111111111111 11111111111111111111111111111111 111111111111111111111111111 不出現任何滾動條可單獨使用 overflow ...