Scss混合宏的不足之处是会生成冗余的代码块。
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}
.box {
@include border-radius;
marg...
yekong
3年前 (2021-08-18)
喜欢
Scss混合宏可以传多个参数
@mixin center($width,$height){
width: $width;
height: $height;
position: absolute;
top: 50%;
left: 50%;
margin-to...
yekong
3年前 (2021-08-18)
喜欢
@mixin border-radius($radius:3px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
调用默认值
.btn {
@include border-radius;
}
...
yekong
3年前 (2021-08-18)
喜欢
@mixin border-radius($radius){
-webkit-border-radius: $radius;
border-radius: $radius;
}
调用传值
.box {
@include border-radius(3px);
}
...
yekong
3年前 (2021-08-18)
喜欢
在 Scss 中通过 @mixin 关键词声明了一个混合宏，配合一个关键词“@include”来调用声明好的混合宏。例如在你的样式中定义了一个圆角的混合宏“border-radius”:
@mixin border-radius{
-webkit-border-radiu...
yekong
3年前 (2021-08-18)
喜欢
如果你的整个网站中有几处小样式类似，比如颜色，字体等，在 Scss 可以使用变量来统一处理，那么这种选择还是不错的。但当你的样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达到我们目了。这个时候 Scss 中的混合宏就会变得非常有意义。
声明混合宏
不带参数混合宏：
...
yekong
3年前 (2021-08-18)
喜欢
Sass 中还提供了选择器嵌套功能，但这也并不意味着你在 Sass 中的嵌套是无节制的，因为你嵌套的层级越深，编译出来的 CSS 代码的选择器层级将越深，这往往是大家不愿意看到的一点。这个特性现在正被众多开发者滥用。
选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全...
yekong
3年前 (2021-08-18)
喜欢
Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了：
.box {
border-top: 1px solid...
yekong
3年前 (2021-08-18)
喜欢
其实伪类嵌套和属性嵌套非常类似，只不过他需要借助&符号一起配合使用。我们就拿经典的“clearfix”为例吧：
.clearfix{
&:before,
&:after {
content:"";
display: ta...
yekong
3年前 (2021-08-18)
喜欢
假设我们有一段这样的结构：
<header>
<nav>
<a href=“##”>Home</a>
<a href=“##”>About</a>
<a href=“##”>...
yekong
3年前 (2021-08-18)
喜欢
