將sass快速引入到移動端項目中加速開發

本文以上圖爲例子：

首先在根目錄建立一個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