zoukankan      html  css  js  c++  java
  • sublimeText3 中配置sass环境,并将编译后文件保存到指定文件夹

    sass基于ruby引擎,所以安装时ass、compass之前需要安装ruby。具体的链接应该是(http://rubyinstaller.org/downloads)。下载并安装相应的版本,勾选第二项(要在cmd中使用ruby)。

    打开命令行,输入ruby -v查看我们安装的ruby版本信息。

     ruby安装完成之后,打开ruby的command面板,接下来就是安装sass了。Windows下安装sass有多种方法,这里说一下其中的两种:

    1、到 Rubygems(http://rubygems.org/) 下载 Sass 的安装包(http://rubygems.org/gems/sass),然后在cmd输入:

    gem install <把下载的安装包拖到这里>

        回车!

    2、打开cmd,输入 gem install sass --version=3.4.22(可选版本),回车。(卸载方法: gem uninstall sass --version=3.4.22)。

    接下来开始在sublime中安装sass插件

    打开sublime,ctrl+shift+p,输入install,选择第一个(Package Control)回车

    命令框中输入Sass,选择,回车!(同样的步骤,命令框中输入SassBuild,选择,回车!)。

    Ctrl+shift+p,输入list packages,回车,可以看到插件列表,如果其中有Sass和SassBuild,说明安装成功了。、

    写完scss文件后,Ctrl+b就可以编译了,但默认编译后的css文件和scss文件放在同一个文件夹,写项目的时候可能会有很多css文件,有固定的css文件夹,这时候就需要把编译后的css文件,放到这个指定的文件夹了,手动移动的话,有点麻烦,那就跟着下面的步骤设置一下吧。

    1、Tools -> Build System -> New Build System

    2、粘贴如下代码:

       {  
          
            "cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css"],  
            "selector": "source.sass, source.scss",  
            "line_regex": "Line ([0-9]+):",  
          
            "osx":  
            {  
                "path": "/usr/local/bin:$PATH"  
            },  
          
            "windows":  
            {  
                "shell": "true"  
            } 
        } 

    保存到Sublime Text3 Packages下,新建MySass文件夹,保存文件名MySass.sublime。

    3、Tools -> Build System -> MySass ,选择编译类型。

    这样设置以后,如项目中有css文件夹,就会编译到css文件夹中,如果没有,会自动生成一个css文件夹,用于保存编译后的css文件。

    然后Ctrl+b,尽情编译吧!

  • 相关阅读:
    linux中你会新建复制移动删除文件或目录吗?三分钟搞懂【文件管理】
    从此英语渣渣也能看懂man手册-【linux man手册汉化安装使用教程】
    你真的会用ls命令吗?--文件管理命令(ls命令详解)
    Python算法系列—深度优先遍历算法【二叉树】
    Python算法系列-单词匹配模式【hash练习】
    abp 从4.3升级到5.4 从入门到放弃
    ABP core2.2错误笔记2,持续更新
    echart报错: Component series.XXX not exists. Load it first
    单例模式MQTT服务为什么会重复收到消息
    在ABP core中使用RabbitMq
  • 原文地址:https://www.cnblogs.com/kakayang/p/6478069.html
Copyright © 2011-2022 走看看