node-sass 的安装和使用
node-sass
:rainbow: Node.js bindings to libsass
项目地址:https://gitcode.com/gh_mirrors/no/node-sass
免费下载资源
·
安装
npm install node-sass -g
安装慢的话 可以考虑淘宝镜像
安装成功:
node-sass -v
node-sass 4.5.3 (Wrapper) [JavaScript]
libsass 3.5.0.beta.2 (Sass Compiler) [C/C++]
使用
变量
sass 变量用于存储一些常用的颜色,数值等,一个变量可以在多处使用,修改时只需要修改一处
SCSS
$color-primary: #0070e9;
a {
color: $color-primary;
}
.btn-primary {
background-color: $color-primary;
}
CSS
a {
color: #0070e9;
}
.btn-primary {
background-color: #0070e9;
}
嵌套
Sass 允许嵌套规则,使 CSS 更易于维护。
SCSS
.header {
height: 60px;
.navbar {
display: flex;
> li {
flex: 1;
a {
dislay: block;
font-size: 18px;
}
}
}
}
CSS
.header {
height: 60px;
}
.header .navbar {
display: flex;
}
.header .navbar > li {
flex: 1;
}
.header .navbar > li a {
dislay: block;
font-size: 18px;
}
⚠️ 尽量控制嵌套数在 4 层以内。
& 引用
Sass 提供了 & 用于引用父选择器。
SCSS
a {
color: #555;
&:hover {
color: #333;
}
&:active {
color: #444;
}
}
CSS
a {
color: #555;
}
a:hover {
color: #333;
}
a:active {
color: #444;
}
@import
Sass 的 @import 指令用于导入其他样式模块。
假设现有 _variables.scss _buttons.scss _forms.scss 三个模块,可以通过一个 main.scss 导入这些模块。
// main.scss
@import "variables";
@import "buttons";
@import "forms";
子模块文件前面的下划线用于告知 Sass 编译器不要把这个模块编译成单独的 CSS 文件。
嵌套 @import
Sass 的 @import 指令可以嵌套在选择器内,产生嵌套效果。
SCSS
@import "variables";
@import "mixins";
.slamdunk {
min-width: 320px;
@import "navbar";
@import "content";
@import "players";
}
⚠️ CSS 也有 @import,在 IE 6-8 上会导致多个 CSS 文件不能同时下载的情况,影响网页性能。
运算
Sass 支持对数字标准的算术运算(加法 +,减法 - ,乘法 *,除法 / 和取模 %) 并保留单位。
由于 CSS 中 / 可作为分隔符,因此除法运算要稍微注意以下情况。
p {
font: 10px/8px; // 原生的CSS,不作为除法
$width: 1000px;
width: $width/2; // 使用了变量, 作为除法
width: round(1.5)/2; // 使用了函数, 作为除法
height: (500px/2); // 使用了括号, 作为除法
margin-left: 5px + 8px/2px; // 使用了 +, 作为除法
font: (italic bold 10px/8px); // 在一个列表(list)中,括号可以被忽略。
}
CSS
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px;
}
注释
单行注释 // 会在 .scss 被编译成 .css 后移除。
SCSS
// Header
.header {
height: 60px;
}
CSS
.header {
height: 60px;
}
多行注释 /* */ 会在 .scss 被编译成 .css 后保留。
编译
假设项目目录下有 css 和 scss 文件夹,运行以下命令会持续观察文件变化并即时编译。
$ node-sass --watch --recursive --output css scss
以下命令具有同等功能,而且更短。
$ node-sass -wro css scss
在终端按 Control + C 停止编译。
GitHub 加速计划 / no / node-sass
8.5 K
1.33 K
下载
:rainbow: Node.js bindings to libsass
最近提交(Master分支:2 个月前 )
6081731a
Bumps [actions/setup-node](https://github.com/actions/setup-node) from 3 to 4.
- [Release notes](https://github.com/actions/setup-node/releases)
- [Commits](https://github.com/actions/setup-node/compare/v3...v4)
---
updated-dependencies:
- dependency-name: actions/setup-node
dependency-type: direct:production
update-type: version-update:semver-major
...
Signed-off-by: dependabot[bot] <support@github.com> 9 个月前
62c0f46c
Bumps [actions/checkout](https://github.com/actions/checkout) from 3 to 4.
- [Release notes](https://github.com/actions/checkout/releases)
- [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md)
- [Commits](https://github.com/actions/checkout/compare/v3...v4)
---
updated-dependencies:
- dependency-name: actions/checkout
dependency-type: direct:production
update-type: version-update:semver-major
...
Signed-off-by: dependabot[bot] <support@github.com> 9 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)