sass實用知識點

說明：本文的內容是，我在開發實踐中總結的實用性比較強的sass知識點，其他未涉及的知識，如果對你有作用請自行查閱

巢狀注釋

sassscript

@規則mixin指令

巢狀

一般寫法

div 
}&父選擇器引用
div&-span 
}相同字首的css樣式簡寫形式 
div}
div}

注釋

多行注釋 /* */ 會被編譯成css中的注釋

單行注釋 // 在編譯後的css中去除

sassscript

宣告變數 

區域性變數 $width: 2px;
全域性變數 $width: 50px !global;
資料型別
number -> 1 11.1 11px
string -> "title"
應用$name: "p";
div # 
color -> red
boolean -> true
null -> null
list -> 11px 10px 12px 或者 11px, 10px, 12px
map -> (key: value, key1: value1)
function
運算子 + - * / % < > <= >=
其中 / 運算只在以下三種情況中生效
$width/2 和變數運算
(10px/8px) 加上小括號
5px + 8px/2px 作為其他運算表示式的一部分

@規則

@import 匯入其他的css,scss檔案

@import "demo"; 等效於 @import "demo.scss";
scss檔案缺省會編譯成css檔案，如果你的scss檔案只想被其他檔案import，可以在定義的檔名前面加上_
如 _demo.scss 然後使用 @import "demo" 即可
巢狀的@import
假設_demo.scss檔案中定義了如下的css
div在main.css中匯入
.box 
將編譯成 
.box div
@media 巢狀
編譯後@media包裹在選擇器的最上面，在做響應式時候，這種寫法可以避免重複書寫選擇器
div 
}@extend 選擇器替換繼承
基本使用
divdiv.box 
#id相當於將包含div的選擇器的樣式複製乙份，然後把div替換成#id，編譯後結果如下
div, #id 
div.box, .box#id 
佔位符div ye%box
#id編譯後結果
div ye#id

mixin指令

相當於定義函式

@mixin size($w, $h) 
div

sass各種知識點

sass學習筆記 css擴充套件 巢狀規則 與less相同父選擇器套子選擇器 父選擇器 與less相同 用於選擇父元素 屬性巢狀 funky 避免重複書寫佔位符選擇器 foo 注釋 會被輸出 不輸出 version 1.2.3 this css is generated by my snazzy f...

Sass教程九 Sass知識點之 繼承

extend 繼承 在設計網頁的時候常常遇到這種情況 乙個元素使用的樣式與另乙個元素完全相同，但又新增了額外的樣式。通常會在 html 中給元素定義兩個 class，乙個通用樣式，乙個特殊樣式。那麼通過 extend我們可以這樣寫 通用樣式 normal 特殊樣式 special 編譯過後 norm...

CSS HTML實用知識點

所有產生了浮動流的元素，塊級元素看不到他們 產生了bfc的元素和文字類屬性 inline 的元素以及文字都能看到浮動元素 block fomatting context block level box formatting contex box 即盒子模型 formatting context 是w...