node-sass 的安装和使用
来源:互联网 发布:淘宝可爱耳钉店铺推荐 编辑:程序博客网 时间:2024/05/19 18:17
安装
npm install node-sass -g
安装慢的话 可以考虑淘宝镜像
安装成功:
node-sass -vnode-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 停止编译。
阅读全文
8 0
- node-sass 的安装和使用
- SASS的安装和使用
- win下(ide:atom)node-sass的安装和编译
- 使用npm安装node-sass时报错
- 关于npm和yarn安装node-sass失败并且依旧想使用NPM或者yarn的完美解决方案
- node-sass 安装失败的解决措施
- 解决node-sass安装失败的问题
- node-sass 安装失败的解决措施
- 安装node-sass遇到的问题
- 安装 node-sass 的正确姿势
- node-sass 安装失败的解决措施
- 安装node-sass的正确姿势
- Node-SASS安装
- node-sass安装
- node-sass安装问题
- Sass&Compass安装和使用
- sass、less和stylus的安装使用和入门实践
- sass、less和stylus的安装使用和入门实践
- [SMOJ1989]圆括号
- C语言接口实现弗洛伊德算法
- Java异常处理基础
- 查看jvm内存使用命令
- bootstrap系列之十七缩略图和警告框
- node-sass 的安装和使用
- 怎样抓住机会
- 编译时间太长?跟我学对症下药!
- pandas官方文档cookbook(5)中MissValue&groupby翻译
- 生成随机唯一数
- Android back按键基础开发
- getOrDefault,putIfAbsent,replace--JDK1.8HashMap新特性
- HDU 2713 DP
- linux网络编程--TCP分包 粘包 MTU 和MSS之间的关系分析