Sass学习之路——混合宏

Sass

1、声明混合宏

a、不带参数混合宏

@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

b、带参数混合宏

@mixin border-radius($radius:5px){
    -webkit-border-radius:$radiusl;
    border-radius:$radius;
    }

2、调用混合宏

input{
    @include border-radius;
    }

也可以调用一个不带值的参数

@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
.box {
  @include border-radius(3px);
}

在 Sass 的混合宏中，还可以给混合宏的参数传一个默认值

@mixin border-radius($radius:3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
.btn {
  @include border-radius;
}

有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代.

@mixin box-shadow($shadows...){
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000,.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }
}
//实际调用
.box {
  @include box-shadow(1 2 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

缺点：不能智能地将相同样式代码块合并在一起。

3、继承

通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承.

.slider{
    width:23px;
    height:67px;
    border-radius:1px solid red;
    }
.innerSlider{
    color:#fff;
    @extend .slider
    }

4、占位符 %placeholder

如果没有被@extend调用的话不会产生任何代码

%color1{
    background-color:#FFF;
%color2{
    color:red;
    }
.slider{
    @extend %color1;
    @extend %color2;
    }

编译出来的代码会将相同的代码合并在一起

5、混合宏 继承 占位符的区别和使用

1、混合宏
会产生很多冗余的代码，主要优点是可以传参数，如果我们的代码块中涉及到变量，可以使用混合宏来创建相同的代码块。
2、继承
如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。
3、占位符

6、插值#{}

插值详解

7、注释

1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”
2、类似 JavaScript 的注释方式，使用“//”
两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示

8、除法

通常使用括号，但是/符号被当作除法运算符时有以下几种情况：

• 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
• 如果数值被圆括号包围。
• 如果数值是另一个数学表达式的一部分