这是我参与11月更文挑战的第4天,活动详情查看:2021最后一次更文挑战
写在前面
scss 是日常应用非常多的 css 预处理工具,但部分小伙伴只做简单嵌套使用,这么完全是浪费,真正用好工具才能提升开发效率,下面记录一下日常常用的 scss 用法。
嵌套
对,提一下嵌套。除了常见的
.a{.b {...}}
等价 .a .b {...}
。
还有一些其他常见情况:
.c1 {
color: #555;
// 1 属性
font: {
weight: 800;
}
// 2 .c1:hover
&:hover {
color: rgb(177, 116, 25);
}
// 3 .c1-bro 不是.c1 .c1-bro; 除法记得加括号
&-bro {
height: (100px / 2);
background: brown;
}
}
上述代码分别对应: .c1 {font-weight: 800;}、.c1:hover{...}、c1同级的 .c1-bro {...}
变量
可以把常用的属性值(字体大小、内外边距、颜色)定义为变量并且给任意类型的默认值。
变量声明:$headings-color: green;
变量使用:color: $headings-color;
多次定义同名变量会优先使用当前局部作用域内之前定义的变量值。
$fs: 16px;
.c2 {
// 1
font-size: $fs;
$fs: 18px;
.c21 {
// 2
font-size: $fs;
}
$fs: 20px;
}
上述代码分别对应 16px、18px
$fs: 18px!default;
// 前文没有定义该变量,那就取这个值了
$fs: 18px!gloabal;
// 某处全局覆盖某变量的值,强烈不建议你这么干。。
还有一种类似的写法不单独列一项了:
$fsN: 16;
.fs {
&-#{$fsN} {
font-size: #{$fsN}px;
}
}
即:.fs-16: font-size: 16px; 注意 #
mixin
主要是实现【某一块样式代码】的复用,还可以接受对应参数作为属性值变量(有点像函数, 但更像模板)
mixin 定义:@mixin fc($c: #555) {color: $c;}
mixin 使用:.c3 { @include fc(#f00);}
编译的结果是: .c3 { color: #f00; }
为了更好的实现效果可以用指令加入相关判断和循环的逻辑:
@if @else @else if 条件判断,没啥好说的
@for
用法如下:
@for $item from 1 through 5 {
.pl-#{$item} {
padding-left-#{$item * 8} : $item * 8px ;
}
}
from to 不含末位,from through 包含末位
@while
用法如下:
@while $limit < 5 {.font-size-#{$limit} {...} $limit: $limit + 1}
@each
用法如下: @each $item in $list { .XX-#{$item} {...}}
其实不太用
function
scss 默认有提供一堆各种处理的函数。这里指的是自定义函数。主要是用来处理返回属性的【值】。
function 定义:
@function f1($c: #555) { @return $c; } @function f2($background...) { @return $background; }
function 使用:
.c40 { color: f1(#f00); background: f2(#00FF00 url(bgimage.gif) no-repeat fixed top); }
ok,个人基本常用的就在这里了。如果你有更多想法,欢迎留言!!!😀😀😀