Sass入门教程

---

sass（Syntsvtically Awesome StyleSheets）是对CSS的扩展，可以编译成传统的CSS。供浏览器使用。使用Sass是为了解决在大型项目中传统css会遇到的重复，可维护性差等问题。Sass新增了nested rules （嵌套规则），variables(变量)，mixins（混入），selector inheritance（选择器继承）等特性
使用sass的优点：
• 简单节点
• 语义化（expressive）
• 重复性好（resable）
• 可维护性和扩展性好

Nesting（嵌套）

sass允许将一个css样式嵌套进另一个样式中，内层样式仅适用于外层样式的选择器范围内，可以理解为层级选择器，有助于降低福原色重复性。转译前：
Sass代码：

.parent {
  color: blue;
  .child {
    font-size: 12px;
  }
}

转译后：
css代码

.parent {
  color: blue;
}
 
.parent .child {
    font-size: 12px;
}

有时候需要直接使用嵌套外层的父选择器，这个时候需要使用&，例如：

Sass代码

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

转译后：
css代码

a {
  font-weight: bold;
  text-decoration: none; 
}
a:hover {
  text-decoration: underline; 
}
body.firefox a {
 font-weight: normal; 
}

嵌套不仅只用于子选择器上，还可以使用在同一个命名空间中的属性上，例如:
Sass代码

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

转译后：
css代码

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

Variables（变量）

变量可以用来储存值，可以增加重用性。在Sass中我们使用$来表示变量，变量类型可以是Numbers（可以有单位或者无单位），String、Booleans、null值（视为空值），甚至可以使用Lists，Maps。变量的使用例子：
Sass代码：

$translucent-white:ragba(255,255,255,0.3);
p{
background-color:$translucent-white;
}

List类型的值可以用空格加逗号分隔，Maps代表一个键和值对集合，键用于查找值。和List不同，Maps必须始终使用括号括起来，并必须使用逗号分隔。
Sass代码：

$font-style-2: Helvetica, Arial, sans-serif;
$standard-border: 4px solid black;
 
p {
    border: $standard-border;
}
 
// maps key:value
$font-style-2: (key1: value1, key2: value2);

Mixins（混入）

混入（mixin）允许您定义可以在整个样式表中重复使用的样式，从而避免了使用无语义的类（class），比如.float-left。混入（mixin）还可以包含所有的css规则，以及任何其他在Sass文档中被允许使用的东西。它们甚至可以带参数，引入变量，只需少量的混入（mixin）代码就能输出多样化样式。
定义的混入@mixin使用@include引用。
例子：
Sass代码：

//定义一个mixin
@mixin large-text{
    font:{
        family: Arial;
        size: 20px;
        weight: bold;
    }
    color: #ff0000;
}
//引用mixin
.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; 
}

再来举一个最常见的例子，比如给属性加上跨浏览器的前缀，这里我们使用了一个参数@radius。例如：

Sass代码：

@mixin border-radius($radius){
 -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
.box{
    @include border-radius(10px);
}

转译后

CSS代码：

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

参数还可以使用默认值，对上面的例子稍作修改
Sass代码：

@mixin border-radius($radius:10px) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
.box1 { @include border-radius(); }
.box2 { @include border-radius(20px); }

转译后：
CSS代码：

.box1 {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}
 
.box2 {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  border-radius: 20px;
}

有时我们也需要处理参数复杂的情形，此时可以使用List、Maps类型来辅助，例如：
JavaScript代码：

//定义一个混入，用于定义线性渐变
@mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF)){
    background: repeating-linear-gradient(
    $direction,
    $stripe-background,
    $stripe-background ($width-percent - 1),
    $stripe-color 1%,
    $stripe-background $width-percent
  );
}
// 定义一个map，作为混入参数
$college-ruled-style: ( 
  direction: to bottom,
  width-percent: 15%,
  stripe-color: blue,
  stripe-background: white
);
//通过map类型作为参数，引用混入
.definition{
    width:  100%;
    height: 100%;
    @include stripes( $college-ruled-style ... );
}

这里有需要注意一个地方，这里的参数是一个可变参数，参数后面需要跟...进行传递，转译后：

.definition {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(to bottom, white, white 14%, blue 1%, white 15%);
}

还有种情况是参数当做字串出传入（或者字符串插值），说的通俗一点就是带引号的字符串将被编译为不带引号的字符串，需要使用#{}插值，例如：
Sass代码：

//使用#{file}接收
@mixin photo-content（$file）{
    content: url(#{$file}.jpg);
    object-fit:cover;
}
.photo{
    @include photo-content('titanosaur');
    width:60%;
    margin:0px auto;
}

转译后
JavaScript代码：

.photo{
    content:url(titanosaur.jpg);
    object-fit:cover;
    width:60%;
    margin:0px auto;
}

混入也可以使用嵌套：

JavaScript代码：

@mixin hover-color($color){
    &:hover{
        color:$color;
    }
}
.word{
    @include hover-color(red);
}

转译后:

.word:hover{
    color:red;
}