作為前端開發(fā)人員泥畅,你肯定對css很熟悉荠诬,但是你知道css可以自定義嗎?大家都知道位仁,js中可以自定義變量柑贞,css僅僅是一個標記語言,不是編程語言聂抢,因此不可以自定義變量钧嘶,不可以引用等等。面對這些問題琳疏,我們現(xiàn)在來引進一個SASS有决,簡單的說,他是css的升級版空盼,他可以自定義變量疮薇,可以有if語句,還可以嵌套等等我注,很神奇吧!那下面我們就來介紹這個神奇的SASS迟隅!
一但骨、什么是SASS
SASS是一種CSS的開發(fā)工具励七,提供了許多便利的寫法,大大節(jié)省了設計者的時間奔缠,使得CSS的開發(fā)掠抬,變得簡單和可維護。 本文總結了SASS的主要用法校哎。我的目標是两波,有了這篇文章,日常的一般使用就不需要去看官方文檔了闷哆。
二腰奋、安裝和使用
2.1 安裝
SASS是Ruby語言寫的,但是兩者的語法沒有關系抱怔。不懂Ruby劣坊,照樣使用。只是必須先安裝Ruby屈留,然后再安裝SASS局冰。
window下面安裝ruby
https://www.ruby-lang.org/en/documentation/installation/#homebrew
http://rubyinstaller.org/
下載rubyinstaller.exe 安裝就可以了。
mac下面安裝ruby
$ curl -L https://get.rvm.io | bash -s stable
$ source ~/.rvm/scripts/rvm
$ rvm -v
$ rvm install 2.0.0
$ gem -v
可以看到版本號灌危,說明安裝成功康二!
假定你已經安裝好了Ruby,接著在命令行輸入下面的命令:
gem install sass
然后勇蝙,就可以使用了沫勿。
若gem命令出行錯誤,請看 http://www.haorooms.com/post/gem_not_use
2.2 使用
SASS文件就是普通的文本文件浅蚪,里面可以直接使用CSS語法藕帜。文件后綴名是.scss,意思為Sassy CSS惜傲。 下面的命令洽故,可以在屏幕上顯示.scss文件轉化的css代碼。(假設文件名為test盗誊。)
sass test.scss
如果要將顯示結果保存成文件时甚,后面再跟一個.css文件名。
sass test.scss test.css
SASS提供四個編譯風格的選項:
* expanded:沒有縮進的哈踱、擴展的css代碼荒适。
* compact:簡潔格式的css代碼。
* compressed:壓縮后的css代碼开镣。
生產環(huán)境當中刀诬,一般使用最后一個選項。
sass --style compressed test.sass test.css
你也可以讓SASS監(jiān)聽某個文件或目錄邪财,一旦源文件有變動陕壹,就自動生成編譯后的版本质欲。
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
SASS的官方網(wǎng)站,提供了一個在線轉換器糠馆。你可以在那里嘶伟,試運行下面的各種例子。
三又碌、基本用法
3.1 變量
SASS允許使用變量九昧,所有變量以$開頭。
$blue : #1875e7;
div {
color : $blue;
}
如果變量需要鑲嵌在字符串之中毕匀,就必須需要寫在#{}之中铸鹰。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
3.2 計算功能
SASS允許在代碼中使用算式:
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
3.3 嵌套
SASS允許選擇器嵌套。比如期揪,下面的CSS代碼:
div h1 {
color : red;
}
//可以寫成:
div {
hi {
color:red;
}
}
//屬性也可以嵌套掉奄,比如border-color屬性,可以寫成:
p {
border: {
color: red;
}
}
//注意凤薛,border后面必須加上冒號姓建。
在嵌套的代碼塊內,可以使用&引用父元素缤苫。比如a:hover偽類速兔,可以寫成:
a {
&:hover { color: #ffb3ff; }
}
3.4 注釋
SASS共有兩種注釋風格。
標準的CSS注釋 /* comment */ 活玲,會保留到編譯后的文件斯辰。
單行注釋 // comment凑耻,只保留在SASS源文件中诫给,編譯后被省略居灯。
在/*后面加一個感嘆號,表示這是"重要注釋"镀迂。即使是壓縮模式編譯丁溅,也會保留這行注釋,通程阶瘢可以用于聲明版權信息窟赏。
/*!
重要注釋!
*/
四箱季、代碼的重用
SASS允許一個選擇器涯穷,繼承另一個選擇器。比如藏雏,現(xiàn)有class1:
.class1 {
border: 1px solid #ddd;
}
class2要繼承class1拷况,就要使用@extend命令:
.class2 {
@extend .class1;
font-size:120%;
}
4.2 Mixin
Mixin有點像C語言的宏(macro),是可以重用的代碼塊。
使用@mixin命令赚瘦,定義一個代碼塊最疆。
@mixin left {
float: left;
margin-left: 10px;
}
使用@include命令,調用這個mixin蚤告。
div {
@include left;
}
mixin的強大之處,在于可以指定參數(shù)和缺省值服爷。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
使用的時候杜恰,根據(jù)需要加入?yún)?shù):
div {
@include left(20px);
}
下面是一個mixin的實例,用來生成瀏覽器前綴仍源。
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
使用的時候心褐,可以像下面這樣調用:
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
4.3 顏色函數(shù)
SASS提供了一些內置的顏色函數(shù),以便生成系列顏色笼踩。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
4.4 插入文件
@import命令逗爹,用來插入外部文件。
@import "path/filename.scss";
如果插入的是.css文件嚎于,則等同于css的import命令掘而。
@import "foo.css";
五、高級用法
5.1 條件語句
@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;
}
5.2 循環(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");
}
}
5.3 自定義函數(shù)
SASS允許用戶編寫自己的函數(shù)袍睡。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
看我上面的文章,大家有什么感受呢肋僧?你可以按照描述斑胜,安裝好sass,然后邊看邊自己用記事本把上面的案例敲一遍,運行一遍嫌吠,經過這一遍學習之后止潘,相信您已經SASS入門了。