Mac上的安装如下
命令行执行
gem install sass
若报错,则执行
sudo gem install sass
然后,就好啦。当然可以用查看Sass版本的命令验证下
sass -v
其他操作系统上安装Sass见官网安装指南。
注意:由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。所以你会遇到 gem安装资源没反应,使用Taobao的RubyGem镜像可以解决这个问题。
使用方式如下
$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install rails
见这里
Sass语法规则有两种,一种是通过tab键控制缩进的语法规则(缩进要求非常严格),这种语法对于熟悉Ruby的同学来说会非常的方便和喜欢。这种语法的Sass文件是以.sass后缀命名。另一种语法是SCSS,这是Sass的新的语法规则,他的外观和CSS的一模一样,文件后缀是.scss。如下所示:
//Sass语法
$width: 200px
.box
width: $width
//SCSS语法
$width: 200px;
.box {
width: $width;
}
Sass和SCSS的语法不能混用。
如果文件名以_
开头的.scss
或.sass
文件不会被编译成css
文件。
在选择器和属性上使用变量,必须用差值。否则会报错。
@debug
, @warn
, @error
。
调试信息均输出在命令行里。他们的区别只是信息的等级不同而已。
你通过@extend调用可以在一个CSS选择器或者SCSS的%placeholder中通过@extend调用定义好的%placeholder。%placholder不会被编译到CSS样式文件中。
关于是用@mixin还是%placeholder:如果你需要使用变量,最好使用@mixin,否则使用%placeholder。更详细的描述见这里。
@function
: 定义函数
@return
: 函数返回值
Error: error path/to/include-chinese.scss (Line 136: Invalid GBK character"\xE8")
在scss
文件顶部加上
@charset "utf-8";
以后可以试下gulp-ruby-sass。
不想折腾可以用Compass