Sass

Sass

Sass用法指南 - 阮一峯

官方文檔

安裝

1. 安裝ruby

2. gem install sass

編譯選項

// 編譯格式
sass --watch input.scss:output.css --style compact
// 添加調試map
sass --watch input.scss:output.css --sourcemap
// 開啓debug信息
sass --watch input.scss:output.css --debug-info

變量

$blue : #1875e7;
div {
  color : $blue;
}

$side : left;
.rounded {
  border-#{side}-radius: 5px;
}

計算

body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var * 10%;
}

嵌套

div h1 {
  color: red;
}

div {
  h1 {
    color: red;
  }
}

p {
  border: {
    color: red;
  }
}

a {
  &:hover { color: #ffb3ff; }
}
/* 使用&引用父元素 */

註釋

• /* comment */

• // comment

/*!
    important comments!
*/

繼承

.class1 {
  border: 1px slid #ddd;
}

.class2 {
  @extend .class1;
  font-size: 120%;
}

Mixin

可重用代碼塊。

@mixin left {
  float: left;
  margin-left: 10px;
}

div {
  @include left;
}

指定參數和缺省值：

@mixin left($value: 10px) {
  float: left;
  margin-right: $value;
}

div {
  @include left(20px);
}

example：

@mixin rounded($vert, $horz, $radius: 10px) {
  border-#{$vert}-#{$horz}-radius: $radius;
  -moz-border-#{$vert}-#{$horz}-radius: $radius;
  -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px) }

顏色函數

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

插入文件

@import "path/filename.scss";

@import "foo.css";

條件語句

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
}

@if lightness($color) > 30% {
  background-color: #000;
} @else {
  background-color: #fff;
}

循環語句

@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

@each $member in a, b, c, d {
  .#{$member} {
    background-image: url("/image/#{$member}.jpg");
  }
}

自定義函數

#function double($n) {
  @return $n * 2;
}

#sidebar {
  width: double(5px);
}