SCSS 使用介绍

CSS是控制网页样式的重要组成部分，SCSS 是 CSS 的扩展，它允许使用 变量、嵌套、混合、导入等，能极大的提高 CSS 的开发效率。本文介绍SCSS的简单使用，为了更加凸显 SCSS 的有点，本文采用CSS与SCSS对比的方式讲解。

嵌套规则

• css

#navbar {
  color: blue;
}

#navbar .name {
  color: blue;
}

#navbar .name .child {
  color: yellow;
}

• scss

#navbar {
  color: blue;
  .name {
    color: blue;
    .child {
      color: yellow;
    }
  }
}

引用父选择器 &

• css

.btn-primary {
  background-color: #fff;
}

.btn-primary.active {
  background-color: blue;
}

.btn-primary:hover {
  background-color: blue;
}

.btn-primary:visited {
  background-color: yellow;
}

.btn-primary-success {
  background-color: pink;
}

• scss

.btn-primary {
  background-color: #fff;
  &.active {
    background-color: blue;
  }
  &:hover {
    background-color: blue;
  }
  &:visited {
    background-color: yellow;
  }
  &-success {
    background-color: pink;
  }
}

嵌套属性规则

• css

.attr {
  font-family: fantasy;
  font-size: 1.0em;
  font-line-hight: 1.0em;
  border-radius: 20px;
  border-color: blue;
}

• scss

.attr {
  font: {
    family: fantasy;
    size: 1.0em;
    line-hight: 1.0em;
  };
  border: {
    radius: 5px;
    color: blue;
  };
}