码迷,mamicode.com
首页 > 其他好文 > 详细

Sass @mixin 与 @include

时间:2020-04-24 14:45:49      阅读:68      评论:0      收藏:0      [点我收藏+]

标签:ant   border   使用   sass   一个   指令   text   sharp   定义   

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

标签:ant   border   使用   sass   一个   指令   text   sharp   定义   

原文地址:https://www.cnblogs.com/ckmouse/p/12767142.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!