如何将scss转换成css文件

html-css012

如何将scss转换成css文件,第1张

如:在D盘建立一个SASS文件夹,文件夹下有一个style.scss文件(scss,sass都行。sass文件对代码的排版有着非常严格的要求,而且没有大括号,没有分号。scss对代码的要求没那么高。)用下面的方法可以将sass或者scss转换为css文件。

首先输出 D: 代表找到D盘 ;

然后输出cd sass 代表找到sass文件夹,其中cd是一定要的;

最后输出 sass>sass --watch style.scss:style.css 在sass文件夹下将style.scss转换为style.css 。sass --watch代表一直监听着style.scss 只要在编辑器上更新了scss就会自动更新style.css 。

Ruby安装

由于sass依赖于ruby环境,所以在安装sass之前必须安装ruby。可以去官网下载一个。网络环境不好的,可以用我提供的这个文件:点击下载

安装完成后可以在开始菜单找到ruby命令行,打开输入ruby -v查看版本号,出现版本信息则安装成功

clipboard.png-6.6kB

QQ截图20160917210342.png-1.6kB

Sass安装

安装完ruby后,可以直接在命令行里面输入gem install sass安装Sass,不过由于墙的厉害,建议使用淘宝的ruby源来安装,步骤如下:

gem sources --remove https://rubygems.org/

https://rubygems.org/ removed from sources

gem sources -a https://ruby.taobao.org/

https://ruby.taobao.org/ added to sources

这一步有可能会出错,windows下证书无法验证。

解决方法:下载证书(右键另存为即可),放到ruby安装目录下,然后再设置环境变量SSL_CERT_FILE为该文件路径,再重新输入该命令

QQ截图20160917211759.png-8.6kB

gem source -l

*** CURRENT SOURCES ***

https://ruby.taobao.org/

gem install sass

Fetching: sass-3.4.13.gem (100%)

Successfully installed sass-3.4.13

Parsing documentation for sass-3.4.13

Installing ri documentation for sass-3.4.13

Done installing documentation for sass after 12 seconds

1 gem installed

//如果你在安装时出现如下提示,则表明网络不佳或源没有切换到 ruby.taobao.org

ERROR: Could not find a valid gem 'sass' (>= 0), here is why:

Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (

https://api.rubygems.org/latest_specs.4.8.gz)

sass -v

Sass 3.4.13 (Selective Steve)

到此,所有的安装都结束了。接下来我们就可以直接编译sass文件了

Sass编译

打开ruby命令行,切换到scss文件所在目录,执行sass style.scss style.css,就可以将style.scss文件编译成style.css文件

1、线上的时候:在模板文件里对css跟js的引入路径后面追加一个类似于常量来做版本号

<link rel="stylesheet" href="style.css?version=20150828" />

2、线下测试的时候:对css跟js的引入路径后面追加随机数,时时刻刻更新,避免缓存影响了调试。

3、线下测试后:升级常量的版本号,把代码更新上去,这样用户的浏览器刷新就用到了新的样式,而又用到了缓存。