Less和Sass的区别

less

一. 什么是less

1. Less 是一门 CSS 预处理语言，为CSS赋予了动态语言的特征。
2. CSS需要书写大量看似没有逻辑的代码, 不方便维护及扩展, 也不利于复用,
3. 造成这些原因的本质源于CSS是一门非程序式的语言, 没有变量/函数/作用域等概念

二. less中的注释

less中的注释和JS中的注释一样, 也有单行注释和多行注释
less中单行注释和多行注释最大的区别在于: 是否会被编译
单行注释不会被编译(不会出现在编译后的文件中)
多行注释会被编译 (会出现在编译后的文件中)

三. less中的变量

1. less中定义变量的格式： @变量名称: 值;
2. 全局变量
   定义在{}外面的就是全局的变量, 什么地方都可以使用

@w:400px;
@c:gold;
@m:purple;
// 以上三个@w,@c,@m他们都是全局变量 因为他是定义在{}之外的

3. 局部变量
   定义在{}里面的就是局部变量, 只能在{}中使用

@h:@w;
.box1{
    // 定义局部变量
    // 局部变量 只能在当前的这个{}里面使用 不能再其他地方使用
    @m:pink;

    // 使用我们定义的变量
    width: @w;
    height: @h;
    background: @c;
    // 如果局部变量和全局变量重名的时候，优先使用局部变量
    color: @m;
}

四.less变量插值和运算

什么是变量插值?
1.在less中如果属性的取值可以直接使用变量, 但是如果是属性名称或者选择器名称并不能直接使用变量
2.如果属性名称或者选择器名称想使用变量中保存的值, 那么必须使用变量插值的格式

1. 变量插值的格式： @{变量名称}

// 什么是插值 @m可以充当一个css属性值
@m:100px;
// 还可以当什么？当一个选择器  当一个属性名

@d:div;     //变量插值
@w:width;


//变量插值的用法  @后面的变量名要加花括号
 @{d}{
     @{w}:@m; //width:100px
     height: 100px;
     background: red;
 }

2. 运算
   less中的运算和CSS3中新增的calc函数一样, 都支持+ - * / 运算

五.less中的混合

1. 带参数的混合

.whc(@w, @h, @c){
width: @w;
height: @h;
background: @c;

2. 带参数的混合, 并且带默认值

.whc(@w:100px, @h:100px, @c:pink){
width: @w;
height: @h;
background: @c;
}

3. 给混合的指定形参传递数据

.whc(@c:red);

4. 可变参数

animate学Jq的时候 animate是以渐变的方式让属性变化 形成动画的效果

.animate(@name,@time,@mode,@delay){
     transition: @name @time @mode @delay;
     //transition是控制动画变化的
     // 第一个参数是我们要形成动画的属性 默认的是all 
     // 第二个参数 动画的时间
      // 第三个参数曲线速度
       // 第四个参数 定义从何时开始
       transition: @arguments;
 }

arguments
就是我们把所有的参数都收集过来了 是一个参数的集合 arguments中保留了调用混合时，我们传入的所有参数 也就是说
我们调用这个animate混合的时候 传进去的所有参数 都保留在了arguments中

六. less中的匹配模式

1. 混合的匹配模式
   就是通过混合的第一个字符串形参,来确定具体要执行哪一个同名混合
   小三角 如何去做小三角
   我们现在创建一个混合 就是用来做小三角的

.triangle(@_,@width,@color){
    width: 0px;
    height: 0px;
    border-style: solid solid solid;
    font-size: 10px;
    border-width: @width;
}


// Down表示向下
.triangle(Down,@width,@color){
    // width: 0px;
    // height: 0px;
    // border-style: solid solid solid;
    // border-width: @width;
    border-color: @color transparent transparent transparent;
}
// 向左的三角
.triangle(Left,@width,@color){
    // width: 0px;
    // height: 0px;
    // border-style: solid solid solid;
    // border-width: @width;
    // 上右下左的顺序
    border-color: transparent @color transparent transparent ;
}
// 向右的三角
.triangle(Right,@width,@color){
    // width: 0px;
    // height: 0px;
    // border-style: solid solid solid;
    // border-width: @width;
    border-color: transparent transparent transparent @color ;
}
.triangle(Top,@width,@color){
    // width: 0px;
    // height: 0px;
    // border-style: solid solid solid;
    // border-width: @width;
    border-color: transparent transparent @color transparent ;
}
div