sass学习

   sass学习 中文文档 https://www.sass.hk/docs/

1. sass特色功能

• 完全兼容 css3
• 在css基础上增加变量、嵌套、混合等功能
• 通过函数进行颜色值与属性值的运算
• 提供控制指令等高级功能
• 自定义输出格式

   2. 嵌套规则

#main p {
    color: #ddd;
    width: 30%;
    .redbox {
        background: #000;
        color: #fff;
    }
}
//相当于
#main p {
    color: #ddd;
    width: 30%;

}
#main p .redbox {
    //与上相同
}

  3. 父选择器采用&

    在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器 

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

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

  4. 属性嵌套

    有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
//相当于
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}

  5. 使用变量定义属性值

     $width: 5px;

  6. 支持运算

  7. 支持插值语句#{}

$name: foo;
$attr: border;
p .#{$name} {
    #{attr}-color: blue;
}

 8. 导入为@import

 9. @entend实现继承

.error {
    border: 1px #000;
}
.see {
    @extend .error;
    border-width: 3px;
}
//相当于
.see {
    border: 1px #000;
    border-width: 3px;
}

  10. 使用@if、@else和for等实现样式的条件展示

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

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}