Sass初學 · 我的前端之路

Sass作為css預處理器的一種，極大方便了我們編寫css代碼。與Less相比較，我個人更加喜歡使用Sass，因為它的代碼風格更加接近高級程序設計語言。 Sass上手并不難，可以參考官方文檔學習:http://sass.bootcss.com/docs/sass-reference/ ### 安裝Sass ####1.安裝ruby Sass依賴于ruby，可以點擊[這里](http://rubyinstaller.org/downloads)安裝，在安裝過程中勾選Add Ruby executables to your PATH。 ####2.安裝Sass 安裝好ruby后，打開Start Command Prompt with Ruby，輸入下面命令來進行安裝。 ~~~ gem install sass ~~~ 可以通過 ~~~ sass -v ~~~ 來查看版本，這也正說明了Sass已經安裝成功了。 ###編譯Sass ####1.命令行編譯單文件一次性編譯 ~~~ sass style.scss style.css ~~~ 單文件監聽 ~~~ sass --watch style.scss:style.css ~~~ ####2.Koala 在Less初學篇里已經介紹過，Koala同樣可以編譯Sass文件，但是這里需要注意，ruby環境默認是不支持中文編碼的，因此需要將Koala文件夾中的\rubygems\gems\sass-版本\lib\sass里面的engine.rb添加一行代碼Encoding.default_external = Encoding.find('utf-8')(放在所有require xxx后面即可)。 3.使用sublime的插件或者webstorm sublime支持安裝編譯Sass文件的插件，webstorm本身就自帶編譯Sass，這里就不詳細介紹了。 4.使用在線編譯器 [戳這里](http://www.sassmeister.com/) ###Sass常用語法 sass有兩種后綴名文件：一種后綴名為sass，不使用大括號和分號；另一種就是scss(支持css3，推薦使用) ####1.文件導入使用@import "文件名"來導入css或scss文件，如果導入的是scss文件，那么被導入的文件(一個或多個)都會被編譯最終只生成一個css文件。導入的scss文件可以省去后綴。如果導入的是css文件，那么它將以被導入的形式出現在那么最終生成的css中。實例： ~~~ @import "style"//省略后綴的style.scss ~~~ ####2.注釋與Less相同，Sass有兩種注釋：編譯到css文件的/**/和不被保存的// ####3.變量使用"$變量名"的方式來聲明一個變量，與Less的@變量名不同，Sass的這種聲明方式更加接近高級程序設計語言。 ~~~ $color:blue; .div{ background-color:$color; } ~~~ 特殊變量：一般用于屬性，形式為#{變量名} ~~~ $var:left; .div{ border-#{$var}:1px solid black;//border-left } ~~~ ####4.嵌套 Sass支持選擇器的嵌套，使得父子關系和代碼結構更加清晰 ~~~ .father{ width:100px; height:100px; .son{ background-color:blue; &:hover{ background-color:red;//&匹配它的上一級選擇器 } } } ~~~ 屬性嵌套 ~~~ .div{ width:100px; height:100px; border:{ //注意有: radius:10px;//相當于border-radius:10px } } ~~~ @at-root @at-root可以讓它后面的選擇器跳出嵌套，自己作為根 ~~~ .father{ .son{ @at-root .skip{ } } } //.father{} //.father .son{} //.skip{} ~~~ ####5.mixin 混合 mixin可以實現類似于函數的功能，它可以無參，可以有參，也可以指定默認參數。用法和Less相似。通過@mixin來創建一個混合，通過@include來使用它。通過無參的mixin來創建一個代碼塊: ~~~ @mixin init{ width:100px; height:100px; background-color:blue; } //調用這個代碼塊 .div{ @include init; } ~~~ 為mixin指定參數和缺省值： ~~~ @mixin width($width:50){ //可以指定默認值，這里是50 width:$width px; } .div1{ @include width(200); //200px } .div2{ @include width(); //50px ~~~ mixin允許有多個參數: ~~~ @mixin mul($width:100,$height:100,$background:blue){ width:$width px; height:$height px; background-color: $background; } .div{ @include mul(); } ~~~ mixin最常用的地方就是css3的hack代碼(如border-radius等): ~~~ @mixin rounded($v,$h,$radius:5px){ 　　-webkit-border-#{$v}-#{$h}-radius: $radius; 　　-moz-border-radius-#{$v}#{$h}: $radius; 　　border-#{$v}-#{$h}-radius: $radius; } ~~~ ####6.繼承 Sass的繼承類似于高級程序設計語言的繼承，可以使用@extend從一個選擇器(占位符)繼承它的樣式。 ~~~ .father{ width:100px; height:100px; background-color: black; } .son{ @extend .father; //繼承了.father的所有樣式 border-width:2px; } ~~~ 占位符：要實現繼承必須有父類，也就是必須要有一個選擇器來實現被繼承，但是這個父選擇器最終也會被編譯成css樣式。Sass提供了占位符這個功能來實現類似于接口的功能，可以為占位符設定樣式，占位符可以被繼承并且它最終不會被編譯到css文件中，這個功能大大減少了css代碼。 ~~~ %father{ width:100px; height:100px; background-color: black; } .son{ @extend %father; //繼承了%father的樣式，但是%father最終不會被編譯 border-width:2px; } ~~~ ####7.函數 Sass提供了一些函數，其中最常用的是color函數。用戶也可以自己定義函數。常用的color函數:lighten($color,$amount)和darken($color,$amount)代表顏色減淡和加深,第一個參數為顏色，第二個參數為百分比。 ~~~ body{ background-color: lighten(black,50%);//gray } ~~~ 自定義函數： ~~~ @function myfunction($width){ @return $width*2 px; } .div3{ width:myfunction(300); } ~~~ ####8.運算 Sass支持變量之間以及變量直接和數值的運算，要注意運算符前面要有一個空格。用法同Sass，這里就不詳細敘述了。條件語句@if和@else： ~~~ $var:100; .div{ @if($var==100){ width:100px; } @else{ width:200px; } ~~~ 三目判斷if(condition,true,false)第一個參數代表條件，第二個參數代表為真的時候的值，第三個代表為假的時候的值 ~~~ $var:100; .div{ width:if($var==100,200px,300px); //width:200px } ~~~ 循環@for、@while： ~~~ @mixin block{ width:100px; height:100px; background-color:black; } @for $i from 1 through 10{ //through包括10而to不包括10 .item-#{$i}{ @include block;//.item-1 —— .item10:{} } } ~~~ 使用@each來遍歷單個list字段: ~~~ $i:1,2,3,4,5,6,7,8,9,10; @each $temp in $i{ .item-#{$temp}{ border:1px solid red; } } ~~~ 多個list字段: ~~~ $i:(1,blue),(2,grey),(3,yellow),(4,red),(5,black),(6,green),(7,white),(8,gold),(9,blue),(10,red); @each $temp1,$temp2 in $i{ .item-#{$temp1}{ background-color: $temp2; } } ~~~ 遍歷map字段: ~~~ $map:(h1:2em,h2:3em,h3:4em); @each $key,$value in $map{ #{$key}{ font-size:$value; } } ~~~