sass 作為乙個 css 預編譯語言 也有很多類似與js的函式演算法 用於操作大量的css
@if 用來進行判斷
p
@if 5 < 3
}
@if lightness($color) > 30% @else@for $i from 1 to 10 px solid blue;
}}
$i: 6;
@while $i > 0
$i: $i - 2;
}
}}sass允許使用者自己編寫函式
@function double($n)
#sidebar
在巢狀 css 規則時，有時也需要直接使用巢狀外層的父選擇器，例如，當給某個元素設定hover樣式時，或者當body元素有某個 classname 時，可以用&代表巢狀規則外層的父選擇器
//scss
a body.firefox &
}//css
a a:hover
body.firefox a
&必須作為選擇器的第乙個字元，其後可以跟隨字尾生成復合的選擇器，例如
//scss
#main
}//css
#main
#main-sidebar
有些 css 屬性遵循相同的命名空間 (namespace)，比如font-family, font-size, font-weight都以font作為屬性的命名空間。為了便於管理這樣的屬性，同時也為了避免了重複輸入，sass 允許將屬性巢狀在命名空間中，例如：
//scss
.funky
}//css
.funky
//scss
.funky
}//css
.funky
/* */，以及單行注釋//，前者會 被完整輸出到編譯後的 css 檔案中，而後者則不會。
//scss
/* this comment is
* several lines long.
* since it uses the css comment syntax,
body
// these comments are only one line long each.
// since they use the single-line comment syntax.
a //css
/* this comment is
* several lines long.
* since it uses the css comment syntax,
body
a
通過#{}插值語句可以在選擇器或屬性名中使用變數：
//scss
$name: foo;
$attr: border;
p.# -color: blue;
}//css
p.foo
#{}插值語句也可以在屬性值中插入 sassscript，大多數情況下，這樣可能還不如使用變數方便，但是使用#{}可以避免 sass 執行運算表示式，直接編譯 css。
//scss
p /#;
}//css
p
通過@debug進行scss的degubber阻斷
//scss
@debug 10em + 12em;
//css
line 1 debug: 22em
sass安裝教程
在安裝的時候，請勾選add ruby executables to your path這個選項，新增環境變數，不然以後使用編譯軟體的時候會提示找不到ruby環境 安裝完ruby之後，在開始選單中，找到剛才我們安裝的ruby，開啟start command prompt with ruby 然後直接在...
SASS安裝教程
ruby安裝 在安裝的時候，請勾選add ruby executables to your path這個選項，新增環境變數，不然以後使用編譯軟體的時候會提示找不到ruby環境 sass安裝 安裝完ruby之後，在開始選單中，找到剛才我們安裝的ruby，開啟start command prompt w...
Sass教程二 Sass的安裝
前面已經提到了，sass是用ruby語言開發的，所以在安裝sass之前，需要先安裝ruby ruby安裝好了之後，我們就可以利用ruby的包管理工具gem安裝sass了，同樣還是在cmd裡執行以下命令 gem install sass安裝完成之後，還是老辦法檢查以下安裝是否成功 sass v 如果安...