如何将scss转换成css文件

html-css05

如何将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 。

前言

这段时间一直在看Bootstrap,V3官方直接提供了Less版本的源码,就先将Less学完了,很简单的语法,学习写Demo都是在Webstorm里写的,配置了Watcher自动编译(详见《在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件》)。 

随着学习的加深,开始接触Sass了,Bootstrap V3也提供了Sass的源码,而且V4官方就只提供Sass的源码,从侧面证明Sass的流行趋势,毕竟Sass功能更全面,因此笔者决定以后就使用Sass了(新版本叫Scss)。

开始动手

1、下载rubyinstaller-2.3.3-x64.exe 安装(从官网下载,注意,安装过程中下面的设置。 

 

2、安装完成后用命令检查是否安装成功,成功会显示版本信息。

ruby -vgem -v12

 

3、安装Sass

gem install sass1

安装完后,C:\Ruby23-x64\bin里将有下面的文件。 

 

4、Webstorm里添加Watcher 

同Less类似,在工程里新建scss文件时会自动显示【Add Wather】,如果没有提示,也可以通过【文件(File)】-【设置(Settings)】-【工具(Tools)】-【File Watchers】-【+】-【SCSS】打开New Watcher配置界面。 

 

默认值(默认生成css 和 css.map)

参数名

参数值(下面no和update前是两个”-“)

Program    C:\Ruby23-x64\bin\scss.bat  

Arguments    –no-cache –update $FileName$:$FileNameWithoutExtension$.css  

Output paths to refresh    $FileNameWithoutExtension$.css  

修改后(生成压缩后css)

参数名

参数值(下面no和update前是两个”-“)

Program    C:\Ruby23-x64\bin\scss.bat  

Arguments    –no-cache –update -t compressed $FileName$:$FileNameWithoutExtension$.css  

Output paths to refresh    $FileNameWithoutExtension$.css  

很简单,比Less还要简单。写一段scss代码试试。 

补充: 

参数值里,-t 后面可以配置的值

结果

nested    嵌套  

expanded    展开  

compact    每句一行  

compressed    压缩  

阅读全文

版权声明:本文为博主原创文章,未经博主允许不得转载。

vscode

只是编辑器,不具备这种读取并编译的功能(可以使用在nodeJS使用的sass插件实现),不过vscode

可以把正在编辑的scss文件在保存的时候编译成css。在找到插件之前你可能需要:

建议还是看看sass或者scss的官方文档,到底什么能编译出来(已收货14踩!)。