sass使用学习

1. 常用的选择器

• & 父选择器

.article a {
  color: blue;
  &:hover { color: red }
}

//相当于
.article a { color: blue }
.article a:hover { color: red }

.article {
    color: black;
    &-content { border: 1px solid; }
}

//相当于
.article {
    color: black;
}
.article-content {
    border: 1px solid;
}

• > 里面的第一个

//div里第一个p标签
div > p { color: red; }

//div里的所有p标签
div p { color: red; }

• + 后面紧跟着的同一父级的元素

• ~ 后面的所有同层，不管它们之间隔了多少其他元素

• 嵌套属性

.nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

//相当于
.nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

•  :deep() 深度选择器

样式穿透，覆盖子组件中加了scoped的样式或者第三方组件的样式

2. 混合器@mixin的使用

@mixin common-radius {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

//需要用到的地方
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include common-radius;
}

• 带参数的混合器

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

.line {
  @include link-colors(blue, red, green);
}