一、定义变量
<style lang='scss' scoped>
// scss 定义变量 基本用法
$fontSizeColor: #468dcc;
$mainBackgroundColor: #eeeeee;
// scss变量作为字符串拼接
$direction: left;
.login {
color: $fontSizeColor;
background-color: $mainBackgroundColor;
margin-#{$direction}: 10px;
}
</style>
二、简单的计算 加减乘除
<style>
$var: 10;
div {
padding-top: $var * 10px;
}
</style>
三、选择器嵌套
<style>
$bgColor: #468dcc;
$ftColor: red;
div {
background-color: $bgColor;
p {
color: $ftColor;
span {
display: block;
}
}
}
</style>
四、继承样式 @extend
<style>
.commonClass {
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
border: 1px solid #468dcc;
}
.myDiv {
@extend .commonClass;
overflow: hidden;
}
</style>
五、@mixin @include 使用,强大之处在于可以传递参数
<style>
$fontSizeColor: #468dcc;
// 不传参
@mixin myModel {
width: 200px;
height: 200px;
background: $fontSizeColor;
}
.test {
@include myModel()
}
// 传参, 初始化默认值
@mixin myModelParams($value: 200px) {
width: $value;
height: $value;
background: $fontSizeColor;
}
.test {
@include myModelParams(200px);
}
</style>
六、导入外部scss、css @import
<style lang="scss">
@import "./assets/global.scss"
</style>
七、高级用法,循环语句和自定义函数的使用
@for $i from 1 to 10 {
// .myLi1 .myLi2 .myLi3 ...... .myLi10
.myLi#{$i} {
border: #{$i}px solid #468dcc;
}
}
// 自定义函数
@function myScssFun($p) {
@if $p > 10 {
@return $p;
} @else {
@return $p * 2;
}
}
div {
font-size: myScssFun(10px);
}