scss语法介绍
1.自定义变量
$color:pink;
.test1{
background-color:$color;
}
通过编译工具编译出来后
.test1{
background-color:pink;
}
注：时间原因我在这里只写scss了，就不写编译后的结果，一来方便大家自己去尝试编译，二来增加大家对scss的理解：编译工具kaola很好的一个编译工具，大家可以百度如何使用，再这里就不做过多介绍了。
2.插入一个变量
$right:right;
.test2{
border-#{$right}:1px solid #000;
}
3.子元素书写
.text3{
.text33{
border:1px solid;
}
}
4.样式的加减乘除
$paramer:3;
.text4{
height:(1px+3px);
(96px/6);
right: $paramer*4;
}
5.继承
.class5{
border:1px solid red;
}
.class5E{
@extend .class5;
font-size:20px;
}
6.代码块的复用
@mixin text6 {
height:50px;
left:20px;
}
.text6M{
@include text6
}
//这里的mixin就是定义一个可以复用的代码段，当然我们也可以给它传递一个参数，就像这样一样：
@mixin text66($height){
height:$heigth;
left:20px;
}
.text6N{
@include text66(100px);
}
7.if语法，通过对if的判断来决定使用那一套样式
.text7{
@if 1 +2 == 3 {
border:1px solid ;
}
@if 5 < 3 {
border:2px dsahed red;
}
}
当然，我们都知道if一般是要和else配合的，所以我们也可以这样写
.test77{
@if lightness($color) > 30%{
background-color:#fff;
}@else{
background:#0ff;
}
}
这里的lightness是一个scss颜色函数，$color指向之前定义的值。
8.循环语法，包括最常见的三种循环方法，for,while,each
//for 循环
@for $i from 1 to 5 {
.item-#{$i} {
border:#{$i}px solid;
}
}
//while 循环
$m:8;
@while $m > 0 {
.items-#{$m} {
2em*$m;
}
$m:$m - 2 ;
}
//这里可以对$m进行运算 让它每次都减去2
//each 语法
@each $img in q,w,e,r {
.#{$img} {
background-image:url('#{$img}.png')
}
}
9.函数语法
@function double ($number){
@return $number*2;
}
.text9{
font-size:double(20px);
}
10.import导入语法
@import 'other.scss'
这样就在你现在的scss中导入了other.scss编写的scss