sass
Ruby編寫 在服務端編譯
less
可以在客戶端使用 js編譯 也可以在服務端用node編譯
stylus
基于node開發(fā)的 node編譯
sass
1.安裝Ruby
檢測是否安裝成功
ruby -v
2.安裝sass
gem source -a http://rubygems.org/
gem sources -a http://ruby.taobao.org/
gem install sass
檢測安裝成功
sass -v
3.編譯
sass --watch demo.scss:deme.css
1).找到目標文件
1.文件的絕對路徑
2.進入到文件當前文件夾內(nèi)
4.壓縮
sass --style compressed demo.scss demo.css
sass語法
1.變量
1). $color
2). $orientation :left;
如果鑲嵌入 border-left-radius:5px;
border-#{$orientation}-radius:5px;
2.計算
$w :100px;
$w*2
margin:(14px/2);
3.嵌套
4.注釋
/**/ 會在編譯后的css中能看見
//? 只能在scss文件中看見
5.繼承
@extend
6.Mixin
1).定義
@mixin myclass{
}
@mixin myclass($value:100px){
$value
}
2).引用
@include
實例：省略號
@mixin ellipsis{
overflow: hidden;
word-break: keep-all;
word-wrap: normal;
white-space: nowrap;
text-overflow: ellipsis;
}
css3的屬性
@mixin radius($value:5px){
-webkit-border-radius:$value ;
-moz-border-radius:$value ;
border-radius:$value ;
}
7.引入文件
@import "test.scss"
