SASS

CSS預處理器

1. Sass(SCSS)
2. LESS
3. Stylus
4. Turbine
5. Swithch CSS
6. CSS Cacheer
7. DT CSS

Simple Exapmple

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

 
 
 
 
$side:left;.rounded {    border-#{$side}-radius:5px;}

Saaa和SSCC的區別

1.後綴名.sass和.scss;2.Sass有嚴格的縮進式語法規則，不帶({})和分號(;)，SCSS相似於CSS。
安裝Sass
在線聯繫

gem install sass
gem install compass
gem update sass
gem uninstall sass

編譯

命令編譯：sass --watch --style nested expanded compact compressed --sourcemap
GUI工具編譯：koala Codekit
自動化編譯:

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

 
 
 
 
var gulp = require('gulp');var sass = require('gulp-sass');gulp.task('sass', function () { gulp.src('./scss/*.scss') .pipe(sass()) .pipe(gulp.dest('./css'));});gulp.task('watch', function() { gulp.watch('scss/*.scss', ['sass']);});gulp.task('default', ['sass','watch']);</pre>

單文件編譯：sass path/style.scss:path/style.css
多文件編譯：sass sass/:css/
監視文件變化：sass --watch path/style.scss:path/style.css

導入

基礎的文件命名以開頭
導入時可忽略和scss擴展名
@import導入的sass文件在編譯時會被合入新文件，@import導入的css文件不會

註釋

單行註釋//不會被轉譯出來，標準的css註釋方式則能夠/**/

變量

必須以 開頭，值後面加!default表示默認值。覆蓋默認值就在默認變量前重新聲明一下 baseLineHeight: 2;
baseLineHeight: 5 !default;
全局變量、局部變量，當在局部範圍（選擇器內、函數內、混合宏內...）聲明一個已經存在於全局範圍內的變量時，局部變量就成爲了**全局變量的影子**。基本上，**局部變量只會在局部範圍內覆蓋全局變量**。
特殊變量：
```css
.border-#{borderDirection} {     border-#{borderDirection}: 1px solid #ccc;
}
body {
    font: #{baseFontSize}/#{$baseLineHeight};
}

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

 
 
 
 
多值變量：全局變量：######嵌套（Nesting）選擇器的嵌套、屬性的嵌套、僞類嵌套

.box {
border: { //關鍵在於這個雙引號
top: 1px solid red;
bottom: 1px solid green;
}
}

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

 
 
 
 
```.clearfix { &:before, &:after { content: ""; display: table; } &:after { clear: both; overflow: hidden; }}

@at-root 用來跳出選擇器嵌套，至關於@at-root(without:rule) rule表示常規css
@at-root(without:media)
@at-root(without:support)
@at-root(without:all)
@at-root與&配合使用

混合宏

1.聲明混合宏
不帶參數混合宏@mixin name {}
帶參數混合宏@mixin name( var)可以帶默認值 var:3px，能夠帶多個參數 var1, var2，參數不少時，這樣表示 var...，傳參0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2)
複雜的混合宏，混合宏會產生冗餘代碼,`涉及到變量的時候用，能夠傳參`
```
@mixin border-radius(radius...) {
@if length(shadow) >= 1 {
        @include prefixer(box-shadow,shadow);     } @else {          shadow:004pxfgba(0,0,0,.3);@includeprefixer(box−shadow, shadow)
}
}
```

擴展/繼承@extend

相同的合在一塊兒，缺點是不能傳參

佔位符%placeholder

不被@extend調用不產生代碼，相同的合在一塊兒

插值#{}

不一樣樣式風格的輸出方法

嵌套輸出nested
展開輸出expanded
緊湊輸出compact
壓縮輸出compressed

須要注意的

不支持GBK編碼，須要將文件編碼設置爲utf-8
路徑中不能用中文字符

來自爲知筆記(Wiz)