Sass日常使用(1)

Sass 是对 css的扩展，让 css 语言更强大、具有逻辑并且可以减少代码的冗余。 它允许使用变量、嵌套、函数等众多功能。
在这里就不介绍安装了，但是有一个命令需要我们注意一下：可以命令 Sass 监视文件或目录的改动并更新 css

// watch a file
sass --watch file.scss:file.css 

// watch a directory
sass --watch app/sass:public/stylesheets

下面我们一起来看看sass都有哪些功能！

变量

变量的声明，所有变量以$开头：

$color: #ccc;
$border: 5px solid pink;

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

$side : left;
.rounded {
  border-#{$side}: 1px solid #ccc;  
}

变量的引用：

$color: #ccc;
$border: 5px solid pink;

div {
  background-color: $color;
  border: $border;
}

//编译后

div {
  background-color: #ccc;
  border: 5px pink solid;
}

当然你也可以在变量中引用变量：

$color: #ccc;
$border: 5px solid $color;

div {
  border: $border;
}

//编译后

div {
  border: 5px #ccc solid;
}

注意！变量可以在css规则块定义之外存在，当变量定义在css规则块内，那么该变量只能在此规则块内使用。css生成时，变量会被它们的值所替代。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。

嵌套规则

在css中，出现这样的代码是一件很让人恼火的事情

.content header p { color: #333; }
.content header div { margin-bottom: 20px; }
.content footer { background-color: #ccc; }

但是在sass中你可以只写一遍，并且可读性会更高

.content {
  header {
    p { color: #333; }
    div { margin-bottom: 20px; }
  }
  footer { background-color: #ccc }
}

//编译后

.content header p { color: #333; }
.content header div { margin-bottom: 20px; }
.content footer { background-color: #ccc; }

在sass中除了选择器可以嵌套，属性也能嵌套

div {
  border: {
    color: red;
  }
}

//编译后

div { border-color: red; }

注意：属性后面必须加上冒号。
在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成

a {
  &:hover {
    color:red;
  }
}

//编译后

a:hover { color: red; }

继承

在sass中，如果你想继承另一个选择器，可以使用@extend命令。比如现有一个class1类，class2类想要继承class1类的样式就可以写成这样

.class1 {
  color: red;
  font-size: 18px;
}
.class2 {
  @extend .class1;
  background: blue;
}

//编译后

.class1 { 
  color: red;
  font-size: 18px;
}
.class2 { 
  color: red;
  font-size: 18px;
  background: blue;
}

Mixin

Mixin是可以重复使用的代码块，首先我们用@mixin定义一个代码块

@mixin style {
  color: #fff;
  font-size: 18px;
}

如果你需要调用style代码块，需要用@include命令

p {
  @include style;
}

mixin除了可以重复使用，它还可以指定参数和缺省值，首先我们来定义一个需要指定参数的mixin

@mixin style ($value){
  color: #fff;
  font-size: $value;
}

然后在使用的时候根据需要加上参数就可以了

p{
  @include style(18px);
}