本文以上圖為例子：
首先在根目錄創建一個sass文件，在sass文件中分別創建4個文件夾bsae,pages,libs,style;
base下存放：樣式重置_normalize.scss;
自己定義的scss代碼塊：_help.scss（如果項目大可以再細分為funiton,mixin,variable等）；
通用部分_common.scss;（如上圖中的頭部，如需要可再細分為common-header , common-nav等部分）
pages下存放每個對應的html需要的scss文件，如_index-style.scss, _hot-sell-style.scss等；
libs下存放外部庫，如果你有使用boosharp,jqui 等庫的話；
style下放每個html對應的scss，如index.html則對應的scss為: index.scss.
style下面的每個文件只需要引入所需要的文件即可，import會將導入的scss文件合並成一個文件（注意導入的必須是scss或sass文件）如圖所示：
可以發現上面只有style下面的scss文件沒有_下划線，這是因為以_開頭的不會進行編譯，我們需要的只是將最終的style下面的index.scss編譯成index.css，然后將index.css引入到html中去，如果不加上_
編譯時會產生多余的css文件，如main.css, base.css，這些只是部分，我們需要的只是最終組合好的完整的style.css；
目錄搭建好后，可以開始寫文件了，通用部分和樣式重置就不講了，這里只講help常用的scss。
幾個psd圖都有一個相同的顏色，（類似皮膚），將此顏色定義為一個變量：
$maincolor:#f84056;
使用如下：.header{background-color：$maincolor}
使用變量的好處是修改是只需修改一個地方即可，將#f84056改為#fff，對應的地方也會全部改變，輕松實現網頁換膚；
也可以使用%占位符，%maincolor{background-color:#f84056};
使用如下：.header{@extend %maincolor}
類似占位符的有繼承，這個容易理解，使用為：div{@extend .header} 即繼承.header的樣式；
嵌套：如header{
nav{
color:red
}
}
輸出為：header nav{color:red}
使用嵌套寫起來回方便很多，尤其是在使用偽類，偽元素時, 如清浮動
.clearfix{
&:after{
content: "";
display:table;
clear:both;
}
}
&代表當前層次;
函數：
@function torem($px){
@return $px / 75px * 1rem;
}
使用如下torem(100px),此函數主要用戶將px轉化為rem，75px位html跟元素的font-size，可配合淘寶flexible.js使用，如果使用css可以下載cssrem插件將px轉化為rem
scss最有用的個人認為還是mixin，個人常用mixin如下：
ios下字體：
@mixin font-dpr($font-size) {
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}
絕對定位
@mixin poa($w,$h,$l,$t){
position:absolute;
width:$w;
height:$h;
left:$l;
top:$t;
}
table居中
@mixin table-center{
display: table-cell;
vertical-align: middle;
text-align: center;
}
margin或者translate居中
@mixin poa-center($w,$h){
position:absolute;
width:$w;
height:$h;
left:50%;
top:50%;
// margin-left:-($w/2);
// margin-top:-($h/2);
transition:translate(-50%,-50%)
}
flex居中
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
字體溢出。。。
@mixin t-overflow($line:1){
@if $line==1{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}@else{
display: -webkit-box;
-webkit-line-clamp:$line;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
}
sass如此強大，但在我筆下竟然感覺好水，看來人丑還是要多讀書啊！！！1