scss-混合@mixin @include @function

@mixin定义
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
1
2
3
4
5
6
7
8
父选择器

@mixin clearfix {
display: inline-block;
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html & { height: 1px }
}
1
2
3
4
5
6
7
8
9
10
11
混合多个

@mixin compound {
@include highlighted-background;
@include header-text;
}
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }
1
2
3
4
5
6
@include 引入
page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
1
2
3
4
5
参数混合引入（可设置默认值）

@mixin sexy-border($color, $ 1in) {
border: {
color: $color;
$width;
style: dashed;
}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
1
2
3
4
5
6
7
8
9
不确定参数个数，在参数后加 ...

@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);
}
/*编译后*/
.shadowed {
-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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
定义数组数值，传入数组作为多个参数，传入参数加...

@mixin colors($text, $background, $border) {
color: $text;
background-color: $background;
border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
@include colors($values...);
}
1
2
3
4
5
6
7
8
9
标题@content在@mixin中插入内容
将需要插入内容的位置用@content代替

@mixin apply-to-ie6-only {
* html {
@content;
}
}
@include apply-to-ie6-only {
#logo {
background-image: url(/logo.gif);
}
}
/*编译后*/
* html #logo {
background-image: url(/logo.gif);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
为便于书写，@mixin 可以用 = 表示，而 @include 可以用+表示

=apply-to-ie6-only
* html
@content

+apply-to-ie6-only
#logo
background-image: url(/logo.gif)
1
2
3
4
5
6
7
插入时的变量命名空间，使用时，插入的内容不能拿到mix内部的变量，而是同级以上的才可以取到

$color: white;
@mixin colors($color: blue) {
background-color: $color;
@content;
border-color: $color;
}
.colors {
@include colors { color: $color; }
/*此处的$color 是取的全局的white*/
}
/*编译后*/
.colors {
background-color: blue;
color: white;
border-color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@function
函数声明用@function ，一个函数可以含有多条语句，需要调用 @return 输出结果。

$grid- 40px;
$gutter- 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { grid-width(5); }

原文链接：https://blog.csdn.net/weixin_40054326/article/details/103061864