移動端快速開發H5頁面,淘寶方案flexble,Sass混合宏,學習成果

注意:
熟悉less的使用者,用Sass時請使用.scss后綴文件。
千萬別用.sass后綴文件。

.sass的劣勢:因為不能使用花括號,需要使用縮進來進行編輯。
.scss的優勢:與less使用方法大致相同。

有關移動端$baseline-px:的設置問題:

1.iPhone5的設計圖需要改寫為:$baseline-px:64px

2.iPhone6的設計圖需要改寫為:$baseline-px:75px

3.iPhone6 plus的設計圖需要改寫為:$baseline-px:82.8px

//移動端方案,淘寶rem轉換函數
@mixin px2rem($property, $px-values, $baseline-px:75px, $support-for-ie:false) {
//Conver the baseline into rems
$baseline-rem: $baseline-px / 1rem * 1;
//Print the first line in pixel values
@if $support-for-ie {
#{$property}: $px-values;
}
//if there is only one (numeric) value, return the property/value line for it.
@if type-of($px-values)=="number" {
#{$property}: $px-values / $baseline-rem;
}
@else {
//Create an empty list that we can dump values into
$rem-values: ();
@each $value in $px-values {
// If the value is zero or not a number, return it
@if $value==0 or type-of($value) !="number" {
$rem-values: append($rem-values, $value / $baseline-rem);
}
}
// Return the property and its list of converted values
#{$property}: $rem-values;
}
}
//移動端方案,淘寶dpr字體轉換
@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;
}
}

例子:

Sass文件:

.selector {
// 使用px2rem進行px計算
@include px2rem(height, 150px);
// 使用dpr進行px計算
@include font-dpr(38px);
}

運行結果:

.selector {
height: 2rem;
font-size: 38px;
}

[data-dpr="2"] .selector {
font-size: 76px;
}

[data-dpr="3"] .selector {
font-size: 114px;
}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容