Sass @mixin 与 @include

Posted ckmouse

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Sass @mixin 与 @include相关的知识,希望对你有一定的参考价值。

Sass @mixin 与 @include

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。

@include 指令可以将混入(mixin)引入到文档中。

 

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

  

.danger {
  @include important-text;
  background-color: green;
}

  

向混入传递变量

 

/* 混入接收两个参数 */
@mixin bordered($color, $width) {
  border: $width solid $color;
}

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

.myNotes {
  @include bordered(red, 2px); // 调用混入,并传递两个参数
}

  

以上是关于Sass @mixin 与 @include的主要内容,如果未能解决你的问题,请参考以下文章

sass的mixin,extend,placeholder,function

scss Sass-mixins-for-vendor-prefixed transition-including-properties

在 Sass 中使用 @include 与 @extend?

SASS混入

SASS 和 Bootstrap - mixins 与 @extend

SASS 和 Bootstrap - mixins 与 @extend