//-----------------------------------瀏覽器字首-----------------------------------------
//例子：@include css3(transition, 0.5s);
@mixin
css3($property, $value) #: $value;}}
//-----------------------------------retina-----------------------------------------
@mixin
image-2x($image, $width, $height)
}//-----------------------------------清除浮動-----------------------------------------
//引用例子：@include clearfix();
@mixin
clearfix()
&:after
}//-----------------------------------black和white-----------------------------------------
//特別宣告，上面這個不屬於sass的mixins範疇，是sass的自定義函式功能。
//background:black(0.15);
//color:white(0.9);}
@functionblack($opacity)
@functionwhite($opacity)
//-----------------------------------內陰影和外陰影-----------------------------------------
//引用例子:@include
box-emboss(0.8,0.05);
@mixin
box-emboss($opacity, $opacity2)
//-----------------------------------行高-----------------------------------------
//引用例子:@include line-height (16);
@mixin
line-height($heightvalue:12)
//-----------------------------------隱藏文字-----------------------------------------
//引用例子：
//.logo
@mixin
hide-text
//-----------------------------------響應式斷點-----------------------------------------
//引用例子：
//@include breakpoint(large)
//@include breakpoint(medium)
//@include breakpoint(small)
@mixin
breakpoint($point)
}@else
if $point==medium
}@else
if $point==small }}
//-----------------------------------正三角-----------------------------------------
//正三角的通用屬性
%********base
//regula********:正三角(dashed預設透明)
//例子：@include regula********(top,red);
@mixin
regula********($derection:bottom, $color: #000, $width:20px)
//向左
@if $derection==left
//向上
@if $derection==top
//向下
@if $derection==bottom
}//-----------------------------------直角三角形-----------------------------------------
//right-angled********:直角三角形
//例子：@include right-angled********(1,red);
@mixin
right-angled******** ($derection:1, $color:#000, $width:20px, $opacity:transparent, $border:dashed)
//向右
@if $derection==2
//向右
@if $derection==3
//向右
@if $derection==4
}//-----------------------------------圓角-----------------------------------------
//radius:圓角
//例子：@include radius(24,100%);
@mixin
radius($num:1234, $size:5px)
@if $num==12
@if $num==23
@if $num==34
@if $num==14
@if $num==13
@if $num==24
}//-----------------------------------邊框陰影-----------------------------------------
//boxshadow:邊框陰影
//例子：@include boxshadow(24,100%);
@mixin
boxshadow($x:3px, $y:3px, $shadowcolor: #cccccc) , offy=#, color='#');
/* ie6,ie7 */
-ms-filter
: "progid:dximagetransform.microsoft.dropshadow(offx=#, offy=#, color='#')";
/* ie8 */
}//-----------------------------------透明度-----------------------------------------
//myopacity:透明度
//例子：@include myopacity(0.3,93,197,16);
@mixin
myopacity($opacity:0.5, $r:0, $g:0, $b:0)
//-----------------------------------透明度-----------------------------------------
//引用例子:@include opacity(0.8);
@mixin
opacity($opacity)
//-----------------------------------動畫keyframes生成-----------------------------------------
//動畫keyframes生成
//例子：@include keyframes(動畫名稱);
//@include keyframes(move-the-object)
// 100%
//}@mixin
keyframes($animationname)
@-moz-keyframes #
@-o-keyframes #
@keyframes #
}
使用Sass的Mixin實現自動新增瀏覽器字首
解決每次打某些css3樣式需要加各種瀏覽器字首這一麻煩問題。當乙個瀏覽器實現乙個新的屬性 值或者選擇器，而這個特徵還不是處於候選推薦標準狀態的時候，這屬性的前面會新增乙個字首以便於它的渲染引擎識別。通俗一點來說，就是當官方標準還沒有最終確定之前，部分瀏覽器根據最初的草案實現了部分css樣式，然後使用...
常用的scss函式（mixin）
scss自出來之後，廣受歡迎，如何能快速寫出想要的css呢，可自定義一些scss方法，本人羅列了一些最近用到的scss函式，其實包括文字超出範圍的格式化 彈性盒子居中 左浮動 右浮動 滑鼠上移樣式改變等 1 文字超出範圍，顯示省略號 文字格式化，超出範圍，顯示省略號 mixin textoverfl...
sass 常用備忘
所有變數以 開頭 font size 12px container 如果變數巢狀在字串中，需要寫在 中 side left rounded 1px solid 000 層級巢狀 container 屬性巢狀，注意，border後需要加上冒號 container 可以通過 引用父元素，常用在各種偽類 ...