1.变量
1.1定义
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
1.2引用
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.app-page {
.select {
$highlight-border: #F00;
border: $highlight-border;
}
// .selected {
// border: 1px solid #F00;
// }
}
1.3变量名用中划线还是下划线分隔
//$highlight-color === $highlight_color
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.app-page {
.select {
$highlight-border: 1px solid #F00;
border: $highlight-border;
color: $highlight_color
}
}
编译后
.app-page. selected {
border: 1px solid #F00;
color: #F90;
}
2.嵌套
&代表父级名字
<section class="app-page">
<div class="select">select scss</div>
<div id="content">
<div class="article">
<h1>test</h1>
<p>test</p>
<a>
<p>test</p>
</a>
</div>
<div class="aside">
</div>
</div>
</section>
.app-page {
#content {
.article {
background-color: #F00;
p {
background-color: #FF0;
}
h1 {
background-color: #00f;
}
a>p {
background-color: #0f0;
&:hover {
background-color: #999;
}
}
}
.aside {
background-color: #0ff;
}
}
}
编译后:
#content .article {
background-color: #F00;
}
#content .article p {
background-color: #FF0;
}
#content .article h1 {
background-color: #00f;
}
#content .article a>p {
background-color: #0f0;
}
#content .article a>p:hover {
background-color: #999;
}
提取出来写
.border {
color: #F90;
border: {
style: solid;
width: 1px;
color: #f00;
}
margin: {
left:0px;
right: 0px;
}
font: {
size: 30px;
weight: bold;
}
}
.border {
color: #F90;
border-style: solid;
border-width: 1px;
border-color: #f00;
margin-left: 0px;
margin-right: 0px;
font-size: 30px;
font-weight: bold;
}
- 相邻
~多个相邻
直接字子节点
(空格), 多个子节点
3.导入SASS文件
@import 导入
@import "blue-theme"
4.混合器
一般使用
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.mixin {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
编译后:
.mixin {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
属性也行
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
传参数
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
a {
@include link-colors(blue, red, green);
}
默认值, 参数顺序就可以任意
a {
@include link-colors(
$normal: blue,
$visited: green,
$hover: red
);
}
5.继承
<div class="error">error</div>
<div class="seriousError ">seriousError </div>
.error{
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
编译后:
.seriousError {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
也就是html里面有这样的样式继承
<div class="error seriousError ">error</div>
.error{
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}