WebStorm 上使用 Sass

301 阅读1分钟

一、前言

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

详细安装请参照官网:安装Sass | Sass中文网

我下载的是 Ruby 提供的7z压缩包,不是exe文件,解压后添加path环境变量即可。

二、在 webstorm 上使用 sass

在 WebStorm 设置中找到工具,然后找到File Watcher选项,如下图所示:

image.png

点击右上角的加号,选择 SCSS 或者 Sass,两者都行,只是编写样式文件时,后缀要改为相应的名称。选择后SCSS的界面如下图所示:

image.png

我选的 SCSS,这里需要修改的有程序(P)参数(A)

  • 程序(P):程序输入框修改为下载的Rubysass.bat,位于bin目录下,使用exe安装的配置应该类似。
  • 参数(A):加上一个配置即可:--style expanded,这是官网提供的解析后的 css 样式的格式。

点击确定后即刻生效。