ruby安装及webStorm配置SCSS

待我称王封你为后i 2021-12-23 05:25 235阅读 0赞

**sass安装：**

步骤：（window系统）

1、下载[RubyInstaller][](v2.4.3)，运行安装，基本直接next安装，不过有个add to PATH的选项一定要勾选，这样就不用配置环境变量。

2、在开始程序中找到Start Command Prompt with Ruby，如下图

![980690-20171017132319412-1220849858.png][]v

3、打开后命令行输入：

1 gem install sass

这时候可能会出现安装不成功的情况或者安装很慢(慢的想打人)，因为国内伟大的GFW原因连接不上导致无法安装

所以就需要替换国内淘宝提供的镜像，依次输入如下代码：

1 gem sources --remove https://rubygems.org     删除原来的资源库位置 
    2 gem sources -a https://ruby.taobao.org/       添加新的资源库位置
    3 gem sources -u      更新资源库    
    4 gem sources -l      查看当前资源库

除了淘宝的镜像外再提供几个常用的gem源地址：

http://rubygems.org/　　　　http://gems.github.com　　　　http://gems.rubyforge.org　　　　http://ruby.taobao.org

出现下面红框中文字后表示成功，这时可以输入如下代码查看版本：

sass -v

![980690-20171017132814006-884242545.png][]

**webStorm配置 ：**

File-->Settings-->Tools-->File Watchers，点击右侧加号（![980690-20171017133411662-1981654035.png][]）添加SCSS

![980690-20171017133529115-220929876.png][]　![980690-20171017133556256-347850843.png][]

![980690-20171017134315396-545730551.png][]

**输出参数(Arguments)：**

`　　--sourcemap`表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为`.css.map`文件。 webstorm是默认开启sourcemap的，所以可以不填写

`--style`表示解析后的css是什么格式，如：--`style compressed (我一般用这个)`

有四种取值分别为：`nested`，`expanded`，`compact`，`compressed`

// 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}

转载于:https://www.cnblogs.com/cookies-cnbogs/p/7681356.html

[RubyInstaller]: http://rubyinstaller.org/downloads/
[980690-20171017132319412-1220849858.png]: /images/20211223/e15a64dccf1249b2821f0a99b4d0fe58.png
[980690-20171017132814006-884242545.png]: /images/20211223/24362d9b2cf041fdabe0c8224e366d3e.png
[980690-20171017133411662-1981654035.png]: /images/20211223/e688818391a44b798a5e8e7d62ff0d18.png
[980690-20171017133529115-220929876.png]: https://images2017.cnblogs.com/blog/980690/201710/980690-20171017133529115-220929876.png
[980690-20171017133556256-347850843.png]: /images/20211223/f91a81f88bfc4fdeaf64516f35e17feb.png
[980690-20171017134315396-545730551.png]: /images/20211223/98103e94bd004c15ad8cc82003f60e95.png