holyzfy / frontend_guidelines

前端约定
11 stars 8 forks source link

Sublime Text 3配置SASS #4

Open holyzfy opened 8 years ago

holyzfy commented 8 years ago

最终效果

保存.scss文件时会当前目录下生成同名的css文件,并且自动给css3属性打前缀

安装说明

  1. 安装sass http://sass-lang.com/install
  2. 运行npm install -g postcss-cli autoprefixer
  3. 打开Sublime Text 3
  4. 菜单Preferences > Package Control: Install Package,依次安装
    • Sass
    • SublimeOnSaveBuild
  5. 菜单Preferences > Settings - User,增加

    "show_panel_on_build": false,
  6. 菜单Preferences > Browse Packages会打开一个文件夹,然后打开User文件夹,新建以下文件并保存

    https://gist.github.com/holyzfy/170929ad3928e8d6b8eecef0af0dab69

测试一下吧

新建文件demo.scss并保存,查看当前目录下生成的demo.css,内容示例 https://gist.github.com/holyzfy/51f21b9a01dc51f300e2b1e1936b559c

SASS语法

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

holyzfy commented 8 years ago

配置ruby source

gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/