常用的scss函式（mixin）

scss自出來之後，廣受歡迎，如何能快速寫出想要的css呢，可自定義一些scss方法，本人羅列了一些最近用到的scss函式，其實包括文字超出範圍的格式化、彈性盒子居中、左浮動、右浮動、滑鼠上移樣式改變等

1、文字超出範圍，顯示省略號

/*文字格式化，超出範圍，顯示省略號*/

@mixin textoverflow($width:100%,$display:block)

生成的css：

width: 100%;

display: block;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;

/* 清除浮動 */

@mixin clearfix 
*height: 1%;
}

.demo 

.demo:after

/*彈性盒子（傳入null不設定該屬性）*/

@mixin flexbox($direction: row, $justify: null, $align: null, $flex-wrap: null) 
@if ($justify!=null) 
@if ($align!=null) 
@if ($flex-wrap != null) 
}/*絕對定位 引數順序：上右下左*/
@mixin positionabsolute($top:null,$right:null,$bottom:null,$left:null) 
@if ($right!="" & & $right!=null) 
@if ($top!="" & & $top!=null) 
@if ($bottom!="" & & $bottom!=null) 
}/*左浮動*/
@mixin float-left($width:19%,$margin-right:1.2%) 
}/*右浮動*/
@mixin float-right($width:19%,$margin-left:1.2%) 
}/*漸變(從上到下）*/
@mixin linear-gradient($direction:bottom,$color1:transparent,$color2:#306eff,$color3:transparent) 
/* 行高 */
@mixin line-height($height:30px,$line-height:30px) 
@if ($line-height!=null) 
}/* 畫三角形 */
@mixin ********($width:10px,$direction:top,$color:$bgbluelight) 
@if ($direction == bottom) 
@if ($direction == left) 
@if ($direction == right) 
}/* 文字陰影 */
@mixin text-show($h-shadow:0px, $v-shadow:0px, $blur:10px, $color:rgba(0,180,255,0.7)) 
/* 鏈結樣式 */
@mixin hoverstyle($style:(color:#d9fdff),$hoverstyle:(color:#306eff)) : #;
} @if ($hoverstyle!=null & & $hoverstyle!="") : #;}}
}}/* 定義滾動條樣式 圓角和陰影不需要則傳入null */
@mixin scrollbar($width:10px,$height:10px,$outcolor:$bgcolor,$innercolor:$bggrey,$radius:5px,$shadow:null) 
/*定義滾動條軌道 內陰影+圓角*/
&::-webkit-scrollbar-track 
@if ($radius!=null) 
background-color: $outcolor;
} /*定義滑塊 內陰影+圓角*/
&::-webkit-scrollbar-thumb 
@if ($radius!=null) 
background-color: $innercolor;
border: 1px solid $innercolor;
}}/* css3動畫 預設3s寬度到200px */
@mixin animation($from:(width:0px),$to:(width:200px),$name:mymove,$animate:mymove 2s 1 linear infinite) 
: #;}}
to : #;}}
} @-webkit-keyframes #
}to }}}
/* 圓形盒子 */
@mixin circle($size: 11px,$bg: #fff) 
/* placeholder */
@mixin placeholder($color: #bbb) 
// internet explorer 10+
&:-ms-input-placeholder 
// safari and chrome
&::-webkit-input-placeholder 
&:placeholder-shown 
}

專案中scss提取可復用mixin函式

定義minxi.scss檔案 flex布局復用 mixin flex hov space between,col center mixin bgimg w 0,h 0,img size contain 使用方式 import assets mixin.scss include flex includ...

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

center align a block level element block得有寬度margin左右為auto才能居中 引用 extend center block mixin center block center block 引用 include center include center ...

sass中常用的mixin

瀏覽器字首 例子 include css3 transition,0.5s mixin css3 property,value value retina mixin image 2x image,width,height 清除浮動 引用例子 include clearfix mixin clearf...