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,尽情编译吧!

sublimeText3 中配置sass环境,并将编译后文件保存到指定文件夹的更多相关文章

  1. 在webstorm中配置sass环境

    最近开始用SASS,LESS等来写CSS,而在Webstorm中,它自带一个File Watchers功能,设置一下,即可实时编译SASS,LESS等. LESS的实时编译很简单,在node平台安装一 ...

  2. 在webstorm中配置sass的自动编译,并且可以指定编译后的css的目录.

    参考: WebStorm-2018.2-Help-Sass, Less, and SCSS 作者:tobyDing链接:https://www.jianshu.com/p/0fe52f149cab來源 ...

  3. 4.8 Sublime Text3 中配置 Python环境 --之下Sublime配置Python环境

    返回总目录 目录: 1.没有配置之前 2.安装Package Control插件 3.安装其他库: 4.配置其他操作: (一)没有配置之前: 我们试着运行以下,会效果怎么样? 1.首先选择Python ...

  4. Ubuntu中配置Java环境变量时,出现command not found问题解决记录

    百度出Ubuntu中配置Java环境变量时,在利用sudo gedit /etc/profile 对profile编辑后, 在terminal中输入 sudo source /etc/profile, ...

  5. 在PHPstorm编辑器中配置git环境

    在phpstorm编辑器中配置git环境,使得编程人员从git仓库中提交代码,克隆代码,,,更佳便利快捷,有利于提高项目的质量和效率 工具/原料   phpstorm编辑器,git客户端 win7或w ...

  6. eclipse中配置spring环境

    初识Spring框架 1.简单使用 eclipse中配置Spring环境,如果是初学的话,只需要在eclipse中引入几个jar包就可以用了, 在普通java project项目目录下,建一个lib文 ...

  7. 【已解决】React中配置Sass引入.scss文件无效

    React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效 尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules ...

  8. (原创)超详细一步一步在eclipse中配置Struts2环境,无基础也能看懂

    (原创)超详细一步一步在eclipse中配置Struts2环境,无基础也能看懂 1. 在官网https://struts.apache.org下载Struts2,建议下载2.3系列版本.从图中可以看出 ...

  9. 4.7 Sublime Text3 中配置 Python环境 --之上安装Sublime 3

    返回总目录 目录: 1.展示效果: 2.缺优分析: 3.下载Sublime Text3 (一)展示效果: 1.能够交互式编写Python代码: 2.可以编写文件式Python代码: 3.能够自动补齐代 ...

随机推荐

  1. js文本框字符数输入限制

    我们常常在前台页面做一些文本输入长度的验证,为什么呢?因为数据库字段设置了大小,如果不限制输入长度,那么写入库时就会引发字符串截断异常.今天就给大家分享一个jquery插件来解决这一问题. (func ...

  2. UWP 调用系统拍照程序

    当需要用户选择照片时,一般有两种方法: 1.从本地磁盘选择 2.调用照相机拍照 这次就说一下第二种方法,毕竟第一种大家都会. 先看下效果 如图所示,点击拍照后,会弹出系统照相机界面,在手机上,会打开相 ...

  3. 云计算之路-阿里云上:docker swarm 问题最新进展

    今天中午我们在 docker swarm 集群上发布应用时遇到了一个奇怪的 docker swarm 内置负载均衡的问题,该应用的 2 个新容器成功启动后,在容器内访问正常,但通过服务名访问时一会正常 ...

  4. Java虚拟机系列-Java类加载机制

    原文:http://www.ityouknow.com/jvm/2017/08/19/class-loading-principle.html 一. 类加载: 1. 将.class文件的二进制数据加载 ...

  5. 进入TP-Link路由器之后利用快捷键F12查看星号路由密码的方法

    今天又破解了几个路由器,这两张图片是大多数路由器如TP-LINK路由器查看拨号圆点密码的方法.

  6. JS如何判断滚动条是否滚到底部

    判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight.   scrollTop为滚动条在Y轴上的滚动距离.   clientHeigh ...

  7. 温故而知新----stack

    stack:栈,先进后出,操作方法相对其它容器来说比较少,具有以下特性:1.LIFO 后进先出,与队列相反,队列时FIFO(先进先出)2.没有迭代器访问.3.C++ 11标准中新增了两个接口,如下:  ...

  8. C语言的隐式类型转换

    看了一篇博文,该文章中有如下描述 #include <stdio.h> int main() { unsigned ; unsigned ; )) //a和b-1的结果-1都被转换为int ...

  9. spy++捕获窗口消息

    打开spy++,窗口截图如下,点击窗口搜索按钮(红框标识) ,如果找不到对应的窗口,鼠标右键刷新即可. 鼠标左键点击窗口搜索图标,按住不放,拖到需要抓取消息的窗口上: spy++会自动在列表中高亮定位 ...

  10. Codeforces Round #471 (Div. 2) C. Sad powers

    首先可以前缀和 ans = solve(R) - solve(L-1) 对于solve(x) 1-x当中符合条件的数 分两种情况 3,5,7,9次方的数,注意这地方不能含有平方次 平方数 #inclu ...