速通sass基础语法
速通Sass语法：
sass的特点：
由于css的缺陷：无法自定义变量，不可引用，嵌套等。sass/scss/less等css预处理器产生。以sass为例，引入了变量、嵌套、运算、混入(Mixin)、继承、颜色处理、函数等诸多功能。方便css的开发维护。
变量
使用变量
div {
color: $blue;
}
插值使用变量#{$var}
$side: left;
$my-radius: 5px;
.rounded {
border-#{$side}-radius: $my-radius;
}
其中 border-#{$side}-radius: $my-radius; 渲染结果为：border-left-radius: 5px;
运算
$var: 100px;
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
嵌套
body{
h3{
top:10px;
}
}
注释
/* 块注释 */
// 行注释
混入(Mixin)
@mixin bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
@include bordered;
}
.post a {
color: red;
@include bordered;
}
函数
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
判断逻辑
if-else
$color: red;
p {
color: $color;
@if $color == red {
background-color: #000;
} @else {
background-color: #fff;
}
}
for/while/each
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
其中.#{$member} 是#{$member}字符串插值写法。
继承
.class1 {
border: 1px solid #ddd;
}
.class-sub {
@extend .class1;
font-size: 120%;
}