调整字号

Sass命令行指南

sass 或 scss 格式的样式表要编译成 CSS,需要安装 Sass 命令行:

安装 Ruby

Sass 运行需要 Ruby 环境,先安装 Ruby,出现安装选项时勾选后两个。

安装成功后,由于墙的原因,同样建议安装个淘宝镜像。在命令行依次运行

gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources –l

确保输出的列表中只有淘宝镜像地址,就表明 OK 了。

安装 Sass

在命令行运行 gem install sass。Mac 下如果遇到权限问题,改为 sudo gem install sass

运行 sass -v 查看是否安装成功。要查看 Sass 的帮助,运行 sass --help

编译

编译 .scss 或 .sass 文件:sass input.scss output.css

监视

Sass 可以监视 .scss 或 .sass 文件的改变,一旦保存就执行编译:

sass --watch input.scss:output.css

也可以监视整个目录:

sass --watch app/sass:public/stylesheets

控制输出风格

Sass 编译后的 CSS 文件有四种输出风格可以选,分别是 nestedexpandedcompactcompressed。在命令行中,通过 --style-t 来使用,例如 sass --style compact demo.scss output.css

nested(默认)

保留了换行,同时用缩进来表示源文件中的嵌套关系:

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

expanded

同样保留空格和换行,但是取消了缩进:

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

compact

每条规则只占一行,没有缩进:

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

compressed

进行最小化压缩:

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

控制 sourcemap

默认在编译时也会生成 .map 的 sourcemap 文件。可以通过 --sourcemap=none 关闭。

字符集

如果注释中含有中文,编译时可能会出错,最好在顶部指定一下字符集:

@charset "utf-8";
还没有评论,沙发空缺中……
flight