SCSS
SCSS（Sassy CSS）是 Sass 的一种语法,是一种扩展的 CSS 预处理器语言。SCSS 提供了许多强大的功能,使得编写 CSS 更加高效、可维护和模块化。
注释
$ 变量
在 scss 中,变量使用 $ 作为前缀来定义,用于存储可重用的值,例如颜色、字体大小、间距等。例如：
1$color: #007bff; // 定义变量
2.bg {
3 background-color: $color; // 使用变量
4}
私有变量
开发者会在变量名前加下划线（_ 或 -）来表示该变量是内部使用的,建议不在其他模块中使用。
1$-radius: 3px;
2// 或
3$_radius: 3px;
-- 自定义属性
自定义属性通常在选择器中使用 -- 前缀进行定义,并且可以在任何选择器中定义
var() 是用于引用 CSS 自定义属性
1$primary-color: #3498db;
2$font-size: 16px;
3:root {
4 --primary-color: #{$primary-color};
5 --font-size: #{$font-size};
6}
7body {
8 color: var(--primary-color);
9 font-size: var(--font-size);
10}
#{} 字符串插值
在 SCSS 中,#{} 是一种字符串插值语法,用于将 SCSS 变量的值插入到一个字符串中
1@mixin define-emoji($name, $glyph) {
2 span.emoji-#{$name} {
3 font-family: IconFont;
4 font-variant: normal;
5 font-weight: normal;
6 content: $glyph;
7 }
8}
1@include define-emoji("test")
@mixin 混合宏
在 scss 中,mixin 用于定义可重用的样式块,在定义时不会生成任何 CSS,只有在被调用时才会插入到调用的位置。
- 定义：使用
@mixin 指令来定义一个mixin,可以包含任何css规则,并且可以接受参数。
- 使用：通过
@include 指令来调用 mixin,并传递必要的参数。
1@mixin theme($theme: DarkGray) {
2 background: $theme;
3 box-shadow: 0 0 1px rgba($theme, .25);
4 color: #fff;
5}
1.info {
2 @include theme;
3}
4.alert {
5 @include theme($theme: DarkRed);
6}
:::
& 父选择器
在 SCSS 中,父选择器（&）是一个非常有用的特性,它允许你在嵌套规则中引用父选择器。
1.alert {
2 &:hover {
3 font-weight: bold;
4 }
5}
% 占位符选择器
占位符选择器（%）是一种特殊的选择器,它不会单独出现在编译后的 CSS 中,只有在被 @extend 时才会插入样式。使用占位符选择器可以避免生成冗余的选择器。
1%hidden {
2 visibility: hidden;
3 display: none;
4}
5.element {
6 @extend %hidden;
7}
@extend 继承
在 SCSS 中,扩展和继承是通过 @extend 指令实现的。@extend 允许一个选择器继承另一个选择器的样式规则,从而减少重复代码,提高样式的可维护性和一致性。
@extend 指令用于让一个选择器继承另一个选择器的样式。
1%message-shared {
2 border: 1px solid #ccc;
3 padding: 10px;
4 color: #333;
5}
6.error {
7 @extend %message-shared;
8 border-color: red;
9}
@use 模块
在 scss 中,@use 指令用于引入一个 SCSS 文件,并将其内容放置在一个命名空间下。默认情况下,文件名会作为命名空间。
引入的 SCSS文件一般是以 _ 开头命名的文件,例如 _var.scss。下划线让 Sass 知道该文件只是部分文件,不应将其生成为 CSS 文件。
1// _base.scss
2$font-stack: Helvetica, sans-serif;
3$primary-color: #333;
4body {
5 font: 100% $font-stack;
6 color: $primary-color;
7}
1@use 'base'; // base是 _base.scss 文件的命名空间
2.inverse {
3 background-color: base.$primary-color;
4 color: white;
5}
1@use '/styles/base' as b; // 你也可以使用 as 关键字来自定义命名空间
2.inverse {
3 background-color: b.$primary-color;
4 color: white;
5}
:::
配置共享样式
- 在模块中,使用
!default 标记变量,表示这些变量可以被外部配置覆盖。
- 在需要使用这些变量的文件中,通过
@use 指令引入模块,并使用 with 语法传递新的值。
1// _config.scss
2$primary-color: #3498db !default;
3$font-size: 16px !default;
4// _styles.scss
5@use 'config' with (
6 $primary-color: #e74c3c,
7 $font-size: 18px
8);
9body {
10 color: config.$primary-color;
11 font-size: config.$font-size;
12}
@function 函数
SCSS 允许你定义自己的函数,用于生成动态样式值。
1@function calculate-rem($size) {
2 @return $size / 16px * 1rem;
3}
4body {
5 font-size: calculate-rem(18px);
6}
嵌套
SCSS 允许你嵌套 CSS 选择器,使得样式结构更加清晰和层次化。
1ul {
2 li {
3 margin: 0;
4 padding: 0;
5 }
6}
运算
SCSS 提供了一系列运算符,用于在样式中进行数学运算和字符串操作。
- 数学运算符：
+、-、*、/、%
- 逻辑运算符：
and、or、not
- 比较运算符：
==、!=、<、>、<=、>=
1$base-margin: 10px;
2$extra-margin: 5px;
3.margin {
4 margin: $base-margin + $extra-margin; // 结果为 15px
5}
1$condition-1: true;
2$condition-2: false;
3@if $condition-1 and not $condition-2 {
4 .box {
5 display: block;
6 }
7}
1$width: 100px;
2@if $width > 50px {
3 .wide {
4 width: $width;
5 }
6}
:::
条件
SCSS 中的 @if 指令是一种控制结构,用于根据条件执行不同的样式规则。@if 指令允许你在样式表中使用条件逻辑,从而创建更灵活和动态的样式。
1$theme: dark;
2body {
3 @if $theme == dark {
4 background-color: #333;
5 color: #fff;
6 } @else {
7 background-color: #fff;
8 color: #000;
9 }
10}
循环
@each：用于遍历列表或映射。适合处理一组已知的离散值。@for：用于在固定范围内循环。适合处理连续的数值范围。@while：用于在条件为真时循环。适合处理动态或不确定的循环条件。
@for 循环
@for 指令用于在给定范围内循环遍历,并生成样式。它有两种形式：from ... through 和 from ... to。
from ... through 包括结束值。from ... to 不包括结束值。
1@for $i from 1 through 3 {
2 .col-#{$i} {
3 width: 100% / 3 * $i;
4 }
5}
1@for $i from 1 to 4 {
2 .item-#{$i} {
3 margin-left: 10px * $i;
4 }
5}
:::
@while 循环
@while 指令用于在条件为真时重复执行代码块。它可以用于需要动态条件的循环。
1$i: 1;
2@while $i < 4 {
3 .box-#{$i} {
4 padding: 5px * $i;
5 }
6 $i: $i + 1;
7}
@each 遍循环
在 SCSS 中,@each 指令用于遍历列表或映射,并为每个元素生成样式规则。@each 指令使得处理重复样式和动态生成样式变得更加简单和高效。
1$colors: red, green, blue;
2@each $color in $colors {
3 .text-#{$color} {
4 color: $color;
5 }
6}
1$theme-colors: (
2 primary: #3498db,
3 secondary: #2ecc71,
4 danger: #e74c3c
5);
6@each $name, $color in $theme-colors {
7 .bg-#{$name} {
8 background-color: $color;
9 }
10}
:::
