sass基础与扩展

Sass是CSS的扩展，为基本语言增添了更为强大的特性。它允许您使用变量，嵌套规则，混合，内联导入等等，并提供sass,scss两种的语法选择，具有完全CSS兼容的语法,Sass可以很好的帮助你组织好大型样式表，特别是在Compass样式库的帮助下，接下来我们可以体验Sass的特性

变量

可以使用$来定义变量，就像PHP，他可以存储任何你想重用的信息，比如字体，颜色;然后可以在样式表中引用这个变量

// 定义变量
$font-stack:   Helvetica, sans-serif
$master-color: #333

body
  font: 100%  $font-stack //use font var 使用变量
  color: $master-color //use color var 使用变量

编译后的css

body {
  font: 100% Helvetica, sans-serif;
  color: #333; }

嵌套

当编写HTML时，你可能注意到它有一个清晰的嵌套和可视的层次结构。Sass允许你嵌套CSS选择器的方式遵循HTML的相同的视觉层次结构。

请注意，过度嵌套的规则将导致维护困难，通常被认为是不好的做法。

nav
  float: left
  ul
    li
      margin: 0 auto
      width: auto
      list-style: none
    height: 100px


  div
    display: block

编译后的css

nav {
    float: left;
}

nav ul {
    height: 100px;
}

nav ul li {
    margin: 0 auto;
    width: auto;
    list-style: none;
}

nav div {
    display: block;
}

Import导入

CSS有一个导入选项，允许您将CSS拆分为更小，更容易维护的小文件。唯一的缺点是每次在CSS中使用@import时，它会创建HTTP请求。 Sass构建CSS @import时，它不需要一个HTTP请求，Sass将接收您要导入的文件，并将其与您要导入的文件合并，以便可以将一个CSS文件提供给Web浏览器

// _reset.sass

html,
body,
ul,
ol
  margin:  0
  padding: 0

// base.sass

@import reset

body
  font: 100% Helvetica, sans-serif
  background-color: #efefef

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Mixins

CSS中的一些东西有点乏味，特别是与CSS3和许多-webkit,-moz类似前缀存在，mixin允许您创建一组CSS声明，以便在整个网站中重复使用，你甚至可以传递值来使你的mixin更灵活，就像其它语言的函数一样，传递参数返回结果

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

=box-shadow($color)
  -webkit-box-shadow: 10px 10px 5px $color
  -moz-box-shadow: 10px 10px 5px $color

调用mixins

@import "mixins"
div
  +box-shadow(red)

编译后

div {
  -webkit-box-shadow: 10px 10px 5px red;
  -moz-box-shadow: 10px 10px 5px red; }

继承Extend/Inheritance

这是Sass最有用的功能之一,使用@extend可以将一组CSS属性从一个选择器共享到另一个。它有助于保持你的Sass非常简洁，在下面的示例中，error，warning和success将会继承message

.message
  border: 1px solid #ccc
  padding: 10px
  color: #333


.success
  @extend .message
  border-color: green


.error
  @extend .message
  border-color: red


.warning
  @extend .message
  border-color: yellow


.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Operators 操作符

在你的CSS中做数学是非常有帮助的，Sass有一些标准的数学运算符，如+， - ，*，/和％

.container
  width: 100%

article[role="main"]
  float: left
  width: 600px / 960px * 100%


aside[role="complementary"]
  float: right
  width: 300px / 960px * 100%

引用父选择器&

使用嵌套规则的父选择器除默认值以外的其他方式是有用的。例如，你可能想要有一个特殊的样式，当选择器悬停在上面或当body元素有一个特定的类。在这些情况下，您可以使用＆字符明确指定应插入父选择器的位置

a{
  text-decoration: none;
  &.hover{text-decoration: blink}
}

Nested Properties嵌套属性

CSS有很多属性在“namespaces;”，例如font-family，font-size和font-weight都在字体命名空间。在CSS中，如果你想在同一个命名空间中设置一堆属性，你必须每次都输入它。 Sass提供了一个快捷方式：只需写一次命名空间，然后嵌套其中的每个子属性。例如：

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

Comments注释

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }