SASS 执行
首先在专案资料夹下,生成index.html 和两个资料夹css、sass ,然后在sass 下面新增一个style.scss,这支档是我们开发,主要编写样式的档案。
我们现在要试着把sass 资料夹里的style.scss ,编译成浏览器看的懂的.css 副档名型式。
所以下指令把style.scss 档案转译生成style.css,并放置在css 资料夹里,如下:
$ sass sass/style.scss:css/style.css
如果顺利的话,应该会看到「 css 」档案夹里,新增了两个档案,分别是「 style.css 」和「 style.css.map 」,这边比较要留意的是style.css(浏览器主要解读这只档)。
- 需留意「 当前路径」,这会影响到style.scss 档案编译生成style.css 的路径,若不对会报错
- 在index.html 里面,记得引入style.css 档案( style.scss 不需引入),才会有样式出现
若持续有样式需新增,每次一编写完style.scss 就得执行一次 $ sass sass/style. scss :css/style. css
指令,才能在浏览器上看到变化,相信一定会很想撞墙
所以这时可以改下另一个指令(加上 --watch
参数,若原有的style.css / style.css.map 已存在,会自动覆盖,不存在的话会自动生成新的),如下:
$ sass --watch sass/style.scss:css/style.css
执行后,会发现sass 已经开始在监听style.scss ,若这只档案有修改,style.css 变会即时的进行编译,给浏览器做使用,
在开发过程中,一个专案可能不只有一个样式档,假如有多个档案需同时进行监听,这边提供几个方式给大家:
- 重复执行:看有几个档案需监听,就输入几次。
$ sass --watch path/to/filename. scss :path/filename. css
- 一次执行:看有几个档案需监听,一次下指令。
$ sass --watch path/filename1. scss :path/filename1. css path/filename2. scss :path/filename2. css path/filename3. scss :path/filename3. css
- 指定目录下全部监听:监听sass 目录下的sass/scss 档案到指定的css 目录下(下面指令为两个资料夹在同一层)
$ sass --watch sass:css
- 当前目录下全数监听,并直接生成css 档案。
$ sass --watch .
到了这一步,若顺利的话,相信你也学会,如何在编写sass/scss 档案时,指定的css 档案可以同步的进行编译,并让浏览器能够顺利的出现画面。
个人觉的sass 学习比较麻烦的就是安装+执行这个章节,后面就是语法部分,语法就相对简单明了了,原来就有css 开发经验的捧有们,相信也可以很快就入手的
接下来,我们开始前进到语法部分
SASS 提供CSS 语法扩展,如:嵌套功能( N