Sass & Compass


本文引自 https://speakerdeck.com/imathis/sass-compass-the-future-of-stylesheets-now

安装

gem install sass
sass --watch screen.scss

Sass is watching for changes. Press Ctrl-C to stop.

  • nested:嵌套缩进的css代码,它是默认值。
  • expanded:没有缩进的、扩展的css代码。
  • compact:简洁格式的css代码。
  • compressed:压缩后的css代码。
sass --style compressed test.sass test.css
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets

格式

SCSS - Sassy CSS (.scss)

article {
  margin-bottom: 2em;
  .entry-content {
    border-top: 1px solid #eee;
  }
}

Indented Sass (.sass)

article
  margin-bottom: 2em
  .entry-c

任一语法都可以导入另一种语法撰写的文件中。 只要使用 sass-convert 命令行工具,就可以将一种语法转换为另一种语法:

# 将 Sass 转换为 SCSS
$ sass-convert style.sass style.scss

# 将 SCSS 转换为 Sass
$ sass-convert style.scss style.sass

Nesting

 article {
  > h2 { border-top: 1px dashed #eee }
  ~ article { padding-top: 1.5em }
  + footer { margin-top: 0 }
  * { color: #000 }
}
article {
  h1 { font-size: 2.4em }
  .blog-index & {
    h1 { font-size: 2em }
  }
}
article h1 { font-size: 2.4em }
.blog-index article h1 { font-size: 2em }
 {
  margin: 0 1.5em;
  @media screen and (min-width: 1280px) {
    margin: 0 2.5em
  }
}

属性也可以嵌套,比如border-color属性,可以写成:

p {
    border: {
        color: red;
    }
}

注意,border后面必须加上冒号。

注释

SASS共有两种注释风格。
标准的CSS注释 /* comment / ,会保留到编译后的文件。
单行注释 // comment,只保留在SASS源文件中,编译后被省略。
在/
后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

/*! 
    重要注释!
*/

变量

如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。

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

变量默认值: !default

你可以在变量尚未赋值前,通过在值的末尾处添加 !default 标记来为其指定。 也就是说,如果该变量已经被赋值, 就不会再次赋值, 但是,如果还没有被赋值,就会被指定一个值。

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

除法运算和 /

CSS 允许 / 出现在属性值里,作为分隔数字的一种方法。 既然 SassScript 是 CSS 属性语法的扩展, 他就必须支持这种语法,同时也允许 / 用在除法运算上。 也就是说,默认情况下,在 SassScript 里用 / 分隔的两个数字, 都会在 CSS 中原封不动的输出。

然而,在以下三种情况中,/ 会被解释为除法运算。 这就覆盖了绝大多数真正使用除法运算的情况。 这些情况是:

  • 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
  • 如果数值被圆括号包围。
  • 如果数值是另一个数学表达式的一部分。
p {
  font: 10px/8px;             //  CSS,不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量,是除法运算
  width: round(1.5)/2;        // 使用了函数,是除法运算
  height: (500px/2);          // 使用了圆括号,是除法运算
  margin-left: 5px + 8px/2px; // 使用了加(+)号,是除法运算
}

extend

button {
  background: blue; color: white;
  padding:0.2em 0.8em;
  border-radius:0.4em;
}
.button-delete { background: red; }
.button {
  background: blue; color: white;
  padding:0.2em 0.8em;
  border-radius:0.4em;
}
.button-delete {
  @extend .button;
  background: red;
}

Mixin

@mixin border-radius($amount) {
  border-radius: $amount;
  -webkit-border-radius: $amount;
  -moz-border-radius: $amount;
}
.msg { @include border-radius(5px); }

import

/* screen.scss */
@import "core";
@import "typography", "grid";
@media screen and (min-width: 320px) {
  @import 'phone';
}
#account {
  @import 'pages/account';
}

@import 根据文件名引入。 默认情况下,它会寻找 Sass 文件并直接引入, 但是,在少数几种情况下,它会被编译成 CSS 的 @import 规则:

  • 如果文件的扩展名是 .css
  • 如果文件名以 http:// 开头。
  • 如果文件名是 url()
  • 如果 @import 包含了任何媒体查询(media queries)。
@import "foo.scss";

@import "foo";

两者都将引入 foo.scss 文件, 而

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

将被编译为:

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

Math

percentage(13/25) // 52%
round(2.4)
ceil(2.2)
floor(2.6)
abs(-2)

Conditions

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
}
$theme: ocean;
div {
  @if $theme == dusty {
    background: #c6bba9;
    color: $color;
  } @else if $theme == ocean {
    background: blue;
    color: white;
  }
}
$main-bg: #000;
.main {
    color: if($main-bg == black, #fff, #000);
}

Loops

for $level from 0 to 5 {
  .tag-#{$level + 1} {
  font-size: .7em + ($level * .5em);
  }
}
$level: 0;
@while $level < 5 {
    .tag-#{$level + 1} {
        font-size: .7em + ($level * .5em);
    }
    $level: $level + 1;
}
$animals: puma, crab, emu, duck;
@each $animal in $animals {
  .#{$animal}-icon {
    background: url('/images/#{$animal}.png');
  }
}

Color

Inspecting Colors

color: red;
hue($color);        // 0deg
saturation($color); // 100%
lightness($color);  // 50%
red($color);
green($color);
blue($color);
alpha($color);

Set Colors






Function

@function pxem($px, $context: 16px) {
  @return ($px / $context) * 1em;
}
article h2 { font-size: pxem(45px); }
article h2 { font-size: 2.813em; }
@function text-contrast($bg,
$light:#fff, $dark:#000){
  $darkbg:lightness($bg) < lightness(gray);
  @return if($darkbg, $light, $dark);
}

Lists

一个 List 就像 margin: 10px 15px 0 0 font-face: Helvetica, Arial, sans-serif.
1px 2px, 5px 6px 是两个 List ,1px 2px5px 6px
(1px 2px) (5px 6px) 也是两个 List
nth 可以获得元素, join 连接元素, append 增加元素.
@each 可以遍历元素

Compass

Setup

gem install compass
compass create my_project

Configuration

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
fonts_dir  = "fonts"
javascripts_dir = "javascripts"
output_style = :compressed

Plugins & Extensions

  • Fancy Buttons, Sassy Buttons - easy CSS3 buttons
  • Animate - CSS3 animation library