scss 基本语法整理

scss 基本使用

Variables 变量

• 声明变量时需以 $ 开头
• scss 语法

// 定义变量
$primary-color: #1269b5;
$primary-border: 1px solid $primary-color;

div.box {
   
  background-color: $primary-color;
}

h1.page-header {
   
  border: $primary-border;
}

• 编译后的 css

div.box {
   
  background-color: #1269b5;
}

h1.page-header {
   
  border: 1px solid #1269b5;
}
/*# sourceMappingURL=Variables.css.map */

嵌套 Nesting

普通嵌套

• scss 语法

.nav {
   
  height: 100px;
  ul {
   
    margin: 0;
    li {
   
      float: left;
      list-style: none;
      padding: 5px;
    }
  }
}

• 编译后的 css

.nav {
   
  height: 100px;
}

.nav ul {
   
  margin: 0;
}

.nav ul li {
   
  float: left;
  list-style: none;
  padding: 5px;
}

调用父选择器

• scss 语法

.nav {
   
  height: 100px;
  ul {
   
    margin: 0;
    li {
   
      float: left;
      list-style: none;
      padding: 5px;
    }
    a {
   
      display: block;
      color: #000;
      padding: 5px;
      &:hover {
   
        background: #0d2ffe;
        color: #fff;
      }
    }
  }
  & &-text {
   
    font-size: 15px;
  }
}

• 编译后的 css

.nav {
   
  height: 100px;
}

.nav ul {
   
  margin: 0;
}

.nav ul li {
   
  float: left;
  list-style: none;
  padding: 5px;
}

.nav ul a {
   
  display: block;
  color: #000;
  padding: 5px;
}

.nav ul a:hover {
   
  background: #0d2ffe;
  color: #fff;
}

.nav .nav-text {
   
  font-size: 15px;
}

属性嵌套

• scss 语法

body {
   
  font: {
   
    family: Helvetica, Arial, sans-serif;
    size: 15px;
    weight: normal;
  }
}

.nav {
   
  border: 1px solid #000 {
   
    left: 0;
    right: 0;
  }
}

• 编译后的 css

body {
   
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: normal;
}

.nav {
   
  border: 1px solid #000;
  border-left: 0;
  border-right: 0;
}

混合 Mixins

基本使用

• scss 语法

// 定义
@mixin alert {
   
  color: #8a6b3a;
  background-color: #fcf8e3;
  a {
   
    color: #664f2b;
  }
}

// 引用
.alert-waring {
   
  @include alert;
}

• 编译后的 css

.alert-waring {
   
  color: #8a6b3a;
  background-color: #fcf8e3;
}

.alert-waring a {
   
  color: #664f2b;
}

携带参数

• scss 语法

@mixin alert($text-color, $background) {
   
  color: $text-color;
  background-color: $background;
  a {
   
    color: darken($color: $text-color, $amount: 10%); // $text-color颜色加深10%
  }
}

// 引用
.alert-waring {
   
  @include alert(#8a6b3a, #fcf8e3);
}
// 指定形参
.alert-info {
   
  @include alert($background: #d9edf7, $text-color: #31708f);
}

• 编译后的 css

.alert-waring {
   
  color: #8a6b3a;
  background-color: #fcf8e3;
}

.alert-waring a {
   
  color: #664f2b;
}

.alert-info {
   
  color: #31708f;
  background-color: #d9edf7;
}

.alert-info a {
   
  color: #245269;
}

继承 extend

• scss 语法

.alert {
   
  padding: 15px;
}

.alert a {
   
  font-weight: bold;
}

.alert-info {
   
  @extend .alert;
  background-color: #d9edf7;
}

• 编译后的 css

.alert,
.alert-info {
   
  padding: 15px;
}

.alert a,
.alert-info a {
   
  font-weight: bold;
}

.alert-info {
   
  background-color: #d9edf7;
}

导入 import