• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

@mixin 和 @include

185 0

@minxin为混入,实际上可以理解为一个通用的变量,这个变量会将自身里面的属性全部return出去,和function一样,你调用我,我就给你返回一个内容。

定义一个混入

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

混入的名字为:important-text,并且这个名字使用了连接符号-,和class的命名一样,并且sass的连接符除了这个还可以使用下划线_,也就是可以写成:important_text

调用混入

body {
  @include important-text;
  background-color:red;
}

使用@include 后面接混入的名称,然后编译后得到:

body {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color:red;
}

这样的话让我想起了一个使用场景:

有时候我们需要对某一个元素,比如h2标题元素,我们要让他不能换行,并且超出部分...表示,一般来说我们要写三个css属性。

white-space: normal;
text-overflow: ellipsis;
overflow: hidden;

这三个属性标准的做法就是写一个通用的class,比如no-break,我们利用这个class给需要不换行的元素加上这个。

.no-break {
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
}

虽然这样很好,但是有时候一个元素class非常多的话反倒很麻烦了,不利于开发者阅读,我们可以利用混入的方式,定义一个变量然后调用,这样减少了class的使用。

混入中使用混入

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

我们可以在混入中在调用混入。看使用需求

混入使用变量

混入开头就说了,它就像一个function一样,所以也可以传入参数,参数有两种传参的方式,就和function一样,支持固定参数和不固定参数。

固定参数

创建混入

@mixin bordered($color, $width) {
  border: $width solid $color;
}

调用混入

.body {
  @include bordered(blue, 1px);  // 调用混入,并传递两个参数
}

我们可以传两个参数进去,注意你混入的参数变量名必须$开头。

并且这个混入可以传入不同的参数,在不同的css中使用。

不固定参数

有时候我们并不清楚要传递多少参数,比如box-shadow,我们可能只有一层,也可能多层,每层阴影都用逗号分隔,如果固定参数传递,那你根本做不到要求,所以sass支持不固定参数。

这个就和function的arguments参数类似,但是arguments他是一个数组,而sass中,它就是参数本身,也就是一个变量等于所有参数。

创建混入

@mixin box-shadow($shadows...) {
  box-shadow: $shadows;
}

调用混入

.body {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);  
}

我们可以看到,在创建混入参数时,在后面了加了三个...;这三个点用于表示可变参数,也就是不固定参数,该参数等于所有传进来的值。

利用混入快速创建浏览器前缀

写css我们可能会遇到需要书写浏览器前缀的时候,虽然现在用webpack可以自动添加前缀,但是开发一些其他的不用打包工具的站点,添加前缀会很麻烦,因为他会重复很多遍相同的代码。

我们可以利用混入传参的特性,实现快速创建浏览器前缀

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.body {
    @include transform(rotate(20deg));
}

这样不就是一劳永逸了。

0
  • 本文分类:SASS
  • 本文标签:@mixin@include
  • 流行热度:已超过 185 人围观了本文
  • 最后更新:2020年04月20日 - 21时45分44秒
  • 发布日期:2020年04月20日 - 21时45分44秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码