scss编译方法

/ 0评 / 0

 

编译

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 达人能告诉我这是为什么吗?)

 

摘自:https://github.com/FrankFang/githublog/blob/master/%E6%8A%80%E6%9C%AF/SCSS%20%E4%B8%80%E7%AB%99%E5%BC%8F%E5%85%A5%E9%97%A8.md

 

WebStorm配置方案

NewImage

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注