常用scss佔位符 混合巨集mixin及引用方法

// center-align a block level element

// block得有寬度margin左右為auto才能居中
// 引用：@extend %center-block;
@mixin center-block 
%center-block

// 引用：@include center();、@include center(100px,100px);、@include center(100px,null);

@mixin center($width: null, $height: null)  @else if $width and $height  -($width / 2);
} @else if not $height  @else 
}

// 引用：@extend %fl;

// float left & right
@mixin fl($float:left) 
%fl// 引用：@extend %fr;
// float left & right
@mixin fr($float:right) 
%fr

// 引用：@extend %clearfix;

$lte7:                  false !default; //是否相容ie6-7
@mixin clearfix 
&:before,
&:after 
&:after 
}%clearfix

// 引用： @extend %ellipsis-basic;

// 元素可以設定寬度才可應用省略號
%ellipsis-basic
@mixin ellipsis($width:100%)

// 引用：@include ********(bottom,10px,#f2f2f2);

// @include ********(top,20px,#f2f2f2);
// @include ********(left,20px,#f2f2f2);
// @include ********(right,20px,#f2f2f2);
// 三角符號
%********-basic
@mixin ********($direction, $size, $bordercolor )  
@else if $direction == right  
@else if $direction == bottom  
@else if $direction == left 
}

@mixin font-dpr($font-size)

[data-dpr="3"] & 
}

// 水平漸變，從左往右

// @include gradient-horizontal(#333, #ccc);
@mixin gradient-horizontal($gradient...)
// 水平漸變，從左往右，平鋪
// @include gradient-horizontal-repeating(#333 5%, #ccc 10%);
@mixin gradient-horizontal-repeating($gradient...)
// 垂直漸變，從上往下
// @include gradient-vertical(#333 30%, #ccc);
@mixin gradient-vertical($gradient...) 
// 垂直漸變，從上往下，平鋪
// @include gradient-vertical-repeating(#333 30%, #ccc 50%);
@mixin gradient-vertical($gradient...) 
// 角度漸變
// @include gradient-angle(45deg, #333 30%, #ccc);
@mixin gradient-angle($gradient...) 
// 角度漸變
// @include gradient-angle(45deg, #333 30%, #ccc 50%);
@mixin gradient-angle-repeating($gradient...) 
// 徑向漸變，可以寫點簡單的
// 如：@include gradient-radial(#00f,#fff);
// 而@include gradient-radial(farthest-side circle at right,#00f,#fff);這種的將不會相容，所以不要呼叫這個，可以去找工具生成
@mixin gradient-radial($gradient...)

// 元素可以設定寬度才可應用省略號

// 引用： @extend %ellipsis-basic
%ellipsis-basic

// 引用 @include opacity(60)

@mixin opacity($opacity:50) 
}

// 引用 font-size: pxtorem(32);padding: pxtorem(20) pxtorem(30) pxtorem(10);

$browser-default-font-size: 75px !default;
@function strip-units($number)
@function pxtorem($px)

Sass之混合巨集 繼承 佔位符

1 混合巨集。當樣式變得越來越複雜，需要重複使用大段的樣式時，使用變數就無法達到我們目的了。這個時候混合巨集就派上用場了。而使用混合巨集時，首先要宣告混合巨集，而宣告混合巨集時有兩種，不帶引數混合巨集和帶引數混合巨集兩種。1.1不帶引數混合巨集的宣告 mixin border radius例如在乙個...

scss混合 mixins 使用

可參考 sass詳解之混合 mixins 例 一 使用混合mixins中的變數來定義乙個n行文字溢位隱藏的公用樣式。1 建立mixins.scss檔案 文字n行溢位隱藏 mixin ellipsisbasic clamp 2 以上 中，clamp是變數，決定最多顯示幾行文字，預設是顯示2行，呼叫的時...

Sass 混合巨集 VS 繼承 VS 佔位符

什麼時候用混合巨集，什麼時候用繼承，什麼時候使用佔位符？其實他們各有各的優點與缺點，先來看看他們使用效果 a sass 中的混合巨集使用 總結 編譯出來的 css 清晰告訴了大家，他不會自動合併相同的樣式 如果在樣式檔案中呼叫同乙個混合巨集，會產生多個對應的樣式 造成 的冗餘，這也是 csser 無...