sass 常用语法一览
在我们日常开发中,使用 less/sass 提供的层级样式方便于代码的编写,甚至我们可以使用 sass 中的一些函数来完成一个简单的 css 库来供我们复用 css 代码,这里我会仿照 tailwindcss 来写一些公共代码。我相信,有了这个基础,我们可以对 sass 有更加深入的了解。
安装
使用 yarn 安装
1 | yarn add sass -D |
使用 npm 安装
1 | npm i sass -D |
使用 pnpm 安装
1 | pnpm i sass -D |
变量
sass 的变量都是使用 $
开始,以 ;
结束
1 | // 申明单个值 |
或者我们可以在一个变量中用另一个变量
下面两种的写法是等效的
1 | $border-color: map-get($colors, "primary"); |
注释
scss 支持单行注释,使用单行注释后,在编译好的文件中不会包含备注内容。想要在编译后的 css 中显示注释的话需要使用 css 原本支持的注释方法/**/
循环
使用一组已有的数据
1 | @each $colorKey, $color in $colors { |
生成的 css 代码
1 | .text-white { |
使用一组未定义的数据
1 | @each $var in (left, center, right) { |
生成的代码
1 | .text-left { |