编译
SCSS 其实是类 CSS 语法的 SASS,而 SASS 又是什么呢?SASS —— Syntactically Awesome Stylesheets,直译为「语法犀利的样式表」。它原本是基于 Ruby 的。
所以要想把写好的 SCSS 变成 CSS,可以借助与 Ruby 的 SASS 编译器。下面我们来看看如何安装。
1.首先当然是安装 Ruby。你可以到 Ruby 的中文主页 下载 Ruby 的 Window 安装器。一直点下一步就可以安装了。
2.然后就可以按照 SASS 官网的教程 来安装 SASS 了。打开命令行(点击「开始」-> 运行 -> 输入 cmd -> 回车),输入gem install sass
。基本上,如果你在公司运行这个命令,一定会看到错误提示。不要紧,这是因为我们没有设置代理,在命令行输入set HTTP_PROXY=http://proxy.tencent.com:8080
即可。然后重新 gem install sass
试试。
3.安装成功后你就可以在命令行输入 sass -v
看看你安装成功没有了。如果你看到类似 Sass 3.2.7 (Media Mark)
的提示就说明成功了!如果不成功的话也许你可以把 Ruby/bin/ 目录加入环境变量 PATH。
4.这一步我们把一个 SCSS 文件编译成一个 CSS 文件。首先在 C 盘新建一个 test.scss 文件,其内容为
.main { color: #000; p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } }
然后再命令行中定位到此文件所在目录,输入
sass test.scss
你会看到它把得到的 CSS 内容直接输入在屏幕上了。如果想把 CSS 内容保存到文件,可以输入
sass test.scss:test.css
当前目录就会新建一个 test.css 文件了。
5.难道没改动一次 SASS 文件都要去运行一次命令行把它变成 CSS 吗?这里有一个监听文件变化的方法
sass --watch test.scss:test.css
这样一来,你每次保存 test.scss 文件时,test.css 文件都会更新。你甚至可以监听一整个目录
sass --watch ./scss/:./css/
那么 scss 目录中的任意一个文件改变时,css 目录中也相应的更新,是不是很方便~
细心的童鞋肯定会发现每次编译时都会多出一个 .sass-cache 目录,很是烦人,你只要在编译时加上 --no-cache
参数即可
sass --watch --no-cache ./scss/:./css/
6.一点点问题。在使用 SCSS 的过程中我发现它居然不支持中文,想来肯定是 Ruby 的设置有问题,最终怎网上找到了解决办法。首先在 Windows 的环境变量中添加 RUBYOPT
变量,值设为 -KU
。然后在你的 SCSS 文件第一行加上@charset "UTF-8";
,再编译就能完美支持中文了。( Ruby 达人能告诉我这是为什么吗?)
WebStorm配置方案