1、可以使用 & 表示父元素选择器
a{
padding: 0 10px;
color: #fff;
&:hover{
color:#ddd;
}
2、嵌套-属性嵌套
嵌套值有些属性拥有同一个开始单词,如border、font
.box2 {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
}
3、混合声明和调用
@mixin 声明
@include 调用
@mixin border-radius{
-webkit-border-radius: 5px;
border-radius: 5px;
}
button {
@include border-radius;
}
得到:
button {
-webkit-border-radius: 5px;
border-radius: 5px;
}
有参数mixin
@mixin border($w:10){
-webkit-border-radius: $w+px;
border-radius:$w+px;
}
.btn{
@include border(3)
}
多个参数mixin
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
border-bottom:$border;
padding-top:$padding;
padding-bottom:$padding;
}
调用:
.imgtext-h li{
@include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
@include horizontal-line($padding:15px);
}
多组值参数mixin
@mixin box-shadow($shadow...) {
-webkit-box-shadow:$shadow;
box-shadow:$shadow;
}
调用:
.box{
border:1px solid #ccc;
@include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}
4、继承类 @extend
$width: 360px;
.box1{
width: $width;
border:1px solid red;
background-color: #fdd;
}
.box2 {
@extend .box1;
border-width: 3px;
}
5、选择器占位符 %placeholder
%mar 若不调用 @extend %mar,则相当于没写这个样式
6、运算
p {
font: 10px/8px; // 纯 CSS,不是除法运算
$width: 1000px;
width: $width/2; // 使用了变量,是除法运算
width: round(1.5)/2; // 使用了函数,是除法运算
height: (500px/2); // 使用了圆括号,是除法运算
margin-left: 5px + 8px/2px; // 使用了加(+)号,是除法运算
}
如果你希望在纯 CSS 中使用变量和 /, 你可以用 #{} 包住变量:
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
7、@if判断
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
//if else
p{
@if 1+1==2{
width:30px;
}@else{
width:100px;
}
}
三目运算符的语法为:
@if(
condition,
condition_true, $condition_false),
三个参数分别表示:条件,条件为真的值,条件为假的值。
$fontBold: true;
p {
font-weight: if($fontBold, bold, normal);
}
//编译生成
p {
font-weight: bold;}
8、for循环
- @for $i from through(包括end)
- @for $i from to(不包括end)
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
9、each循环
- @each 循环就是去遍历一个列表,然后从列表中取出对应的值。
- @each 循环指令的形式: @each $var in < list >
@each $animal in puma, egret, salamander {
.#{$animal}-icon {
background-image: url('/course/565c0c2abc27d77730c072b3/img/#{$animal}.png');
}
}
被编译为:
.puma-icon {
background-image: url('/course/565c0c2abc27d77730c072b3/img/puma.png'); }
.egret-icon {
background-image: url('/course/565c0c2abc27d77730c072b3/img/egret.png'); }
.salamander-icon {
background-image: url('/course/565c0c2abc27d77730c072b3/img/salamander.png'); }
10、while循环
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}