[JavaScript知识库]零基础学前端—less和sass

Less

用@符号声明变量,如下

@color:red;
.box{
 ? ?color: @color;
}

里面宽高可以四则运算，除法需要用括号括起来，而且运算符号用空格间隔起来

Less和css的区别

1、数值可以进行四则远算

2、定义变量（全局和局部）

3、可以根据dom结构嵌套

4、注释，单行//不会在css里出现

5、mixin混入，声明一个样式块，直接运用

sass

用$符号声明变量,如下

$color:red;
.box{
 ? ?color: $color;
}

当用到混合模式的时候，也就是几个值一起定义的时候，就要用到@mixin来定义，然后后面要用的时候用@include来进行应用，如下

$color:red;
@mixin border($pading,$size,$bg){
 ? ?padding: $pading;
 ? ?font-size: $size;
 ? ?background-color: $bg;
}
.box{
 ? ?width: 200px;
 ? ?height: 200px;
 ? ?color: $color;
 ? ?@include border(20px, 30px,purple )
}

也可以继承，前面加@extent，通过关键词“@extend"来继承已存在的类样式块。

占位符

%placeholder声明的代码如果不不被@extend调?用的话，不会产?生任何