資訊專欄INFORMATION COLUMN
摘要：基本規(guī)則變量用定義偽類用定義樣式可嵌套定義如嵌套規(guī)則適用群組選擇器選擇器的嵌套其實就是拼接空格的使用原生的只有執(zhí)行到才會加載速度較慢而的在生成文件時就導入相當于合并文件局部文件約定用下劃線定義如局部文件不會多帶帶編譯只會存在于引用的文件
基本規(guī)則:
變量用$定義
偽類用&定義
樣式可嵌套定義,如
#example{
a {
body.ie & hover { color: red }
color: white;
}
div {background:black;}
}
body.ie & hover { color: red } <=> body.ie #example a:hover { color: red }
嵌套規(guī)則適用群組選擇器,> + ~選擇器(sass的嵌套其實就是拼接空格)
border: {
style: left: right:
}
<=>
border-style: border-left: border-right:@import的使用:
原生的只有執(zhí)行到才會加載,速度較慢;而sass的@import在生成文件時就導入,相當于合并css文件
局部文件,約定用下劃線定義,如(_example.scss),局部scss文件不會多帶帶編譯,只會存在于引用的文件中.
局部文件中的變量添加!default( 如 $val = red !default; ),代表默認值,未定義時生效,全局變量添加!global.
嵌套中可調(diào)用局部文件,只在當前嵌套中有效
使用原生@import的情況:
文件后綴為.css；
文件名為URL地址（如http://www.sass.hk/css/css.css；
文件名為CSS的url()值
編譯后不會顯示,格式: // 注釋
混合器通過@mixin mixin($a:red,$b)定義,@include 調(diào)用,:后面為默認值
使用時機: 能否為這個混合器想出一個好的簡短的名字
繼承@extend定義,繼承與父樣式有關(guān)的一切樣式(如: .child @extend .father)
可以使用選擇器,只對選擇器命中的樣式生效(后面部分),也對子類生效(前面部分).
繼承相當于 .father .child,因此會出現(xiàn)復雜的選擇器.
為了避免生成大量選擇器,不要在css規(guī)則中使用后代選擇器
.foo .bar { @extend .baz; }
.bip .baz { a: b; }
這個例子有三個情況 foo->bip->bar 、(foo,bip)->foo->bar、bip-> bar,如果其中一條規(guī)則的后代選擇器更復雜則代碼量呈指數(shù)增長.
理解scss本質(zhì)上是字符串的格式編譯，比如變量，因為是從上到下格式化成css，所以變量只能寫在最前面，編譯器讀取變量值然后替換引用的部分；又比如偽類、嵌套樣式，&則不添加空格直接拼接，：則添加一個-字符。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113974.html
摘要：現(xiàn)在將學習筆記整理在這里，供大家參考。的安裝的編輯器安裝方法有很多，大致能分為兩種應用程序和命令行界面。如果已經(jīng)安裝過，也可以使用指令如果提示權(quán)限不足，在命令行前加上即可。參考網(wǎng)頁編輯器的使用的使用很簡單，記住兩條指令即可。 最近因為工作需要，自學了Sass?，F(xiàn)在將學習筆記整理在這里，供大家參考。 1. Sass的安裝 Sass的編輯器安裝方法有很多，大致能分為兩種：應用程序（appl...
摘要：前言很久沒有用文章記錄自己的學習歷程了，主要是因為實在寫的不行，相比大牛寫的博客，我這只能算是東拼西湊或者說是讀書筆記。以前我只使用外部，現(xiàn)在的更加好用，所以在學習過程中記了一些筆記。在后面加一個感嘆號，表示這是重要注釋。 前言 很久沒有用文章記錄自己的學習歷程了，主要是因為實在寫的不行，相比大牛寫的博客，我這只能算是東拼西湊或者說是讀書筆記。但是今天還是拾起筆來了，雖然沒什么干貨，但...
閱讀 1272·2021-11-19 09:40
閱讀 3133·2021-11-02 14:47
閱讀 3112·2021-10-11 10:58
閱讀 3227·2019-08-30 15:54
閱讀 2681·2019-08-30 12:50
閱讀 1733·2019-08-29 16:54
閱讀 475·2019-08-29 15:38
閱讀 1247·2019-08-29 15:19
