美文网首页
Sass混合器

Sass混合器

作者: 混吃等死小前端 | 来源:发表于2020-02-13 17:46 被阅读0次

混合器的一个很好的用法是用于供应商前缀
创建混合器:@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

    sass笔记 1.对于sass中的&符号,指的就是解开sass嵌套规则,使&代替父元素 例如 2.混合器; 混合器...

  • sass学习6——混合器

    sass混合器用来实现大段样式的重用,用@mixin标识符定义。 通过@include来使用混合器。@includ...

  • Sass混合器

    混合器的一个很好的用法是用于供应商前缀创建混合器:@mixin someName {}使用混合器:@include...

  • sass学习总结

    sass总结 重点:1、带@的一般是一种组合2、混合器@mixin 选择器继承@extend3、.seriousE...

  • SASS - 简介

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - 使用Sass程序

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - 环境搭建

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - 操作符

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS- 局部文件(Partial)

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - @extend(继承)指令

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

网友评论

      本文标题:Sass混合器

      本文链接:https://www.haomeiwen.com/subject/evqlfhtx.html