写在前面:自己平常使用的都是LESS,随着学习的进展,SCSS的重要性越来越大。
学习SCSS可以参考阮一峰的文章,写的很好。
原文链接: 点击跳转
一、SCSS的基本使用
1、在安装完Ruby和并且安装好Scss后,可以在文件根目录创建.scss文件(安装方法自行百度)
2、在index.html中创建一个宽高400px的盒子
3、在scss文件中定义主体颜色,并将主体颜色赋值给box盒子容器
4、在终端输入scss指令后可以发现在根目录新出现了三个文件
将scss文件编译为css文件:
scss style.scss style.css
4、将css文件引入,最终参考效果
5、Tips
在SCSS中,提供两个指令可以实现实时监听源文件的变动,实时生成编辑文件
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
当我们保存了scss文件后,scss可以自动将文件编译为css文件