@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)
喜欢
Sass 中变量的作用域在过去几年已经发生了一些改变。直到最近，规则集和其他范围内声明变量的作用域才默认为本地。如果已经存在同名的全局变量，从 3.4 版本开始，Sass 已经可以正确处理作用域的概念，并通过创建一个新的局部变量来代替。
//SCSS
$color: orange...
yekong
3年前 (2021-08-18)
喜欢
在 Scss 中声明了变量之后，就可以在需要的地方调用变量。调用变量的方法也非常的简单。
$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7
$btn-primary-color: #fff !default;
...
yekong
3年前 (2021-08-18)
喜欢
scss普通变量
$fontSize: 14px;
body{
font-size:$fontSize;
}
编译后的css代码：
body{
font-size:12px;
}
scss默认变量
scss 的默认变量仅需要在值后面加上 !default 即可...
yekong
3年前 (2021-08-18)
喜欢
