前言
参考来源：
- https://www.jianshu.com/p/a99764ff3c41
- https://www.sass.hk/guide/
问题整合
- vue引入SCSS: 安装node-sass和sass-loader
变量
// 声明
$primary-color: #333;
// 引用
.selected {
border: 1px solid $primary-color;
}
嵌套
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
父级选择器&
#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; }
}
}
>首个子元素+同层元素~同层所有元素
嵌套属性
.demo {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
引入
@import 不同于CSS，SCSS会将相关文件导入，归纳成同一个CSS文件，无需发起额外的下载请求
/* 引入reset.scss */
@import 'reset'
静默注释
使用//注释，其内容不会出现在生成的css文件中
混合
@mixin name
@mixin border-radius($radius) {
border-radius: $radius;
-ms-border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
.box {
@include border-radius(10px);
}
继承
@extend
// 这段代码不会被输出到最终生成的CSS文件，因为它没有被任何代码所继承。
%other-styles {
display: flex;
flex-wrap: wrap;
}
// 下面代码会正常输出到生成的CSS文件，因为它被其接下来的代码所继承。
%message-common {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message-common;
}
