关于scss

本文最后更新于:2022年8月18日 凌晨

css、sass和scss

简单来说,css是最基本的写前端样式的语言。

而sass是一种css的预处理器,sass可以通过编译生成css文件,通过提供一系列简洁的语法,用于快捷的开发css。

有两种可以用于书写sass的语法,一种是最常用的scss语法、通常以.scss后缀,而另一种是缩进语法,常用.sass后缀。

其中最常用的就是scss语法,因为其完美兼容原生css语法。

三者语法上的区别如下:[1]

scss的基本使用

以下许多例子来源于SASS用法指南 - 阮一峰的网络日志 (ruanyifeng.com)

本人对部分例子作了demo和官网的补充.

1 | 变量定义与使用

使用$定义和直接引用变量, 放入字符串中使用#{}包裹

1
2
3
4
5
6
7
8
9
10
11
$side: left;

.rounded {
border-#{$side}-radius: 5px;
}

$blue: #1875e7; 

div {
color: $blue;
}

2 | 继承与占位符%

使用@extend继承

1
2
3
4
5
.class2 {
@extend .class1;
font-size:120%;
// more
}

占位符

任何用%标注的是占位符, 占位符不属于任何类名, 但是仍可以被继承, 好处是不会造成类名污染.

一个来自官方的例子:

3 | mixin@include

mixin用于生成可重用的代码块, 并支持参数和默认值

@include用于引入mixin

1
2
3
4
5
6
7
8
9
10
11
12
13
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
// usage of mixin
div {
@include left(20px);
}
// same as
div {
float: left;
margin-right: 20px;
}

4 | 颜色函数

用于简单调整颜色: 传递给每个关键字参数的值添加到颜色的相应属性中,并返回调整后的颜色

常见的颜色函数与用法:

1
2
3
4
lighten(#cc3, 10%) // 更亮
darken(#cc3, 10%) // 更暗
grayscale(#cc3) // 灰阶
complement(#cc3) // 互补

更多信息参考官方文档: Sass: sass:color (sass-lang.com)

demo:

scss:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$default-color: rgb(199, 84, 80);
$sel: color;

.#{$sel} {
background-color: $default-color;
&-darken {
background-color: darken($default-color, 10%);
}
&-lighten {
background-color: lighten($default-color, 20%);
}
&-grayscale {
background-color: grayscale($default-color);
}
&-complement {
background-color: complement($default-color);
}
}

html: (p-xx是使用了PrimeFlex (primefaces.org))

1
2
3
4
5
6
7
8
9
10
<div class="p-grid p-mt-5">
<div class="color p-col-2">color</div>
<div class="color-darken p-col-2">darken(color, 10%);</div>
<div class="color-lighten p-col-2">lighten(color, 20%);</div>
</div>

<div class="p-grid p-mt-5">
<div class="color-grayscale p-col-2">grayscale</div>
<div class="color-complement p-col-2">complement</div>
</div>

一般项目中最常用的就是darken和lighten, 如表示focus状态或者disabled状态. 其他都是花里胡哨的..

5 | 条件和循环

@if @else

1
2
3
4
5
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}

@for

1
2
3
4
5
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}

6 | @function

可以使用@function写一个自定义的函数

1
2
3
4
5
6
7
@function double($n) {
@return $n * 2;
}

#sidebar {
width: double(5px);
}

7 | 嵌套和引用父元素&

可以使用&来引用父元素, 并且scss支持嵌套

嵌套选择器

1
2
3
4
5
div {
hi {
color:red;
}
}

嵌套属性

注意需要加:

1
2
3
4
5
6
p {
border: {
color: red;
}
}
// 表示p标签下元素的border-color属性

嵌套类

1
2
3
4
5
.class1 {
.class2 {
// ..
}
}

类前缀

继续引用一个官方的例子…

这里注意, 类前缀不会继承前缀下的样式, 具体如下图, 可以看到.accordion__copy.accordion__copy--open不会继承.accordion下的样式.

碎碎念

想到系统的补一下这方面的知识也是看到实验室某学长的写法, 才发现一个好的工具确实可以使效率事半功倍, 下面改几个项目的常用例子来展示下scss的优势.

styled-badge

html:

1
2
3
4
5
<div class="p-mt-5">
<span class="badge-success">success</span>
<span class="badge-fail">fail</span>
<span class="badge-pending">pending</span>
</div>

scss:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
badge {
border-radius: var(--border-radius);
padding: .25em .5rem .25em .5rem;
margin: 0 1em 0 1em;
font-weight: 700;
font-size: 12px;
letter-spacing: .3px;
}

.badge {
&-success {
@extend %badge;
background: #C8E6C9;
color: #256029;
}

&-fail {
@extend %badge;
background: #FFCDD2;
color: #C63737;
}

&-pending {
@extend %badge;
background: #FEEDAF;
color: #8A5340;
}
}

效果:

ref


关于scss
https://blog.roccoshi.top/posts/30042/
作者
RoccoShi
发布于
2022年5月3日
许可协议