Sass混合器

混合器的一个很好的用法是用于供应商前缀
创建混合器:@mixin someName {}
使用混合器:@include someNme
混合器可以带参数


参数不带值

//.scss
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }
//.css
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

参数有默认值

//.scss
@mixin border-radius($radius:3px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
.box{
    @include border-radius;
}
.box2{
    @include border-radius(50%); 
}
//.css
.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.box2 {
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

传多个参数

@mixin center($width,$height){}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、Sass的语法格式及编译调试 1. Sass和scss的区别 本质上来说是同一个东西,只是语法上有细微的差异:...
    没汁帅阅读 1,383评论 0 5
  • 基础 声明变量 普通变量 默认变量 变量覆盖:只需要在默认变量之前重新声明下变量即可 变量的调用 局部变量和全局变...
    Jill1231阅读 1,316评论 0 1
  • 这是16年5月份编辑的一份比较杂乱适合自己观看的学习记录文档,今天18年5月份再次想写文章,发现简书还为我保存起的...
    Jenaral阅读 2,869评论 2 9
  • 1、SCSS 是 Sass 的新语法格式,从外形上来判断他和 CSS 长得几乎是一模一样,代码都包裹在一对大括号里...
    夜幕小草阅读 1,769评论 2 10
  • 今天我们来谈谈less与sass的相同点与不同点。 一、less与sass分别是什么 1、less Less 是一...
    ChrisP3_54e0阅读 22,669评论 0 9