## CSS CSS, Cascading Style Sheets,層疊樣式表，是HTML文件中用來顯示樣式的一種標識語言。可以用來設置字體、顏色、邊框距離等。 Sass(Syntactically Awesome Style Sheets) 語法很棒的樣式表。 2010 SCSS ， Sass CSS。 CSS缺點： 大型項目選擇器，層疊復雜度高。 Sass接近編程語言，提供變量、嵌套、混合、繼承等特性。 https://sass-lang.com/guide Sass基于Ruby開發。 ## VS 插件 Live Sass Compiler 安裝之后，點擊最下方的 "Watch Sass", 會實時編譯打開目錄的scss 文件。 自動產生一個 .css.map 后綴的文件， 里面內容是源文件和編譯后的css文件的對應。 注意： 打開到指定目錄， 會掃描打開目錄的所有文件。 ## 變量 Variables ## 嵌套 Nesting 不宜過度 ## 模塊（Modules） ``` //模塊 @import 'base'; html{ background-color: $hcolor; } //嵌套 html { body { background-color: $hcolor; } } ``` ## 混合 Mixin Mixin翻譯過來是混合， 所以這個功能也稱為混合宏，其實就是相當于函數。 * 使用@mixin 定義 * 使用@include調用 在瀏覽器兼容的時候非常有用。 ``` @mixin div-size($width:50px,$height:50px) { width:$width; height:$height; } #div1 { @include div-size; } #div2 { @include div-size(100px,100px); } ``` ## 繼承 ## 操作符 ## CSS擴展 引用父級選擇器 "`&`" ## 嵌套屬性 ``` //引用父級選擇器 a{ font-weight: bold; &:hover{text-decoration: underline;} } #mydiv{ a{ font-weight: bold; &:hover{text-decoration: underline;} } } #mydiv2{ &-sidebar{ border:1px; } } //命名空間 .myclass{ //命名空間后有冒號 font: { size:30em; } } ```