一、前提条件:

1.安装ruby,如果我没记错的话,mac自带ruby,终端输入 ruby -v ,回车,如果显示ruby的版本号,则说明ruby环境已经安装好了。如果没有,自行安装ruby。例如我的mac显示:

ruby 2.0.0p648 (2015-12-16 revision 53162) [universal.x86_64-darwin15]

2.安装sass,过程与win系统的一样,安装好后,终端输入 sass -v,回车,若显示sass版本号,说明已经安装好了。

例如我的mac显示:

tydeMacBook-Pro:~ ty$ sass -v
Sass 3.4.21 (Selective Steve)

二、在webstorm中配置scss watcher

1. 打开一个sass文件,上方会显示一条提示信息如下,点击Add watcher,打开scss watcher的配置窗口。

2.在新打开的窗口中,在Program一项中配置scss.bat的路径。然后点OK退出。至此配置完成,以后只要是在这个项目内,任意地方编辑sass文件、都会自动的生成对应的CSS文件和更新CSS代码。

ps:我发现这个scss watcher并不好用。提示我找不到compass/reset,我估计是因为我的sass文件里引用的模块的路径的问题,或者其他配置问题,反正最后我还是干脆回终端窗口里用compass compile来转换sass到CSS了。

mac下webstorm添加scss watcher的更多相关文章

  1. (原)Mac下Apache添加限制IP线程模块:mod_limitipconn.so

    1.下载:http://dominia.org/djao/limit/mod_limitipconn-0.24.tar.bz2 解压到一个目录:我的是~/Download/mod_limitipcon ...

  2. mac下 WebStorm下主题包安装

    mac下: 主题包 1.mac下,点击桌面,使用shift+command+G 输入:~/Library/Preferences 前往(mac查找安装目录的方法,因为默认这些文件夹是隐藏的),进入We ...

  3. mac下Apache添加限速模块mod_bw

    官方文档: Apache2 - Mod_bw v0.7 Author : Ivan Barrera A. (Bruce) HomePage : Http://Ivn.cl/apache & h ...

  4. Mac 下 Eclipse 添加 Dynamic Web Project 并配置 Tomcat

    最近拿到了一个 Dynamic Web Project,我的 Mac 上的 Eclipse 之前没有过这类型的项目,所以导入之后无法正常运行.下面是我记录的如何配置 Eclipse 使之能够运行 Dy ...

  5. Mac下WebStorm直接运行ReactNative项目

    1.首先点击WebStorm右上方的下拉箭头弹出的Edit Configurations…. 2.然后会进入一个配置页面.点击左上方的+.在弹出的列表中选中npm. 3.在右边的配置框中,先选择Com ...

  6. Mac 下 WebStorm 配置go语言开发环境

    一.下载安装WebStorm,我的是 二.在WebStorm 中安装go插件 三.在本机安装go开发环境,直接装pkg文件,https://golang.org/doc/install 四.在WebS ...

  7. mac下php添加openssl扩展

    进入php源码目录 cd ext/openssl mv config0.m4 config.m4 phpize && ./configure  && make & ...

  8. mac 下webstorm调节字体大小

    ctr+shift+A功能可以搜索对应功能. 在弹出框中输入Zoom可以轻松设置. 而且有关zoom的功能全部列出. 真是方便. 搜索到change font size with ctrl + whe ...

  9. Mac下如何安装WebStorm + 破解

    1.官网下载       下载地址   选择好系统版本以后,点击DOWNLOAD        2.安装 双击下载好的安装包.将WebStromt拖入application文件夹,然后在Launchp ...

随机推荐

  1. 对象转化为 xml字符串

    public static string ToXml<T>(this T o) where T : new() { string retVal; using (var ms = new M ...

  2. 在python3下使用OpenCV 抓取摄像头图像并实时显示3色直方图

    以下代码为在Python3环境下利用OpenCV 抓取摄像头的实时图像, 通过OpenCV的 calHist函数计算直方图, 并显示在3个不同窗口中. import cv2 import numpy ...

  3. java switch笔记

    1. 在Java7之前,switch只能支持byte.short.char.int或者其对应的封装类以及Enum类型 2. Java7后,开始支持String 3. switch语句中,表达式的值不能 ...

  4. java语言基本环境搭建

    从放假开始,就开始路陆陆续续了解关于java语言的学习.首先从语言编辑环境就和以前学习的c语言会有些不同,对java语言的学习也有了很大很多新的认识. 首先从官网上下载jdk,按照娄老师给我们的操作提 ...

  5. Ubuntu 12.10 用wubi安装到硬盘中

    wubi安装的优势: ubuntu可以像安装软件一样方便的安装.删除,不影响物理机的原有系统 这种方式安装的ubuntu不用担心功能会有所缺失,ubuntu所有的功能都在 和安装了双系统一样,没有什么 ...

  6. bzoj 3545: [ONTAK2010]Peaks

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1124  Solved: 304[Submit][Status][Discuss] Descripti ...

  7. 常用git代码提交命令

    知识点:本篇博客记录了日常开发中,所涉及到git代码提交命令 (一)初始化本地仓库,提交代码,提交到远程git远程仓库 git init    //初始化本地仓库 git add .   //将当前目 ...

  8. No module named _sqlite3 django python manage.py runserver

    linux 执行django(python manage.py runserver),报错No module named _sqlite3,需要安装sqlite-devel,再重新编译安装python ...

  9. 2017 ACM/ICPC Asia Regional Qingdao Online - 1008 Chinese Zodiac

    2017-09-17 13:28:04 writer:pprp 签到题:1008 Chinese Zodiac #include <iostream> #include <strin ...

  10. Vuejs methods how to use

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...