sass學習筆記
css擴充套件
巢狀規則
與less相同父選擇器套子選擇器
父選擇器 &
與less相同 用於選擇父元素
屬性巢狀
.funky
} //避免重複書寫
注釋/**/ ,//
/**/會被輸出 //不輸出
$version: "1.2.3";
/* this css is generated by my snazzy framework version #. */ 同過這種方法在注釋中加變數
變數$用法
$width: 5em;
#main
#sidebar
sassscript的6種資料型別
字串通過#可以將原來的字串去引號
陣列可以通過sass的方法對陣列進行操作
陣列分組
(1px 2px) (5px 6px)== ,!=可以對任何資料型別進行運算
數字運算 函式
呼叫
p$content: "first content";
$content: "second content?" !default;
$new_content: "first time reference" !default;
#main //設定變數預設值
@import
匯入檔案
以下情況不會匯入檔案
會匯入.sass,.scss的檔案
同時匯入多個檔案
@import "rounded-corners", "text-shadow";如果需要匯入scss,但是不需要編譯為css只需要在檔名前面新增下劃線 ,但是匯入的的時候不需要加下劃線
巢狀@import
.example
#main
//css編譯
#main .example `
@media
**查詢可以被巢狀在css中,編譯時放到放到最外層
.sidebar
}//編譯為css
.sidebar
@media screen and (orientation: landscape) }
用於繼承屬性
.error
.seriouserror
.hoverlink
.comment a.user:hover
//css編譯為
.comment a.user:hover, .comment .user.hoverlink
.error
.attention
.seriouserror
.error
.seriouserror
.criticalerror
//編譯成css
.error
.seriouserror
.criticalerror
#fake-links .link a }
//編譯成css
#fake-links .link
a }
不會被編譯到css中 用法和id，class選擇器相同
!optional
可以讓在未宣告 乙個選擇器的時候 編譯器不自動生成
@extend不能延伸@media以外的選擇器
輸出提示
@debug
@warn
@error
判斷語句
@if當 @if 的表示式返回值不是 false 或者 null 時，條件成立，輸出 {} 內的**：
p
@if 5 < 3
@if null
}
$type: monster;
p @else if $type == matador @else if $type == monster @else
}
sass實用知識點
說明 本文的內容是，我在開發實踐中總結的實用性比較強的sass知識點，其他未涉及的知識，如果對你有作用請自行查閱 sass知識目錄 巢狀注釋 sassscript 規則mixin指令 巢狀一般寫法 div 父選擇器引用 div span 相同字首的css樣式簡寫形式 div div 注釋多行注釋 會...
Sass教程九 Sass知識點之 繼承
extend 繼承 在設計網頁的時候常常遇到這種情況 乙個元素使用的樣式與另乙個元素完全相同，但又新增了額外的樣式。通常會在 html 中給元素定義兩個 class，乙個通用樣式，乙個特殊樣式。那麼通過 extend我們可以這樣寫 通用樣式 normal 特殊樣式 special 編譯過後 norm...
Latex各種細小知識點總結
第一種 公式不要求編號，多行公式注意要加 換行，是用來對齊 setlength 上面兩行是對公式進行上下間距調整 centering 是對公式進行居中調整 同理於 begin end begin minimize f x subject to quad h x 0 end 此處注意要用來進行包裹，以...