Less 的语法和 Sass 有不少相同之处,包括”嵌套”,”Mixin”,”变量”等
-
安装
# npm全局安装sass, 这样在其他项目里,也能直接调用,不需要重新安装 npm install -g sass # 查看版本,确定安装成功 sass --version # 基本使用 # 保存main.scss,将其编译为普通样式 sass ./src/css/main.scss ./src/css/main.css
-
变量
/* 语法是"$+变量名" */ /* 定义了themeColor变量 */ $themeColor: #ff5100; /* 使用 */ .tutor { background-color: $themeColor; } /* 对比less:*/ @themeColor: #ff5100; /* 使用 */ .tutor { background-color: @themeColor; }
-
嵌套
同html的标签嵌套那样:
.app-container { width: 37.5rem; /* & 表示当前父级,类似于JS的this:.app-container */ & > header { height: 5rem; opacity: 0.8; } .logo { width: 5rem; height: 1.38rem; } } /*对比less:相同 */
-
混入(
mixin
)即相当于是JS的函数。
将公共的样式抽离出来变成一个
mixin
,然后使用@use
该mixin
第一步,定义mixin:
/* 定义mixin ; 比如要将绝对定位的代码抽离出来 */ /* 其中参数是变量,可以设置默认值 */ @mixin absolutePosition($top:1rem, $right) { position: absolute; top: $top; right: $right; } /* 对比less:*/ rounded-corners (@radius: 5px) { border-radius: @radius; }
第二步:在的样式中,通过@include来使用mixin:
span { display: inline-block; z-index: 2; /* 使用absolutePosition,传入实际参数 */ @include absolutePosition(-3.2rem, 0); } /* 对比less: */ #header { rounded-corners(10px); }
-
继承(
@extend
)可以通过@extend直接继承。
第一步:比如有如下样式需要被继承,而不是单独复制一遍到需要的地方:
.tutor { background-color: red; }
第二步:使用,哪里要用,就在哪里通过
@extend
继承.order { /*继承 */ @extend .tutor; /*下面是.order中自己的样式*/ color: #111111; }
-
模块
相当于是css的import语法,即在A.scss中导入B.scss.因为容易与css的@import混淆,所以才用
use
语法。在
main.scss
中引入base.scss
,语法为@use
第一步:在
main.scss
中通过命名空间导入或整体导入// 把变量和@mixin, header样式等抽离; 模块化引入 @use "base"; // 创建一个 base 命名空间 @use "../../node_modules/reset-css/sass/reset"; // 整体引入reset,初始化样式
第二步:使用命名
空间.属性名
来使用.banner-container { background-color: #242345; border-top: 2px solid base.$themeColor; //使用base中的变量:$themeColor } h1 { @include base.fontSet(2.4rem, 600); //使用base中的mixin }
-
注释
标准的 CSS 注释 / comment / ,会保留到编译后的文件
单行注释 // comment,只保留在 scss 文件中,编译到 css 文件后,会被省略
重要注释:在/后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注*/**! 这是重要注释!即使压缩了样式,也会保留 */
-
计算
在 css 样式文件里,我们可以直接进行某些样式值的计算
@use "sass:math"; // 引入sass内置的math模块 width: math.div(600, 960) * 100%;
还原设计稿的时候,有些计算起来比较麻烦的值,就不用自己先计算出来了
-
其他 Sass 特性
Sass 还有很多其他的功能,包括丰富的内置函数(颜色函数等)、允许用户自定义函数等,感兴趣的自己拓展.
相关资源:Sass官网