css - scss语法认识

1. 变量声明-引用

• 命名类名使用中线-分割！ 使用 $ 声明变量：

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

2. 嵌套css

#content {
  article {
    h1 { color: #333 }
  }
  aside { background-color: #EEE }
}
编译后：
#content article h1 { color: #333 }

3. 父选择器&

• 使用 : hover 伪类时：用 & 代表嵌套规则外层的父选择器

article a {
  color: blue;
  &:hover { color: red }
}
编译成：
article a { color: blue }
article a:hover { color: red }

• 使用-分割的命名 -> & 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器

<div class="dashboard-container">
    <div class="dashboard-text">name:{{name}}</div>
    <div class="dashboard-text">roles:<span v-for='role in roles' :key='role'>{{role}}</span></div>
 </div>
 
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
  }
}

4. 群组选择器

• .container h1, .container h2, .container h3 { margin-bottom: .8em }

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

• nav a, aside a {color: blue}

nav, aside {
  a {color: blue}
}

5. 子选择器

• section是article的直接子元素。

article > section { border: 1px solid #ccc }

6. 同层相邻组合选择器

• 同层相邻组合选择器+选择header元素后紧跟的p元素：

header + p { font-size: 1.1em }

7. 同层全体组合选择器

• 同层全体组合选择器~，选择所有跟在article后的同层article元素

article ~ article { border-top: 1px dashed #ccc }

8.属性选择器：遵循相同的命名空间 ，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间

.article {
    font {
        family:"微软雅黑",
        size:30px;
        weight:bold
    }
}