SCSS 语法使用 .scss
文件扩展名。除了极少部分的例外, 它是 CSS 的超集,也就是说 所有有效的 CSS 也同样都是有效的 SCSS 。 由于其与 CSS 的相似性,它是最容易上手的语法, 也是最流行的语法。
缩进的语法
缩进语法是 Sass 的原始语法,因此它使用文件 扩展名 .sass
。由于这个扩展名的原因,这种语法有时直接被称为 “Sass"。 缩进语法支持与 SCSS 相同的所有特性,但是它使用 缩进而不是花括号和分号来描述文档的格式。
通常,在 CSS 或 SCSS 中书写花括号时, 对应着在缩进语法中再缩进一层即可。 任何一行结束, 都被当作分号。在缩进语法中还有一些额外的差异, 这些差异将贯穿整个手册中给出提示。
cnpm install sass-embedded
<style lang="scss" scoped>
.common-layout {
.el-header {
height: 60px;
background-color: green;
}
.el-aside {
width: 200px;
background-color: yellow;
}
.el-main {
background-color: red;
}
}
</style>