美文网首页html + css 基础训练
Sass 使用及自动编译(intellij idea/webst

Sass 使用及自动编译(intellij idea/webst

作者: sylvia_yue | 来源:发表于2017-11-07 13:49 被阅读120次

    1.sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。(注:mac下自带Ruby无需在安装Ruby!)

    window下安装SASS首先需要安装Ruby,先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。

    安装完成后,运行CMD输入ruby -v,测试是否安装成功,成功则显示版本,如下图:

    2.更换gem源为 https://rubygems.org/
    //1.删除原gem源 gem sources --remove https://rubygems.org/
    //2.添加国内淘宝源 gem sources -a https://ruby.taobao.org/
    //3.打印是否替换成功 gem sources -l
    //4.更换成功后打印如下 *** CURRENT SOURCES *** https://ruby.taobao.org/

    3.全局安装 sasscompass ,执行 gem install sassgem install compass,如下:


    4.确认 sasscompass安装成功:命令行输入:sass --version compass -v验证


    5.此处以 intellij idea 为例,使用其自动编译工具。
    1)打开 intellij idea ,File => settings => Plugins , 查看是否有 File Watchers 插件,没有的话,点击下方 Install JetBrains plugins 去安装。



    2)安装成功后,列表显示出此插件。



    3)settings => Tools => File Watchers ,点击右侧加号,添加 SCSS ,点击 OK。

    4)在弹出的 New Watcher => Watcher Setting => Program 处指向 Ruby 的安装地址,点击OK,配置完成。

    6.此时,再新建 scss 文件,会同时新建一个同名的 css 文件 和 map,直接引用 css文件即可。


    Sass安装参考:https://www.sass.hk/install/

    相关文章

      网友评论

        本文标题:Sass 使用及自动编译(intellij idea/webst

        本文链接:https://www.haomeiwen.com/subject/pnudmxtx.html