Introduction
Sass 有兩種語法規(guī)則(syntaxes),目前新的語法規(guī)則(從 Sass 3開始)被稱為 “SCSS”( 時髦的css(Sassy CSS)),它是css3語法的的拓展級置谦,就是說每一個語法正確的CSS3文件也是合法的SCSS文件寄啼,SCSS文件使用.scss作為拓展名。第二種語法別成為縮進語法(或者 Sass),它受到了Haml的簡潔精煉的啟發(fā)械哟,它是為了人們可以用和css相近的但是更精簡的方式來書寫css而誕生的。它沒有括號颊亮,分號阀捅,它使用 行縮進 的方式來指定css 塊,雖然sass不是最原始的語法熏瞄,但是縮進語法將繼續(xù)被支持脚祟,在縮進語法的文件以 .sass 為拓展名。
注釋
有三種形式:
(1)//comment:該注釋只是在.scss源文件中有强饮,編譯后的css文件中沒有由桌。
(2)/! /:重要注釋,任何style的css文件中都會有邮丰,一般放置css文件版權說明等信息行您。
(3)/ /:該注釋在compressed的style的css中沒有,其他style的css文件都會含有剪廉。
Quick Start
Installation
Build
1.切換到.scss文件所在目錄
命令行下切換到代碼文件夾目錄(如Z:\)娃循,假設有文件test.scss文件,里面內(nèi)容如下:(SASS完全支持css語法)
h1{ font-size:17px; } h2{ font-size:18px; }
2.編譯scss文件為css文件
運行命令:sass --style compressed test.scss test.css
斗蒋,即可生成壓縮版的css文件捌斧,并且命名為test.css笛质。幾點說明:
(1)--style 后面可以有四個參數(shù)可選,分別為expanded捞蚂、nested妇押、compact、compressed洞难,分別選用不同參數(shù)的效果可以自己嘗試體驗舆吮。
(2)test.scss和test.css文件目錄可以自定義,例如把Z盤sass目錄下的test.scss文件編譯為壓縮版的文件队贱,并放置在Z盤css目錄下色冀,那么命令即:
sass --style compressed z:\sass\test.scss z:\css\test.css
(3)開發(fā)過程中,只需要修改scss文件柱嫌,然后編譯锋恬;前端頁面只需要引用相應的css文件即可。
3.偵聽文件和文件夾
如果希望某一個scss文件或者相應的文件夾下面文件修改后编丘,自動進行編譯与学,那么可以使用偵聽命令。
(1)偵聽文件:
sass --watch --style compressed test.scss:test.css
當test.scss文件有修改后嘉抓,會自動編譯為test.css索守,并且是compressed的。
(2)偵聽文件夾:
sass --watch --style compressed sass:css
當sass文件夾下.scss
文件有修改的時候抑片,會自動編譯為與sass中文件同名的css文件卵佛。
備注:
(1)注意源文件和目標文件之間是冒號,與編譯命令中為空格不同敞斋。
(2)生成的map文件可以查找source map文件的作用截汪。
Webpack
Webpack中也內(nèi)置了sass-loader,通過簡單的配置既可以使用植捎。不過需要注意的是衙解,Webpack的sass-loader還是依賴于node-sass以及sass(gem),所以如果安裝sass-loader報錯可以先嘗試安裝sass焰枢。
****變量與選擇器********變量******定義**
變量的定義一般以$開頭蚓峦,某個變量的作用域僅限于他們定義的層級以及子層級。如果變量是定義在所有嵌套選擇器之外的济锄,那么他們可以在各處被調(diào)用枫匾。
$color1:#aeaeae; .div1{ background-color:$color1; }
編譯后:
div1 { background-color: #aeaeae; } /*# sourceMappingURL=test.css.map */
如果希望某個在子選擇器中定義的變量能夠成為全局變量,可以使用拟淮!global關鍵字:
#main { $width: 5em !global; width: $width; } #sidebar { width: $width; }
普通變量與默認變量
sass 的默認變量一般是用來設置默認值,然后根據(jù)需求來覆蓋的谴忧,覆蓋的方式也很簡單很泊,只需要在默認變量之前重新聲明下變量即可角虫。
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{ line-height: $baseLineHeight; }
編譯后的css代碼:
body{ line-height:2;}
可以看出現(xiàn)在編譯后的 line-height 為 2,而不是我們默認的 1.5委造。默認變量的價值在進行組件化開發(fā)的時候會非常有用戳鹅。
局部變量與全局變量
先來看一下代碼例子:
//SCSS
$color: orange !default;//定義全局變量(在選擇器、函數(shù)昏兆、混合宏...的外面定義的變量為全局變量)
.block { color: $color;//調(diào)用全局變量}
em {
$color: red;//定義局部變量
a {
color: $color;//調(diào)用局部變量
}
}
span { color: $color;//調(diào)用全局變量}
css 的結(jié)果:
//CSS
.block { color: orange;}
em a { color: red;}
span { color: orange;}
嵌套引用
嵌套引用在其他編程語言中即是字符串插值枫虏,需要用#{}進行包裹:
$left:left;
.div1{
border-#{$left}-width:5px;
}
想寫出這樣的 CSS:
nav a {
color:red;
}
header nav a {
color:green;
}
那么在 Sass 中,就可以使用選擇器的嵌套來實現(xiàn):
nav {
a {
color: red;
header & {
color:green;
}
}
}
變量計算
Sass中也是支持對于變量進行簡單的計算:
$left:20px; .div1{ margin-left:$left+12px; }
變量可以支持計算的類型爬虱,還是比較多的:
p { font: 10px/8px; // Plain CSS, no division
$width: 1000px;
width: $width/2; // Uses a variable, does division
width: round(1.5)/2; // Uses a function, does division
height: (500px/2); // Uses parentheses, does division
margin-left: 5px + 8px/2px; // Uses +, does division
font: (italic bold 10px/8px); // In a list, parentheses don't count }
選擇器
嵌套
.div1{ .span1{ height: 12px; }
.div2{ width: 16px; } }
屬性也可以嵌套隶债,比如border-color屬性,可以寫成:
p {
border: {
color: red;
}
}
注意跑筝,border后面必須加上冒號死讹。
父元素引用
在嵌套的子層級中,允許使用&引用父元素:
.div1{ &:hover{ cursor: hand; } }
代碼重用
繼承
SASS允許一個選擇器曲梗,繼承另一個選擇器赞警。比如,現(xiàn)有class1:
.class1{ font-size:19px; } .class2{ @extend .class1; color:black; }
**注意:如果在class2后面有設置了class1的屬性虏两,那么也會影響class2愧旦,如下:
.class1{ font-size:19px; } .class2{ @extend .class1; color:black; } .class1{ font-weight:bold; }
由此可以看出Scss也是遞歸編譯的。
****引用外部css文件(Partials)****有時網(wǎng)頁的不同部分會分成多個文件來寫樣式定罢,或者引用通用的一些樣式笤虫,那么可以使用@import。
@import "_test1.scss"; @import "_test2.scss"; @import "_test3.scss";
Mixin&Include
Mixin有點像C語言的宏(macro)引颈,是可以重用的代碼塊耕皮。
使用@mixin命令,定義一個代碼塊蝙场。
@mixin left {
float: left;
margin-left: 10px;
}
使用@include命令凌停,調(diào)用這個mixin。
div {
@include left;
}
參數(shù)與缺省值
邊距設置
@mixin common($value1,$value2,$defaultValue:12px){
display:block;
margin-left:$value1;
margin-right:$value2;
padding:$defaultValue;
}
.class1{
font-size:16px;
@include common(12px,13px,15px);
}
.class2{
font-size:16px;
@include common(12px,13px);
}
瀏覽器前綴設置設置
下面是一個mixin的實例售滤,用來生成瀏覽器前綴罚拟。
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
使用的時候,可以像下面這樣調(diào)用:
#navbar li {
@include rounded(top, left);
}
#footer { @include rounded(top, left, 5px); }
編程式方法
****流程控制****
條件語句
@if可以用來判斷:
p {
@if 1 + 1 == 2 {
border: 1px solid;
}
@if 5 < 3 { border: 2px dotted; }
}
配套的還有@else命令:
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
111111
循環(huán)語句
SASS支持for循環(huán)
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
也支持while循環(huán)
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each命令完箩,作用與for類似:
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
函數(shù)
Sass允許用戶自定義函數(shù)赐俗,原型如下所示:
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
顏色函數(shù)
SASS提供了一些內(nèi)置的顏色函數(shù),以便生成系列顏色弊知。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
原文地址:http://segmentfault.com/a/1190000003742313原文作者:王下邀月熊_Chevalier