Sass 快速入门

官方资源

Sass 官网：https://sass-lang.com/

Sass 中文网：https://www.sass.hk/guide/

Ruby 官网：http://www.ruby-lang.org

compass：http://compass-style.org

compass 实例：http://compass-style.org/examples/

compass 模块：http://compass-style.org/examples/compass/

开发环境

ruby

编译方式

1、Compass（CSS开源框架）

2、Easy Sass （VSCode 插件）

3、Koala （可视化编译工具）

Compass（推荐）

一、安装

安装Ruby，官网下载压缩包，解压到D盘，添加环境变量path：D:\software\Ruby2.5.3\bin

安装 sass 和 compass，注：gem 是 Ruby 内部命令

gem install sassgem install compass//以下命令备用gem update sass//升级//如果安装失败，试着替换源，不要用taobao的，用ruby-china这个gem sources --removehttps://rubygems.org/gem sources --addhttp://gems.ruby-china.org/

二、创建项目

使用compass创建项目

compass create

三、编辑项目

新建 index.html，引入编译后的样式 index.css

在 sass 的 index.scss 里进行编辑

四、编译css

compasscompilecompass watch//也可开启实时编译

提示：

如果想修改编译后的文件名，须把 config.rb 里的变量 css_dir 改成一致，例如 css_dir = "css"

设置不带注释编译 line_comments = false

VSCode插件

Easy Sass : 自动编译 SASS/SCSS 文件到 .css 和 .min.css 。还可以快速编译项目中的所有 SCSS/SASS 文件。默认编译到当前目录下，可修改配置：

"easysass.targetDir":"./css"

可视化编译工具：Koala

官网：http://koala-app.com/

github：https://github.com/oklai/koala/

优缺点：不用装环境也能编译， 但不能编译中文，可通过修改文件D:\Koala\rubygems\gems\sass-3.4.9\lib\sass\engine.rb解决， 在require最下面加入以下代码.

Encoding.default_external= Encoding.find('utf-8')