// 1. 布局
//flex布局復用
@mixin flex($hov:space-between,$col:center)
//after偽類加小圖示
@mixin bgimg($w:0,$h:0,$img:'',$size:contain)
// 固定定位, 相容ie6
@mixin fixed
// 水平豎直方向居中-translate
@mixin center
// 水平豎直方向居中-flex
@mixin flex-center($w, $h)
//水平豎直方向居中-margin
@mixin know-center($w, $h)
// 吸頂導航
@mixin fix-header($h: 70px)
// 吸底導航
@mixin fix-footer($h: 70px)
// 浮動, 相容 ie6
@mixin fl
@mixin fr
// 清除浮動
@mixin clearfix }
// 彈性盒
@mixin flex
// ie盒模型
@mixin border-box
// 尺寸
@mixin size($w, $h)
// 最小尺寸, 相容ie6
@mixin min-width($min-w)
@mixin min-height($min-h)
// 全屏大圖背景
@mixin fullscreen-bg($url)
// 2. 文字
// 禁止文字被選擇
@mixin user-select
// 文字超出顯示省略號
@mixin ellipsis
//文字超出幾行顯示省略號
@mixin ellipsis-multi($line)
// 美化文字選中 ::selection
@mixin beauty-select($color, $bgcolor) }
// 美化佔位符 placeholder 樣式
@mixin beauty-placeholder($fz, $color: #999, $align: left)
&:-ms-input-placeholder
&::-webkit-input-placeholder }
// 隔行換色
@mixin zebra-lists($evencolor, $evenbgcolor, $oddcolor, $oddbgcolor)
&:nth-child(2n + 1) }
// 首字下沉
@mixin first-letter($font-size: 6em) }
// 3.
// 濾鏡: 將彩色**顯示為黑白**、保留層次
@mixin grayscale
// 模糊 毛玻璃效果
@mixin blur($blur: 10px) ');
filter: blur($blur);
*zoom: 1;}
// 滑鼠禁用樣式，但仍然可以觸發事件
@mixin disabled
// 4.圖形
// 三角形
@mixin ********($width: 4px, $color: #000)
**// 背景
@mixin bgimage($path)
}// 居中布局
@mixin center()
// 不換行
@mixin no-wrap()
@mixin top-line($c: #c7c7c7)
}@mixin bottom-line($c: #e6e6e6)
}@mixin left-line($c: #c7c7c7)
}@mixin right-line($c: #c7c7c7)
}@mixin line($c: #c7c7c7, $border-radius: 0)
transform: scale(0.5);
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)
width: 300%;
height: 300%;
transform: scale(0.333333333);
}}// 一畫素上邊框
@mixin border-top-1px($color: #c7c7c7)
}// 一畫素下邊框
@mixin border-bottom-1px($color: #c7c7c7)
}// 一畫素上下邊框
@mixin border-top-bottom-1px($color: #c7c7c7)
&:after
}// 一畫素左邊框
@mixin border-left-1px($color: #c7c7c7)
}// 一畫素右邊框
@mixin border-right-1px($color: #c7c7c7)
}// 一畫素邊框
@mixin border-1px($color: #c7c7c7, $position: relative, $border-radius: 0)
}
@import url(『位址』)2.2.具體使用
sass中以@include+類名匯入，括號裡面傳入具體的引數//flex布局復用.flex(@hov:space-between,@col:center)
.bgimg(@w:0,@h:0,@img:'',@size:contain)
.position(@pos:absolute,@top:0,@left:0,@w:100%,@h:100%)
.positionimg(@pos:absolute,@top:0,@right:0,@w:0,@h:0,@img:'')
.height(@h:0,@lh:@h)
.wh(@w:0,@h:0)
.border(@bw:1px,@bc:@colorf,@bs:solid)
主要以 .+類名使用Ruby中的Mixin （混入）
在ruby中，我們可以把乙個模組混入 mixin 到物件中，從而達到類似多重繼承的效果。下面舉幾個例子來仔細闡述一下這個問題 首先定義乙個module module foo def bar puts foo endend 然後我們把這個模組混入到物件中去 class demo include foo...
Vue中Mixin的用法
混入 mixin 提供了一種非常靈活的方式，來分發 vue 元件中的可復用功能。乙個混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被 混合 進入該元件本身的選項。定義乙個混入物件 var mymixin methods 定義乙個使用混入物件的元件 var component...
Vue中的Mixin理解
當有不同元件的選項存在相同處理時，vue為我們提供了一種叫做mixin的混入功能。它通過遞迴操作，將mixin物件上的選項與元件中的選項合併，避免了元件間相同處理的 冗餘。下面，我在專案中建立了乙個叫做comment的元件，然後將此元件作為另乙個元件mixin選項後，新元件就完全複製了comment...