sass基础篇
1、为啥 scss/less 要支持嵌套语法
2、什么时候需要嵌套语法
sass 重要语法
一 #{}
二 $变量
变量类型:数字,boolen,字符串(有引号,无引号),数组,对象
三 @each 变量数组或者对象
1.便利数组
$list: (1, wuhan), (2, chengdu), (3, shanghai), (4, north-america); //图片名称
@each $index, $city in $list {
.item:nth-of-type(#{$index}) {
background: url('../../../assets/image/#{$city}-pc.png')
no-repeat
right;
background-size: cover;
}
}
2,遍历对象
//可通过map_get()函数取对象内部数据
$list: (pic1:(value:1,url:1),pic2:(value:2,url:2)); //图片名称
@each $label, $value in $list {
.#{$label} {
background: url(map_get($value,url))
no-repeat
right;
background-size: cover;
}
}
四.@mixin 和@include
作用:代码归类,减少重复代码
为什么要使用@mixin 减少使用@extend
五 @if @else if @else
注意,这儿只能使用 == 没有 ===
$is = true;
.content {
@if $is == true {
display:block;
}
@else {
display:none;
}
width:100%;
height:500px;
}