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语法

Sass 是一个 CSS 预处理器,简单来说是一种更强大的书写 CSS 的方式,允许你在 CSS 中使用变量、嵌套、函数等等。Sass 的意思是 Syntactically Awesome StyleSheets(语法上更牛的样式表)。

Sass 有两种语法,一种叫 SCSS(Sassy CSS),扩展名 .scss,语法更接近原生 CSS,实际上也完全兼容原生的 CSS,另一种叫 Sass,扩展名 .scss,不使用分号,并且用缩进来代替花括号:

/* SCSS */
#main {
  color: blue;
  font-size: 0.3em;
}

/* Sass */
#main
  color: blue
  font-size: 0.3em

缩进语法的细节看这里

对 CSS 的扩展

规则嵌套

Sass 允许在 CSS 规则中进行嵌套:

#main p {
  width: 97%;

  .redbox {
    background-color: #ff0000;
  }
}

编译后的结果

#main p {
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000; }

Sass 会自动把 #main p 加到 .redbox 前。

引用父选择器:&

可以用 & 来引用父选择器本身,在写 :hover 等规则时很有用:

a {
  text-decoration: none;
  &:hover { text-decoration: underline; }
}

编译结果为

a {
  text-decoration: none;
  a:hover { text-decoration: underline; }
}

& 会被父选择器代替。如果同时使用嵌套,那么 & 是嵌套后的结果:

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

编译结果:

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

属性嵌套

font-familyfont-size 这一类规则,前缀相同,也可以都写在 font 下:

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译结果:

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

阅读全文 »

flight