Scss基础用法
一、注释用法:
(1)//comment:该注释只是在.scss源文件中有,编译后的css文件中没有。
(2)/! /:重要注释,任何style的css文件中都会有,一般放置css文件版权说明等信息。
(3)/ /:该注释在compressed的style的css中没有,其他style的css文件都会含有。
二、变量:
1.一般以$开头,有作用域限制
$color: red;
.div{
background-color: $color;
}
2.若子选择器中定义的变量想成为全局变量,可以用!global
.div{
$width: 5px !global;
width: $width;
}
.p{
width: $width;
}
3.嵌套引用,需#{}进行包裹
$left: left;
.div{
border-#{$left}-width: 5px;
}
4.计算
$left: 20px;
.div{
margin-left: $left 12px;
margin-top: $left / 2;
}
三、选择器
1.选择器嵌套(允许属性嵌套)
.div{
.span{
height: 12px;
}
.p{
border: {
color: red;
}
}
}
2.引用父元素(使用&符号)
.div{
&:hover{
cursor: pointer;
}
}
四、代码复用
1.继承(若在div2后再加一个div1,也会影响div2的属性)
.div1{
font-size: 14px;
}
.div2{
@extend .div1;
color: red;
}
2.引用外部的scss文件(文件路径建议用相对路径)
@import ‘ ./test.scss’;
3.Mixin与Include
//使用@mixin命令,定义一个代码块
@mixin left {
float: left;
margin-left: 5px;
}
//使用@include命令,调用这个mixin代码块
div {
@include left;
}
五、参数
eg1:
@mixin common($value1, $value2, $defaultValue: 5px){
display: block;
margin-left: $value1;
margin-right: $value2;
padding: $defaultValue;
}
.div1{
font-size: 8px;
@include common(11px, 13px, 15px);
}
.div2{
font-size: 8px;
@include common(11px, 13px);
}
eg2:
//生成浏览器前缀。
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
//使用的时候调用:
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
六、条件语句
可以用@if(){}来判断,也可以用@if(){}@else来判断
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
七、循环语句
1.for循环
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
2.while循环
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
3.each(类似于for)
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
八、函数
可以自定义函数
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
更多专业前端知识,请上 【猿2048】www.mk2048.com