官方资源
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 ??椋?a target="_blank" rel="nofollow">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?里进行编辑
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
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')