SASS详解之混合(mixins)
例一、使用混合mixins中的变量来定义一个n行文本溢出隐藏的公用样式。 1、创建mixins.scss文件
//文本n行溢出隐藏
@mixin ellipsisBasic($clamp:2)
{ overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $clamp;
}
// 以上代码中，$clamp是变量，决定最多显示几行文本，默认是显示2行，调用的时候可自行传参设置。
<style rel="stylesheet/scss" lang="scss" scoped>
@import '@/assets/css/mixin.scss';//引用此混合样式
p {
line-height: 0.42rem;
@include ellipsisBasic;//使用此混合样式，默认显示2行
}
p {
width: 100%;
line-height: 0.42rem;
@include ellipsisBasic(3);//使用此混合样式，默认显示3行
font-size: 0.28rem;
margin-top: 0.37rem;
} </style>
2、在组件中使用：
// 文字超出几行隐藏
@mixin textOverHide($line) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
overflow: hidden;
cursor: pointer;
}
@for $line from 1 through 20 {
.line-#{$line} {
@include textOverHide($line);
}
}
组件中使用：
:class=`line-${2}`
3.定义一个混合(mixins)
一个混合(mixins)中有专属于自己的名字，有专属于自己的属性和样式。如下
SASS代码
@mixin firstMixin {
width:10px;
height:20px;
}
上面仅仅是一个很简单的混合(mixins)，仅仅包括了一些属性和属性值。混合(mixins)还可以有选择器，也可以后父级引用。如下
SASS代码
@mixin firstMixin {
.m_clear {
zoom:1;
&:after {
content:"";
display:block;
clear:both;
}
}
}
使用一个混合(include)
现在大家已经会定义一个混合(mixins)，一定想知道怎么调用它吧。那么就看个小例子吧。
SASS代码
@mixin firstMixin {
.m_clear {
zoom:1;
&:after {
content:"";
display:block;
clear:both;
}
}
}
div {
@include firstMixin;
}
编译后的CSS代码
div .m_clear {
zoom: 1;
}
div .m_clear:after {
content: "";
display: block;
clear: both;
}
上面的小例子是针对混合(mixins)中带有选择器的。不难看出，这个编译后的CSS中div中的类名clear具有混合(mixin)中的样式。而下面的例子，就是混合(mixin)中只有样式没有选择器的小例子。
SASS代码
@mixin twoMixin {
width:200px;
height:200px;
}
div {
@include twoMixin;
}
编译后的CSS代码
div {
width: 200px;
height: 200px;
}
混合(mixin)中定义的样式，哪个选择器引用了，就为其增加了混合(mixin)中的样式。若混合(mixin)中有选择器，那么就在其引用的选择器子集中添加相应的属性。再看个混合中引用混合的例子。
SASS代码
@mixin twoMixin {
width:200px;
height:200px;
}
@mixin threeMixin {
@include twoMixin;
border:1px solid red;}div {@include threeMixin;}
编译后的CSS代码
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
混合(mixin)中的参数
混合(mixin)中也可以设置参数，这可以让我们实现相似样式的共同编写。只需要在混合的名字后面添加变量名即可实现。如下
SASS代码
@mixin fourMixin ($width) {
width : $width;
}
div {
@include fourMixin(20px);
}
编译后的CSS代码
div {
width: 20px;
}
很简单的用法，很实用的功能。那么这么实用的功能，有没有默认参数值呢?想知道的话就看看下面的小例子吧。
SASS代码
@mixin fourMixin ($width : 3000px) {
width : $width;
}
div {
@include fourMixin(20px);
}
span {
@include fourMixin();
}
编译后的CSS代码
div {
width: 20px;
}
span {
width: 3000px;
}
混合(mixin)中的关键词参数
所为关键词参数，就是在调用混合(mixin)的时候，写上参数的名称，编译出来的是一样的，这样写的好处就是方便开发者阅读。例子如下。
SASS代码
@mixin fourMixin ($width : 3000px) {
width : $width;
}
div {
@include fourMixin($width :20px);
}
编译后的CSS代码
div {
width: 20px;
}
混合(mixin)中的可变关键词
有时候在编写混合(mixin)的时候，遇到的参数是不详的，不知道有多少，不知道应该设多少才好。具体使用的例子如下。
SASS代码
@mixin boxShadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
div {
@include boxShadow(0px 4px 5px #666, 2px 6px 10px #999);
}
编译后的CSS代码
div {
-moz-box-shadow: 0px 4px 5px #666666, 2px 6px 10px #999999;
-webkit-box-shadow: 0px 4px 5px #666666, 2px 6px 10px #999999;
box-shadow: 0px 4px 5px #666666, 2px 6px 10px #999999;
}
这么人性化的可变参数不仅可以用在定义混合(mixin)中，也可以运用在使用过程中。实例如下。
SASS代码
$myArguments : red, 14px, 400px, 1000px;
@mixin fiveMixin ($color , $size, $width, $height) {
color:$color;
font-size:$size;
width:$width;
height:$height;
}
div {
@include fiveMixin($myArguments...);
}
编译后的CSS代码
div {
color: red;
font-size: 14px;
width: 400px;
height: 1000px;
}
可以使用可变参数进行内外包装，然后最后在统一引入一个混合(mixin)，例子如下。
SASS代码
$myArguments : red, 14px, 400px, 1000px;
@mixin fiveMixin ($color , $size, $width, $height) {
color:$color;
font-size:$size;
width:$width;
height:$height;
}
@mixin sixMixin ($myArguments) {
background:red;
@include fiveMixin($myArguments...);
}
div {
@include sixMixin($myArguments)
}
编译后的CSS代码
div {
background: red;
color: red;
font-size: 14px;
width: 400px;
height: 1000px;
}
混合(mixin)中的内容块(content)
既然混合(mixin)可以传入很多东西，那么可不可以传入一定的内容呢?答案是可以的。有了内容块(content)，我们几乎无所不能了，我们可以在已经定义好的混合(mixin)中传入很多我们想要的样式，或者想要引入的选择器包含的选择器中的样式都可以传进去。如下
SASS代码
@mixin apply-to-ie6-only {
div {
width:300px;
@content;
}
}
@include apply-to-ie6-only {
.meng {
color:red;
}
}
@include apply-to-ie6-only {
height:500px;
}
编译后的CSS代码
div {
width: 300px;
}
div .meng {
color: red;
}
div {
width: 300px;
height: 500px;
}
变量和内容块(content)
混合(mixin)可以通过内容块传进去全局变量，也可以引入局部变量。如下
SASS代码
div {
height:300px;
@content;
}
}
$color :red;
@include contentMixin {
color:$color;
}
#sidebar {
$sidebar-width: 300px;
width: $sidebar-width;
@include contentMixin {
width: $sidebar-width / 3;
}
编译后的CSS代码
div {
height: 300px;
color: red;
}
#sidebar {
width: 300px;
}
#sidebar div {
height: 300px;
width: 100px;
}
