// 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 無...