文章目录
变量
定义/引用变量
变量可以定义在规则块内,也可以定义在规则块外。
定义在规则块外,类似于全局变量;定义在规则块内,则类似于局部变量,只能在该规则块内使用。
<body>
<div class="box"></div>
</body>
$box-bck-color:lightskyblue;
.box{
$box-width:100px;
width: $box-width;
height: 100px;
background-color: $box-bck-color;
}
sass index.scss index.css
,编译后结果如下:
.box {
width: 100px;
height: 100px;
background-color: lightskyblue;
}
变量值中引用其他变量
$basic-color:lightskyblue;
$basic-border:2px solid $basic-color;
.box{
width: 100px;
line-height: 100px;
text-align: center;
background-color: lightgoldenrodyellow;
color:$basic-color;
border:$basic-border;
}
变量默认值
$box-bck-color:lightskyblue !default;
嵌套css规则
后代选择器
<body>
<div class="container">
<div class="content"></div>
</div>
</body>
.container{
width:100px;
height: 100px;
background-color: lightskyblue;
display: flex;
align-items: center;
justify-content: center;
.content{
width: 50%;
height: 50%;
background-color: orange;
border-radius: 50%;
}
}
父选择器
<body>
<div class="container">
<div class="content"></div>
</div>
</body>
.container{
width:100px;
height: 100px;
background-color: lightskyblue;
display: flex;
align-items: center;
justify-content: center;
.content{
width: 50%;
height: 50%;
background-color: orange;
border-radius: 50%;
cursor:pointer;
&:hover{
background-color:lightgoldenrodyellow;
}
}
}
群组选择器
<body>
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
</body>
.container{
width: 200px;
height: 200px;
background-color:lightskyblue;
display: flex;
justify-content:space-evenly;
align-items: center;
.box1,.box2{
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 5%;
flex:0 1 60px;
}
.box1{
background-color: orange;
}
.box2{
background-color: lightgoldenrodyellow;
}
}
子选择器/兄弟选择器/相邻兄弟选择器
- 子选择器
>
,仅包含 儿子元素 - 兄弟选择器
~
,包含 后面所有的兄弟元素 - 相邻兄弟选择器
+
,仅包含 后面相邻的兄弟元素
<body>
<ul class="list">
<li class="item"><a href="">1</a></li>
<li class="item"><a href="">2</a></li>
<li class="item"><a href="">3</a></li>
</ul>
</body>
.list{
list-style: none;
padding:0;
margin:20px;
display: inline-block;
vertical-align: middle;
overflow: hidden;
background-color: lightskyblue;
>.item{
display: inline-block;
vertical-align: middle;
overflow: hidden;
>a{
width: 36px;
line-height: 36px;
margin:10px;
text-align: center;
text-decoration: none;
font-size:14px;
color:hsla(0,50%,0%,.3);
background-color: orange;
float:left;
&:hover{
background-color:orangered;
color:hsla(0,50%,0%,1);
}
}
}
}
嵌套属性
<body>
<div class="container">hello</div>
</body>
$height:100px;
.container{
width: 100px;
height: $height;
line-height: $height;
text-align: center;
border:{
width:2px;
style:solid;
color:lightskyblue;
}
}
$height:100px;
.container{
width: 100px;
height: $height;
line-height: $height;
text-align: center;
border:2px solid lightskyblue{
top:0;
bottom: 0;
}
}
混合器
无参混合器
定义混合器,@mixin 混合器名 {css样式}
;
使用混合器,@include 混合器名;
。
混合器中包含属性
<body>
<div class="container">
<div class="content">hello</div>
</div>
</body>
@mixin blue-square{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;;
background-color:lightskyblue;
color:white;
}
.container{
width: 200px;
height: 200px;
background-color: lightgoldenrodyellow;
display: table-cell;
vertical-align: middle;
border-radius: 50%;;
.content{
margin:0 auto;
border-radius: 50%;
@include blue-square;
}
}
混合器中包含属性和css规则
<body>
<div class="container">
<div class="content">hello</div>
</div>
</body>
@mixin blue-square{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;;
background-color:lightskyblue;
color:white;
}
@mixin ring{
width: 200px;
height: 200px;
background-color: lightgoldenrodyellow;
display: table-cell;
vertical-align: middle;
border-radius: 50%;;
.content{
margin:0 auto;
border-radius: 50%;
@include blue-square;
}
}
.container{
@include ring;
}
含参混合器
定义混合器,@mixin 混合器名() {css样式}
;
使用混合器,@include 混合器名();
。
<body>
<div class="container">
<div class="content">hello</div>
</div>
</body>
@mixin blue-square($width,$height,$bck-color,$color){
width: $width;
height: $height;
line-height: $height;
text-align: center;;
background-color:$bck-color;
color:$color;
}
@mixin ring($width,$height,$bck-color){
width: $width;
height: $height;
background-color: $bck-color;
display: table-cell;
vertical-align: middle;
border-radius: 50%;;
.content{
margin:0 auto;
border-radius: 50%;
@include blue-square($width/2,$height/2,lightskyblue,white);
}
}
.container{
@include ring(200px,200px,lightgoldenrodyellow);
}
默认参数
<body>
<div class="container">
<div class="content">hello</div>
</div>
</body>
@mixin blue-square(
$width:100px,
$height:100px,
$bck-color:lightskyblue,
$color:white)
{
width: $width;
height: $height;
line-height: $height;
text-align: center;;
background-color:$bck-color;
color:$color;
}
@mixin ring(
$width:200px,
$height:200px,
$bck-color:lightgoldenrodyellow)
{
width: $width;
height: $height;
background-color: $bck-color;
display: table-cell;
vertical-align: middle;
border-radius: 50%;;
.content{
margin:0 auto;
border-radius: 50%;
@include blue-square();
}
}
.container{
@include ring();
}
继承
@extend
<body>
<span class="warn">!</span>
<span class="seriousWarn">!</span>
</body>
.warn{
display: inline-block;
width: 48px;
line-height:48px;
background-color:orange;
color:white;
border-radius: 50%;
text-align: center;
font-family: Microsoft Yahei;
font-size:36px;
font-weight: bold;
}
.seriousWarn{
background-color:orangered;
@extend .warn;
}
sass文件导入
可以在规则块外导入,也可以在规则块外导入。
在规则块外导入
<body>
<div class="container">
<div class="content">hello</div>
</div>
</body>
//help.scss
.container{
.content{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;;
background-color:lightskyblue;
color:white;
}
}
//index.scss
@import "./help.scss";
.container{
width: 200px;
height: 200px;
background-color: lightgoldenrodyellow;
display: table-cell;
vertical-align: middle;
border-radius: 50%;;
.content{
margin:0 auto;
border-radius: 50%;
}
}
在规则块内导入
<body>
<div class="container">
<div class="content">hello</div>
</div>
</body>
//help.scss
.content{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;;
background-color:lightskyblue;
color:white;
}
//index.scss
.container{
@import "./help.scss"
}
原生CSS导入/sass导入
局部文件
文件名以_
开头,编译时不会生成对应的独立.css
文件
定义变量默认值/覆盖变量默认值
!default
//help.scss
$box-bck-color:lightskyblue !default;
.box{
$box-width:100px;
width: $box-width;
height: 100px;
background-color: $box-bck-color;
}
//index.scss
$box-bck-color: orange;
@import "./help.scss";