软件开发还是网站开发好,wordpress首页图片,江苏泰州seo网络优化推广,南浔建设网站Scss基础用法 一、注释用法#xff1a;
#xff08;1#xff09;//comment#xff1a;该注释只是在.scss源文件中有#xff0c;编译后的css文件中没有。
#xff08;2#xff09;/! /#xff1a;重要注释#xff0c;任何style的css文件中都会有#xff0c;一般放置…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
