SCSS随笔-mixin与@extend

简介: SCSS随笔-mixin与@extend

变量

定义变量

$color-white: white;

使用变量

body {
    background-color: $color-white;
}

@mixin 与 @include

定义mixin

/*声明mixins*/
@mixins border {
    border: 1px solid #red;
}

使用mixin

/*使用mixins*/
.my-div {
    @include border;
}

向mixin传递变量

混入可以接收参数。

我们可以向混入传递变量。

定义可以接收参数的混入:

/* 混入接收两个参数 */
@mixin bordered($color, $width) {
  border: $width solid $color;
}
.myArticle {
  @include bordered(blue, 1px);  // 调用混入,并传递两个参数
}
.myNotes {
  @include bordered(red, 2px); // 调用混入,并传递两个参数
}

以上实例的混入参数为设置边框的属性 (color 和 width) 。

将以上代码转换为 CSS 代码,如下所示:

.myArticle {
  border: 1px solid blue;
}
.myNotes {
  border: 2px solid red;
}

可变参数

有时,不能确定一个混入(mixin)或者一个函数(function)使用多少个参数,这时我们就可以使用 ... 来设置可变参数。

例如,用于创建盒子阴影(box-shadow)的一个混入(mixin)可以采取任何数量的 box-shadow 作为参数。

@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

编译后的css代码

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

@extend 与 继承

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。

如果一个样式与另外一个样式几乎相同,只有少量的区别,则使用 @extend 就显得很有用。

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  @extend .button-basic;
  background-color: red;
}
.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

编译后的css代码

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  background-color: red;
}
.button-submit  {
  background-color: green;
  color: white;
}

使用 @extend 后,我们在 HTML 按钮标签中就不需要指定多个类 class="button-basic button-report" ,只需要设置 class="button-report" 类就好了。

@extend 很好的体现了代码的复用。


相关文章
|
7月前
|
JavaScript
Vue中的mixins和extend的区别是什么?
Vue中的mixins和extend的区别是什么?
104 0
|
7月前
|
JavaScript 开发者
vue 中 mixin 和 mixins 区别
vue 中 mixin 和 mixins 区别
92 0
|
2月前
|
JavaScript
Vue 中mixin 的用法
【10月更文挑战第18天】Vue 中mixin 的用法
33 3
|
2月前
|
缓存 JavaScript Java
vue2知识点:混入mixins
vue2知识点:混入mixins
34 4
|
7月前
|
JavaScript 前端开发
Vue中mixins的作用是什么?有什么注意事项?
Vue中mixins的作用是什么?有什么注意事项?
53 3
|
7月前
|
JavaScript
Vue中的mixin和extend有什么区别?
Vue中的mixin和extend有什么区别?
125 0
|
7月前
【Vue2.0学习】—mixin混入(五十五)
【Vue2.0学习】—mixin混入(五十五)
【Vue2.0学习】—mixin混入(五十五)
|
7月前
|
JavaScript 小程序 前端开发
vue中的mixins混入使用方法
vue中的mixins混入使用方法
|
JavaScript 前端开发
vue中mixins的使用方法和注意点
vue中mixins的使用方法和注意点