sass的使用环境配置

1、下载ruby 

    https://rubyinstaller.org/downloads/                    ruby -v

2、ruby Gems更换淘宝镜像

    gem sources -r https://rubygems.org/       删除默认官方源
    gem sources -a http://ruby.taobao.org/     添加淘宝源   （https不维护了。）

    gen sources -l   查看镜像源

3、安装sass compass

    gem install sass        sass -v

    gem install compass    compass -v

4、VScode编辑器中的的easySass插件对sass文件进行编译

    在 VSCode 菜单栏依次点击“文件 首选项 设置”，打开 settings.json 全局配置文件。搜索“easysass”，然后把 easysass 相关的设置项复制到右侧的用户设置编辑窗口中，再根据实际情况修改配置项。
    "easysass.formats": 

    [ { "format": "compressed", // 压缩 "extension": ".css" } ],

     "easysass.targetDir": " ./testSass/css" // 自定义css输出文件路径

       

    easysass.formats[i].format 支持四个选项用以编译生成对应风格的 CSS：
　　 nested：嵌套缩进的 css 代码。
　　 expanded：没有缩进的、扩展的css代码。
　　 compact：简洁格式的 css 代码。
　　 compressed：压缩后的 css 代码。
easysass.formats[i].extension 顾名思义就是设置编译输出的文件名了，此处可以自定义文件名，输出的 CSS 文件名会按照“当前 Sass 文件名（不含拓展名）+此处自定义文件名”的格式来生成。例如：设置 easysass.formats[i].extension 为 ".min.css"，假设当前的 Sass 文件名为“style.scss”，则编译输出的 CSS 文件名为“style.min.css”。
        链接：https://www.imooc.com/article/19624

转载于:https://my.oschina.net/u/3178434/blog/1648348