Sass是一門CSS編譯語(yǔ)言，為CSS賦予了可編程的能力初家，允許我們使用變量寝受、函數(shù)坷牛、mixin等手段來(lái)進(jìn)行模塊化的CSS開發(fā)，減少了大量冗余的代碼工作量很澄。
1. 語(yǔ)法
Sass支持兩種語(yǔ)法
1.1 scss
SCSS語(yǔ)法使用.scss后綴京闰，SCSS基本上是CSS的超集，也就是絕大多數(shù)的CSS語(yǔ)法都可以直接使用甩苛。因?yàn)榕cCSS語(yǔ)法相似蹂楣，這是學(xué)習(xí)SASS最簡(jiǎn)單也最流行的一種語(yǔ)法。
@mixin button-base() {
@include typography(button);
@include ripple-surface;
@include ripple-radius-bounded;
display: inline-flex;
position: relative;
height: $button-height;
border: none;
vertical-align: middle;
&:hover { cursor: pointer; }
&:disabled {
color: $mdc-button-disabled-ink-color;
cursor: default;
pointer-events: none;
}
}
1.2 sass 縮進(jìn)語(yǔ)法
縮進(jìn)語(yǔ)法是sass的原生語(yǔ)法讯蒲，因此使用.sass作為文件后綴痊土。這種語(yǔ)法用縮進(jìn)表示花括號(hào)，空號(hào)表示花括號(hào)的結(jié)束墨林。
@mixin button-base()
@include typography(button)
@include ripple-surface
@include ripple-radius-bounded
display: inline-flex
position: relative
height: $button-height
border: none
vertical-align: middle
&:hover
cursor: pointer
&:disabled
color: $mdc-button-disabled-ink-color
cursor: default
pointer-events: none
2. 文檔構(gòu)成
像大多數(shù)CSS文件一樣赁酝，Sass文件主要由樣式規(guī)則及規(guī)則的屬性構(gòu)成反浓，除此之外還包括一些獨(dú)有的特性。
作者主要用scss語(yǔ)法赞哗，因此本文后續(xù)介紹中只考慮scss語(yǔ)法雷则，使用sass語(yǔ)法的請(qǐng)自行轉(zhuǎn)換。
2.1 樣式規(guī)則
.item {
color: green;
}
2.2 變量聲明
$bg-color: #fff;
2.3 @if語(yǔ)句
@if語(yǔ)法
@if expression {
//CSS codes here
}
具體事例
p {
@if $bg-color { border:1px solid; }
@if $box-width > 100 { border: none; }
}
還可以接著很多@else
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
2.4 @each語(yǔ)句
語(yǔ)法
@each $var in <list or map>
具體示例
@each $color in red, green, yellow, blue {
.p_#{$color} {
background-color: #{$color}
}
}
列表和映射還可以是二維的肪笋，如下所示
@each $color, $border in (aqua, dotted),
(red, solid),
(green, double){
.#{$color} {
background-color : $color;
border: $border;
}
}
也可以使用映射的方式
@each $header, $color in (h1: red, h2: green, h3: blue) {
#{$header} {
color: $color;
}
}
2.5 @error@warn@debug
和傳統(tǒng)的編程語(yǔ)言一樣月劈，在編寫sass中的mixin,function過(guò)程中，如果有變量沒有按照期望的格式傳遞藤乙，我們還可以增加錯(cuò)誤處理邏輯猜揪。
@mixin reflexive-position($property, $value) {
@if $property != left and $property != right {
@error "Property #{$property} must be either left or right.";
}
$left-value: if($property == right, initial, $value);
$right-value: if($property == right, $value, initial);
left: $left-value;
right: $right-value;
[dir=rtl] & {
left: $right-value;
right: $left-value;
}
}
.sidebar {
@include reflexive-position(top, 12px);
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// Error: Property top must be either left or right.
}
和@error類似的作用，但是@warn并不會(huì)停止sass的編譯坛梁。
$known-prefixes: webkit, moz, ms, o;
@mixin prefix($property, $value, $prefixes) {
@each $prefix in $prefixes {
@if not index($known-prefixes, $prefix) {
@warn "Unknown prefix #{$prefix}.";
}
-#{$prefix}-#{$property}: $value;
}
#{$property}: $value;
}
.tilt {
// Oops, we typo'd "webkit" as "wekbit"!
@include prefix(transform, rotate(15deg), wekbit ms);
}
@debug我想就不用再細(xì)說(shuō)了而姐，這個(gè)語(yǔ)句是為了方便我們調(diào)試，將一些變量打印出來(lái)供分析運(yùn)行態(tài)的划咐。
2.6 CSS語(yǔ)句
包括以下幾種：
- CSS樣式規(guī)則
h1 { font-size:xxxx; } -
@media,@font-face等CSS內(nèi)置的@規(guī)則 -
@include引用的mixin -
@at-root指令拴念，更詳細(xì)的可以參考這里，表示選擇器嵌套的最外層褐缠，對(duì)于編譯結(jié)果來(lái)說(shuō)將使嵌套失效政鼠，直接移除父選擇器。队魏。
2.7 一些頂級(jí)的聲明
-
@use通過(guò)命令加載modules公般，包括sass自帶的一些modules，這里面也有作用域的概念胡桨，更詳細(xì)的內(nèi)容還是參考官方文檔 -
@import應(yīng)用外部文件 -
@mixin定義mixin -
@function定義function
3. Expressions
類似于其他語(yǔ)言中的變量類型或操作符的定義官帘。
SASS中包括以下變量類型
- 數(shù)字 Numbers，可以是純數(shù)字也可以包括單位昧谊，如
12px - 字符串 Strings 可以用雙引號(hào)也可以不用雙引號(hào)刽虹，例如
"Helfetica Nenu"或者bold - 顏色 Colors 可以用預(yù)定義的縮寫或者十六進(jìn)制的寫法，例如
#c6538c或green - 布爾值 boolean 揽浙，包括
true和false - null
- 值列表状婶，例如空格分割的值，比如
padding: 1em 2em 1em 2em; - 映射馅巷，例如
"background":red, "foreground":pink
SASS中的操作符包括：
-
==和!=用于檢查兩個(gè)值是否相等 -
+,-,*,%用來(lái)進(jìn)行數(shù)學(xué)運(yùn)算 -
<,<=,>,>=用來(lái)進(jìn)行兩個(gè)值大小的比較 -
+,-,/用來(lái)連接字符串 -
(,)用來(lái)控制運(yùn)算的順序
4. 注釋的寫法
注釋分兩種//開頭的注釋不會(huì)編譯到CSS文件中膛虫，/**/形式的注釋會(huì)編譯到CSS中。
單行注釋以//開頭钓猬，/**/格式支持多行注釋稍刀。
// This comment won't be included in the CSS.
/* But this comment will, except in compressed mode. */
/* It can also contain interpolation:
* 1 + 1 = #{1 + 1} */
/*! This comment will be included even in compressed mode. */
p /* Multi-line comments can be written anywhere
* whitespace is allowed. */ .sans {
font: Helvetica, // So can single-line commments.
sans-serif;
}
文檔注釋
如果使用sass寫一些基本的庫(kù)，可以對(duì)mixin,functions,variables等編寫文檔注釋，通過(guò)SassDoc工具可以提取文檔账月。
文檔注釋以///開頭综膀，支持Markdown語(yǔ)法格式。
