css预编译之scss与less
官网地址： http://lesscss.org/
VSCode插件：Easy LESS
官网地址： https://sass-lang.com/
VSCode插件：Easy Sass
语法：
注释
//单行注释不会编译出来
/* 多行注释 会被编译出来*/
变量
less:
@number:123px;
.box {
width : @number;
}
SCSS:
$number:123px;
.box {
width : $number;
}
插值
less:
@key:margin;
@i :3;
.box {
@{key} : auto;
}
.box@{i} { //.box3
@{key} : auto;
}
scss:
$key:margin;
.box {
#{$key}：auto
}
作用域
sass的作用域是有顺序的 向前看
less 就近查找，如果内部有值 就不去外面查了
选择器嵌套
正常css
// ul li{}
// ul li div{}
// ul li p{}
less
ul{
list-style:none;
li{
float:left;
div{ margin:10px;}
p{ margin:20px;}
}
}
scss
ul{
list-style:none;
li{
float:left;
div{ margin:10px;}
p{ margin:20px;}
}
伪类嵌套 &:hover
ul{
list-style:none;
li{
float:left;
div{ margin:10px;}
p{ margin:20px;}
}
&:hover{ .. }
}
属性嵌套(只有Sass有)
font : {
size : 10px;
weight : bold;
family : 宋体;
}
运算
less
@num : 100px;
.box4{
width : @num * 3;
height : @num + 10em;
margin : 10em + @num; //单位不同以第一个参数为准
font : 20px / 1.5;
padding : ~"20px / 1.5"; //~ 取消转义
color : #010203 * 2;
}
sass
$num : 100px;
.box4{
width : $num * 3;
//Sass中如果单位不同的话，是不能运算
//height : $num + 20em;
font : 20px / 1.5;
// 默认 / 是分割的操作
padding : (20px / 1.5); //()让他算！
color : #010203 * 2;
}
单位，转义，颜色
函数
.box5{
width : round(3.4px);
height : percentage(0.2);
margin : random();
padding : sqrt(25%); //sass没有
}
scss自定义函数
@function sum($n,$m){
@return $n + $m;
}
.box5{
width : round(3.4px);
height : percentage(0.2);
margin : random();
padding : sqrt(25%);
font-size : sum(4px , 5px);
}
混入， (不同的css组合在一起)
less
.show{
display : block;
}
.hide(@color){ //加（）不渲染，只混入！
display : none;
color : @color;
}
.box6{
width : 100px;
.show;
.hide(blue);
}
scss
@mixin show {
display : block;
}
@mixin hide($color) {
display : none;
color : $color;
}
.box6{
width : 100px;
@include show;
@include hide(red);
}
命名空间(Less)，
#nm(){
.show{ display: inline-block; }
}
.box7{
#nm.show;
}
继承
less
.line{
display : inline;
}
.box7{
&:extend(.line);
}
.box8{
&:extend(.line);
}
//.line.box7.box{display : inline;}
scss
%line{
display : inline;
}
.box7{
@extend %line;
}
.box8{
@extend %line;
}
//.box7,.box8
合并
less //+ 表示用，合并 +_表示用空格合并
.box{
background+ :url(a.png);
background+:url(b.png);
transform+_:scale(2);
transform+_:rotate(30deg);
}
scss
$background:(
a:url(a.png),
b:url(b.png));
$tranform:(
a:scale(2),
b:rotate(30deg)
);
.box{
backfground:map-values($background)
transform:zip(map-values($tranform)...)
}
.box{
background: url(),url();
transform: scale(2) rotate(30deg)
}
媒体查询
.box10{
width : 100px;
@media all and ( min-width : 768px ){
width : 600px;
}
@media all and ( min-width : 1440px ){
width : 900px;
}
}
条件
less
@count : 3;
.get(@cn) when ( @cn > 4 ){
width : 100px + @cn;
}
.get(@cn) when ( @cn < 4 ){
width : 10px + @cn;
}
.box11{
.get(@count);
}
scss
$count : 3;
.box11{
@if($count > 4){
width : 100px + $count;
}
@else{
width : 10px + $count;
}
}
循环
less 利用递归的思想
@count2 : 0;
.get2(@cn) when (@cn < 3){
.get2((@cn+1));
.box-@{cn}{
width: 100px + @cn;
}
}
.get2(@count2);
scss
@for $i from 0 through 2{
.box-#{$i}{
width : 100px + $i;
}
}
导入
less
@import './reset.less';
cscc
@import './reset.scss';