5分钟上手Sass

用作变量

定义变量

$font-stack: Helvetica, sans-serif;
$primary-color:#333;

使用变量

body{
  font:100% $font-stack;
  color: $primary-color
}

样式嵌套

nav {
  ul {
    margin:0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none; 
  }
}

Modules 样式模块化 通常命名以下滑线开头: _base.scss

定义模块文件_base.scss

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

style.scss 引入模块_base.scss

@use 'base';
.inverse {
  // background-color: base.$primary-color;
  color: white;
}

Mixins (混合) ： 可传参数

定义mixins

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property
}

使用mixins

.box{
  @include transform(rotate(30deg));
}

拓展与继承 extend/inheritance

注意：当扩展不被引用时 是不会生成的 即便你写了它 就比如下面的equal-heights

//声明样式 %equal-heights 和%message-shared 
%equal-heights{
  display: flex;
  flex-wrap: wrap;
}
%message-shared{
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
//引用样式 %message-shared
.message{
  @extend %message-shared;
}
.success{
  @extend %message-shared;
  border-color: green;
}
.error{
  @extend %message-shared;
  border-color: red;
}
.warning{
  @extend %message-shared;
  border-color: yellow;
}

操作符：

在css 中 经常需要做数学计算，Sass 支持一些标准的数学运算符，例如+，-，*，%

.container{
  width: 100%;
}
article[role="main"]{
  float:left;
  width: 600px / 960px*100%;
}
aside[role="complementary"]{
  float:right;
  width: 300px/960px * 100%;
}