SASS

sass技術是Syntactically Awesome Stylesheete Sass的縮寫，Sass能夠簡化你的Css工做流，並可使你的Css的擴展和維護工做變的更加容易。

1.sass有兩種後綴名.sass和.scss通常習慣於使用.scss

//文件後綴名爲sass的語法 body background: #eee font-size:

　　　　　　　　　　　　　　12px p background: #0982c1

//文件後綴名爲scss的語法　　 body { background: #eee; font-size:12px; }

　　　　　　　　　　　　 　　p{ background: #0982c1; }

 

scss變量：$變量名

eg:$color:blue;

     p{color:$color;}

!default：在模塊化中，運用別人的模塊scss，就可使用$color:blue !default;

特殊變量:#$變量名

eg:    $direct:top;

       .border-#$direct{border-top:1px solid red;}

編譯後css:  border-top{border-top:1px solid red;}

多值變量：經過nth（$變量名，第幾個）函數取值

$num:1px 2px 3px 2px;

div{padding:$num; margin,:nth($num,鍵);

$map:(a1:10em,a2:15em,a3：20em);

body{width:map_get($map,a1);}

 

選擇器嵌套

#top_nav{ line-height: 40px;

     　text-transform: capitalize;

        background-color:#333;

        li{ float:left; }

       a{ display: block; padding: 0 10px; color: #fff;

     &:hover{ color:#ddd; } } }

 

屬性嵌套：

.fakeshadow {

    border: { style: solid;

      left: { width: 4px; color: #888; }

   right: { width: 2px; color: #ccc; } } }

 

 

*參考資料http://www.w3cplus.com/sassguide/syntax.html*