SASS

 

sass入門/sass教程：http://www.w3cplus.com/sassguide/

阮一峯 sass用法指南：http://www.ruanyifeng.com/blog/2012/06/sass.html

sass中文文檔：http://sass.bootcss.com/docs/sass-reference/

============================================================================

關於sass語法 參考：http://www.w3cplus.com/sassguide/syntax.html

簡述sass語法：

一、sass中能夠定義變量，方便統一修改和維護。

//sass style //----------------------------------- $fontStack: Helvetica, sans-serif; $primaryColor: #333; body { 　　font-family: $fontStack; 　　color: $primaryColor;
} //css style //----------------------------------- body { 　　font-family: Helvetica, sans-serif; 　　color: #333;
}

二、sass能夠進行選擇器的嵌套，表示層級關係，看起來很優雅整齊。

//sass style //----------------------------------- nav { 　　ul { 　　　　margin: 0; 　　　　padding: 0; 　　　　list-style: none;
　　} li { display: inline-block; } a { 　　display: block; 　　padding: 6px 12px; 　　text-decoration: none;
　　} }

//css style //----------------------------------- nav ul { margin: 0; padding: 0; list-style: none;
} nav li { display: inline-block;
} nav a { display: block; padding: 6px 12px; text-decoration: none;
}

三、sass中如導入其餘sass文件，最後編譯爲一個css文件，優於純css的@import

//sass style //----------------------------------- // _reset.scss html, body, ul, ol { margin: 0; padding: 0;
}

 //sass style //----------------------------------- // base.scss @import 'reset'; body { font-size: 100% Helvetica, sans-serif; background-color: #efefef;
}

 //css style //----------------------------------- html, body, ul, ol { margin: 0; padding: 0;
} body { background-color: #efefef; font-size: 100% Helvetica, sans-serif;
}

四、sass中可用mixin定義一些代碼片斷，且可傳參數，方便往後根據需求調用。今後處理css3的前綴兼容輕鬆便捷。

//sass style //----------------------------------- @mixin box-sizing ($sizing) { -webkit-box-sizing:$sizing; -moz-box-sizing:$sizing; box-sizing:$sizing;
} .box-border{ border:1px solid #ccc; @include box-sizing(border-box); } //css style //----------------------------------- .box-border { border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

五、擴展/繼承 sass可經過@extend來實現代碼組合聲明，使代碼更加優越簡潔。

//sass style //----------------------------------- .message { border: 1px solid #ccc; padding: 10px; color: #333;
} .success { @extend .message; border-color: green;
} .error { @extend .message; border-color: red;
} .warning { @extend .message; border-color: yellow;
} //css style //----------------------------------- .message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333;
} .success { border-color: green;
} .error { border-color: red;
} .warning { border-color: yellow;
}

六、sass可進行簡單的加減乘除運算等

//sass style //----------------------------------- .container { width: 100%; } article[role="main"] { float: left; width: 600px / 960px * 100%;
} aside[role="complimentary"] { float: right; width: 300px / 960px * 100%;
} //css style //----------------------------------- .container { width: 100%;
} article[role="main"] { float: left; width: 62.5%;
} aside[role="complimentary"] { float: right; width: 31.25%;
}

七、顏色sass中集成了大量的顏色函數，讓變換顏色更加簡單。

//sass style //----------------------------------- $linkColor: #08c; a { text-decoration:none; color:$linkColor; &:hover{ color:darken($linkColor,10%);
    } }
 //css style //----------------------------------- a { text-decoration: none; color: #0088cc;
} a:hover { color: #006699;
}

 ===================================================================================

示例scss文件編寫語法：

注： 註釋只能用英文、參考文檔裏邊有的函數還不能實現（安裝的sass版本緣由）!

$base_color:magenta; $base_font:50px; $bg:#ccc; $color:#fff; $fontSize: 12px; *{ padding: 0; margin: 0;
} body{ font-size:$fontSize;
} #mian{ font-weight:900; font-size:28px; width:100px; height:500px;
} section{ width: 100%; border: 1px solid #ccc; .box1{ background: $base_color; h2{ color: $color;
        } p{ span{ font-size: $base_font;
            } } } .box2{ background: aqua; img{ width: 400px; height: 500px; border: 1px solid #CCCCCC; display: block;
        } } } @mixin box-sizing($s){ -webkit-box-sizing: $s; -moz-box-sizing: $s; box-sizing: $s;
} .box3{ border: 1px solid #000000; background: skyblue; width: 500px; height: 500px; color: $color; @include box-sizing(border-box); } .spack{ @extend .box3; } //insert //------------------------------- .fakeshadow { border: { style: solid; left: { width: 4px; color: #888;
    } right: { width: 2px; color: #ccc;
    } } } //------------------------------- @mixin center-block { margin-left:auto; margin-right:auto;
} .demo{ @include center-block; } //-------- @mixin opacity($opacity:50) { opacity: $opacity / 100; filter: alpha(opacity=$opacity);
} //------- @mixin horizontal-line($border:1px dashed #ccc, $padding:10px){ border-bottom:$border; padding-top:$padding; padding-bottom:$padding;  
} .imgtext-h li{ @include horizontal-line(1px solid #ccc); } .imgtext-h--product li{ @include horizontal-line($padding:15px);
} //============================== h1{ border: 4px solid #ff9aa9;
} .speaker{ @extend h1; border-width: 2px;
} //------------------------------- $lte7: true; $type: monster; .ib{ display:inline-block; @if $lte7 { *display:inline; *zoom:1;
    } } p { @if $type == ocean { color: blue;
  } @else if $type == matador { color: red;
  } @else if $type == monster { color: green;
  } @else { color: black;
  } } //--------------------------- @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } //------------------------------ $animal-list: puma, sea-slug, egret, salamander; @each $animal in $animal-list { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } }