webstorm下设置sass

时间 2019-11-17

标签 webstorm 设置 sass 栏目 Storm 繁體版

原文原文链接

关于sass，就不想多说什么了。只要你有css基础，十分钟入门好吗。能够参考下资料：http://www.w3cplus.com/sassguide/css

今天想说的是webStorm下如何实现sass自动编译。web

最近在学习SASS，研究了下编译的方法，如今你们通常用的有两种，一种是直接用命令行编译，另外一种就是利用一些方便的编译工具，例如腾讯的koala。后来我发现，原来webstorm早就支持了sass编译 - - 真是贴心啊。。。。sass

废话很少说，直接去webstorm配置去。ruby

打开settings，能够看到Tools下面有个file watchers选项，点进去以下图koa

右边显示的就是如今监视的实时编译文件配置，SCSS和SCSS-min就是我配置的。webstorm

点击加号，选择SCSS或者SASS(根据本身写的格式，SCSS是最新版的SASS后缀)，咱们这里选择是SCSS，进入配置界面ide

Name和Description就不用多介绍了，Options咱们暂时也不用管（实际上是我也不懂啥意思。。。）工具

File type就是咱们须要监视的文件类型，这里固然是SCSS学习

Scope监视范围能够选择不一样监视范围，这样就能够设置多个监视配置，输出对应不一样的目录或者module下的SCSS文件。网站

Programe是scss编译工具的目录地址，由于SASS是依赖ruby的，因此咱们还须要去安装ruby，ruby在window下的安装文件下载能够在 http://rubyinstaller.org/downloads/ 网站找到，我这里下的193。其余环境的能够去官网下载：https://www.ruby-lang.org/

win环境的安装很傻瓜，一路next就好了，不过记得在选择目录的时候，有个add to PATH选项必定要勾上，这样就不用咱们手动配置环境变量了。其余环境的没有安装过，百度吧。。。。

安装好ruby之后，打开cmd，输入gem install sass就能够安装SASS了，可是因为gem的默认原地址因为国内伟大的GFW缘由可能链接不上致使没法安装，因此咱们还须要替换一下。

依次输入：

gem sources –r http://rubygems.org/

gem sources –a http://ruby.taobao.org/

gem sources –l

若是咱们看到最后显示的地址只有国内淘宝提供的镜像地址就OK了

而后再输入gem install sass就能够了，完成后输入sass –v 就会返回sass的版本号。

OK之后，在webstorm里面选择本机ruby目录下bin目录里面的scss.bat文件（若是须要编译SASS文件则选择sass.bat）

下面的输出参数，能够根据本身的须要填写，下面列出的是一些经常使用的参数

--style表示解析后的css是什么格式，如：--style compressed，有四种取值分别为：nested，expanded，compact，compressed.
--sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。 webstorm是默认开启sourcemap的，因此能够不填写
--debug-info表示开启debug信息，升级到3.3.0以后由于sourcemap更高级，这个debug-info就不太用了。

下面是四种格式编译后的样式：

 
        // nested 
       
        #main { 
       
        color 
        :  
        #fff 
        ; 
       
        background-color 
        :  
        #000 
        ; } 
       
        #main p { 
       
        width 
        :  
        10em 
        ; } 
       
        .huge { 
       
        font-size 
        :  
        10em 
        ; 
       
        font-weight 
        :  
        bold 
        ; 
       
        text-decoration 
        :  
        underline 
        ; } 
       
        //  
        expanded 
       
        #main { 
       
        color 
        :  
        #fff 
        ; 
       
        background-color 
        :  
        #000 
        ; 
       
        } 
       
        #main p { 
       
        width 
        :  
        10em 
        ; 
       
        } 
       
        .huge { 
       
        font-size 
        :  
        10em 
        ; 
       
        font-weight 
        :  
        bold 
        ; 
       
        text-decoration 
        :  
        underline 
        ; 
       
        } 
       
        //  
        compact 
       
        #main {  
        color 
        :  
        #fff 
        ;  
        background-color 
        :  
        #000 
        ; } 
       
        #main p {  
        width 
        :  
        10em 
        ; } 
       
        .huge {  
        font-size 
        :  
        10em 
        ;  
        font-weight 
        :  
        bold 
        ;  
        text-decoration 
        :  
        underline 
        ; } 
       
        // compressed 
       
        #main{ 
        color 
        : 
        #fff 
        ; 
        background-color 
        : 
        #000 
        }#main p{ 
        width 
        : 
        10em 
        }.huge{ 
        font-size 
        : 
        10em 
        ; 
        font-weight 
        : 
        bold 
        ; 
        text-decoration 
        : 
        underline 
        }

后面就是输出的目录地址和文件名，目录是相对于源文件的，点击Insert macro能够看到一些变量。默认的话是在源文件下输出CSS文件。

配置完毕后，点击OK就完成了。

而后咱们新建个SCSS文件，输入内容就能够看到结果了

能够看到，我输入内容后，直接在源文件下生成了一个css文件和一个map文件。

这样就表明编译成功了，如今就能够开始咱们编写咱们的SASS项目了，就不用在考虑编译问题了。