sass 常用语法 | 月空人

在我们日常开发中，使用 less/sass 提供的层级样式方便于代码的编写，甚至我们可以使用 sass 中的一些函数来完成一个简单的 css 库来供我们复用 css 代码，这里我会仿照 tailwindcss 来写一些公共代码。我相信，有了这个基础，我们可以对 sass 有更加深入的了解。

官方网址

安装

使用 yarn 安装

yarn add sass -D

使用 npm 安装

npm i sass -D

使用 pnpm 安装

pnpm i sass -D

sass 的变量都是使用 $ 开始，以 ; 结束

scss

// 申明单个值
$primary: #22c55e;

// 申明一组值
$colors: (
  "white": #ffffff,
  "primary": #367ee8,
  "primary-light": #e9f0ff,
);

或者我们可以在一个变量中用另一个变量

下面两种的写法是等效的

scss

$border-color: map-get($colors, "primary");
// or
$border-color: map-get(
  $map: $colors,
  $key: "primary",
);

scss 支持单行注释，使用单行注释后，在编译好的文件中不会包含备注内容。想要在编译后的 css 中显示注释的话需要使用 css 原本支持的注释方法/**/

scss

@each $colorKey, $color in $colors {
  .text-#{$colorKey} {
    color: $color;
  }
}

生成的 css 代码

css

.text-white {
  color: #ffffff;
}
.text-primary {
  color: #367ee8;
}
.text-primary-light {
  color: #e9f0ff;
}

scss

@each $var in (left, center, right) {
  .text-#{$var} {
    text-align: $var;
  }
}

生成的代码

css

.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}