课程网站建设的财务分析,电力建设期刊 网站无法访问,建设团购网站费用,中山网站建设哪家强速通Sass语法#xff1a;
sass的特点#xff1a;
由于css的缺陷#xff1a;无法自定义变量#xff0c;不可引用#xff0c;嵌套等。sass/scss/less等css预处理器产生。以sass为例#xff0c;引入了变量、嵌套、运算、混入(Mixin)、继承、颜色处理、函数等诸多功能。方便…速通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%;
}
