Sass

Author Avatar
Nico Zhang 4月 18, 2018
  • 在其它设备中阅读本文章

Sass 是一款CSS预处理器,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。

使用方法

  1. 安装Ruby
  2. 安装Sass,命令行输入
    gem install sass
  3. 运行
    sass input.scss output.css
  4. 监视单个 Sass 文件,每次修改并保存时自动编译:
    sass --watch input.scss:output.css
  5. 监视整个文件夹:
    sass --watch app/sass:public/stylesheets

语法

嵌套

将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器

#main p {
  color: #00ff00;
  width: 97%;

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

父选择器 &

有时也需要直接使用嵌套外层的父选择器,用 & 代表父选择器。

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

属性嵌套

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

/* 编译为 */

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

变量 $

变量支持块级作用域,嵌套规则内定义的变量(局部变量),不在嵌套规则内定义的变量(全局变量)。局部变量转换为全局变量可以添加 !global 声明:

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

@mixin

重用的代码块

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}


/* 使用 @include 指令引用混合样式 */
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

/* 编译为 */

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

指定参数


/* 也可以可以指定参数默认值,如width:2px */

@mixin sexy-border($color, $width:2px) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1px); }


/* 编译为 */
p {
  border-color: blue;
  border-width: 1px;
  border-style: dashed; }