目录
一、@mixin
1、定义复用的样式代码,接受传参,搭配@include使用。
位置传参
关键词传参
...语法糖接受传入的任意参数
2、在@mixin中使用@content,获取外部对mixin的追加内容
二、@function
三、字符串——值得注意的点
很多时候,我们在写样式的时候,会发现在同一套样式主题下,许多样式代码会被重复使用。在原生的css中,我们只能通过class和选择器的组合来尽量使得样式代码简洁。
在sass中,除了选择器的嵌套语法外,其提供的@mixin和@function可以实现高能的代码复用
接下来我们详细学习两者的使用。
一、@mixin
1、定义复用的样式代码,接受传参,搭配@include使用。
在下面的例子中,mixin中使用了 & 代替父选择器。而这个 & 指向的是@include样式引入所在位置的父选择器!
但mixin中的参数声明时,使用了默认赋值,则其会变成可选参数,外面使用该mixin时设置了默认值的参数可不必要传入新的值
@mixin testStyle ($property,$value:2px , $color:#000) {
//....
}
.outer {
@include testStyle(font,3px)
}
mixin传参可接受的方式有 位置传参、关键词传参 以及 用...语法糖接受传入的任意参数组成列表
-
位置传参
位置传参即如上所示,按照位置顺序一一传入相应的参数
-
关键词传参
关键词传参,是在传入参数前,指定此时传入的参数对应的是哪个
@mixin testStyle ($property,$value:2px , $color:#000) {
//....
}
.outer {
@include testStyle(font,$color: #fff)
}
这种传参更加安全,尤其是在定义了默认可选参数时,传参可以不必拘泥于位置,而是直接通过关键词锁定。
-
...语法糖接受传入的任意参数
语法糖传入后,mixin中的args变成一个参数列表。注意,...跟在后面!
@mixin order($height, $selectors...) {
@for $i from 0 to length($selectors) {
#{nth($selectors, $i + 1)} {
position: absolute;
height: $height;
margin-top: $i * $height;
}
}
}
@include order(150px, "input.name", "input.address", "input.zip");
如果想将参数列表以 map 的形式访问,可以同时获取参数列表中的 key和value,可以用 meta.keywords()对参数列表进行转换。 示例如下:
//导入内置的meta
@use "sass:meta";
@mixin colors-customize($args...) {
//用@debug控制台输出其返回值
@debug meta.keywords($args);
//输出: (string: #080, comment: #800, variable: #60b)
//用each遍历map的key和value
@each $name,$color in meta.keywords($args) {
div span.color-#{$name}{
color: $color;
}
}
}
//引入mixin中定义的样式
@include colors-customize (
$string: #080,
$comment: #800,
$variable: #60b,
)
2、在@mixin中使用@content,获取外部对mixin的追加内容
使用方法如下代码:
//写一段媒体查询的样式
@mixin media-query($types...) {
@each $type in $types {
//css语法中的@media媒体查询方法
@media #{$type} {
//外部内容块中使用了该作用域内定义的变量
@content($type);
}
}
}
//用using引入变量
@include media-query(screen,print) using ($type) {
h1{
font-size: 40px;
@if $type == print {
font-family: Calluna;
}
}
}
二、@function
@function与@mixin不同的点在于:
- @function不会直接被引用函数体内的内容,而是经过函数内部的计算,用@return返回需要使用的变量值
- @function不需要借助@include,可以在声明后直接调用
@function也可以位置传参、关键词传参、默认值可选参数、接收参数列表等。因此这里仅仅对其使用举个示例:
除了自定义的函数外,sass提供一些内置函数,可被直接调用例如:var()、rgb()、radial-gradient(#f2ece4,#e1d7d2)等等 。
所有的内置模块以及内置全局函数,可查见于:Sass: Built-In Modules
三、字符串——值得注意的点
一般情况下,sass中符合scss语法的值,即使是字符串都不含有引号,作为关键字/标识直接使用。
但其实scss既支持有引号的字符串解析,又支持无引号的字符串,只是应用场景不同
两者的互换可以用内置模块string提供的unquote和quote函数来实现。
@use "sass:string";
@debug string.unquote(".widget:hover"); // .widget:hover
@debug string.quote(bold); // "bold"
另外,在#{ }传入变量时,变量中的字符串引号会被自动去掉。但不建议使用该方法去除字符串引号!
如果要保留引号,则直接传递即可: