前言
前端工程化的今天,开发过程中,原生css
的功能已经略显单薄,比如它不支持循环、判断、拼接
等语法,不支持自定义函数
。于是css预编译器应用而生,例如:sass、less、stylus
,我们结合css预编译器sass来了解前端工程化中css的相关内容。
一、初识sass
1.什么是sass
众所周知css
并不能算是一们真正意义上的编程语言
,它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量
等工作。为了解决css的不足,开发者们想到了编写一种对css
进行预处理
的“中间语言”
,可以实现一些“编程”语言才有的功能,然后自动编译成css
供浏览识别,这样既一定程度上弥补了css的不足,也无需一种新的语言来代替css以供浏览器识别。于是css预处理语言SASS
就应运而生了。
2.sass部分语法介绍
- 变量创建
——语法与css比较类似,关键点在于sass变量必须以“$”符开头。为什么用“$”?因为它好认、更具美感。是的,没人不喜欢dollar。💕$color: #F90; nav { color: $color; width:100%; height:70px; }
- 样式嵌套
——编写css时,为了选中某个元素的后代元素,我们常会将其选择器书写多遍:
sass允许以.view p{ } .view p span{ } .view:hover{ }
嵌套形式
书写样式代码,减少重复书写
,增加可读性
。我们来用sass优化上面的css代码:.view { p { span { } } &:hover { }//&符号等价于父级选择器的表示符,在书写伪类样式时常用 }
- 循环
——利用@for
指令可以在限制的范围内重复输出格式,减少代码的重复书写:@for $i from 1 through 3 { .item-#{ $i} { width: 10px * $i; } } //上面的代码将被编译为 .item-1 { width: 10px; } .item-2 { width: 20px; } .item-3 { width: 30px; } /*# sourceMappingURL=a.css.map */
- ……
3.简单使用sass
-
安装sass
控制台执行:npm install -D sass
-
创建
a.scss
文件写入如下代码:$bgColor:#f40; body{ background-color: $bgColor; }
-
编译为css
控制台执行:npx sass a.scss a.css
此时代码目录里已经自动创建出了
a.css
,它的内容如下: