$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties {
#{$prop}-#{$side}: $value;
}
...
4年前 (2021-08-18)
喜欢
Scss 中的占位符 %placeholder 功能
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。只有通过 @ex...
4年前 (2021-08-18)
喜欢
在 Scss 中是通过关键词 “@extend”来继承已存在的类样式块
//SCSS
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
back...
4年前 (2021-08-18)
喜欢
Scss混合宏的不足之处是会生成冗余的代码块。
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}
.box {
@include border-radius;
marg...
4年前 (2021-08-18)
喜欢
Scss混合宏可以传多个参数
@mixin center($width,$height){
width: $width;
height: $height;
position: absolute;
top: 50%;
left: 50%;
margin-to...
4年前 (2021-08-18)
喜欢
@mixin border-radius($radius:3px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
调用默认值
.btn {
@include border-radius;
}
...
4年前 (2021-08-18)
喜欢
@mixin border-radius($radius){
-webkit-border-radius: $radius;
border-radius: $radius;
}
调用传值
.box {
@include border-radius(3px);
}
...
4年前 (2021-08-18)
喜欢
在 Scss 中通过 @mixin 关键词声明了一个混合宏，配合一个关键词“@include”来调用声明好的混合宏。例如在你的样式中定义了一个圆角的混合宏“border-radius”:
@mixin border-radius{
-webkit-border-radiu...
4年前 (2021-08-18)
喜欢
如果你的整个网站中有几处小样式类似，比如颜色，字体等，在 Scss 可以使用变量来统一处理，那么这种选择还是不错的。但当你的样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达到我们目了。这个时候 Scss 中的混合宏就会变得非常有意义。
声明混合宏
不带参数混合宏：
...
4年前 (2021-08-18)
喜欢
Sass 中还提供了选择器嵌套功能，但这也并不意味着你在 Sass 中的嵌套是无节制的，因为你嵌套的层级越深，编译出来的 CSS 代码的选择器层级将越深，这往往是大家不愿意看到的一点。这个特性现在正被众多开发者滥用。
选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全...
4年前 (2021-08-18)
喜欢
