Home Archives Categories Tags

SCSS 使用介绍

发布时间: 更新时间: 总字数:242 阅读时间:1m 作者: 分享

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

嵌套规则

  • 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;
  };
}
最新评论
加载中...