[转]Less的基本使用

原文地址:https://www.cnblogs.com/luwenfeng/p/11700432.html

Less介绍

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。Less 可以运行在 Node 或浏览器端。

Less的基本使用

注释

// 这是单行注释

/*
	这是多行注释
*/

注意：单行注释不会参与预处理, 只有多行注释才会参与预处理。

变量

// less中定义变量额格式：@变量名: 变量值
@ 100px;

// less中也可以通过值传递给变量赋值
@height: @width;

注意：

• less中也有作用域相关概念,不在 {} 内的是全局变量;在 {} 内的是局部变量,只能在 {} 使用

• less中只有在相同作用域中的变量才会相互影响, 后定义的会覆盖先定义的

• less中变量的取值服从就近原则

• less中变量的加载时延迟加载,写在后面也能调用

变量插值

在Less中，既可以用变量名表示属性值，也可以用变量名表示选择器名、属性名，但是在表示选择器名、属性名时，需要将变量用{}括起来。

@d: div;
@w: width;
@h: height;
@s: 100px;

@{d}{
    @{w}: @s;
    @{h}: @s;
}

运算

在less中,可以和css3中的cale()函数一样进行简单的加减乘除运算。

@size: 200px;
div{
     @size * 2;
    height: @size / 2;
}

混合

在less中,可以将重复的代码提取出来，形成一个单独的类， 然后在将类名放入需要的地方,，浏览器在执行代码时会将抽出来的类拷贝后放在需要的位置。

// 在类名后加()的话,在less混合处理完成后，不会显示那个类，不加()的话则那个类就不会消失
.center(){
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
}

div{
    .center();
}

带形参的混合

在Less中可以像JavaScript一样给混合传递参数。

// 传递参数时可以指定默认值
.whc(@w: 100px, @h: 100px, @c: red){
     @w;
    height: @h;
    background: @c;
}

div:nth-of-type(1){
    .whc(200px, 200px, yellow);
}

div:nth-of-type(2){
    .whc();
}

div:nth-of-type(3){
    .whc(@c: yellow);
}

混合中的可变参数

• 在Less的混合中，可以使用...来代替零个或多个新参，...前的新参个数就是调用混合时需要传入的最少实参个数。

• Less混合中可以使用@arguments来接受所有实参

• .animate(@name, @time, ...){
      translation: @arguments;
  }
  

混合匹配模式

• 混合中后定义的变量会覆盖先定义的变量，但是可以通过或者匹配模式来定义同名变量

• 通用匹配模式：无论匹配了那种模式都要先执行通用模式中的代码，通过匹配模式的匹配符是@_

  .tranBd(@w){
       0;
      height: 0;
      border- @w;
      border-style: solid;
      border-color: transparent;
  }
  .triangle(@_, @w, @c){
      .tranBd(@w);
  }
  .triangle(top, @w, @c){
      border-bottom-color: @c;
  }
  .triangle(bottom, @w, @c){
      border-top-color: @c;
  }
  .triangle(right, @w, @c){
      border-left-color: @c;
  }
  .triangle(left, @w, @c){
      border-right-color: @c;
  }
  

导入其他Less文件

可以使用@import来导入外部Less文件，文件的.less后缀可以省略。

@import './css/triangle';

内置函数

由于Less的底层就是用JavaScript实现的，所以一些常用的JS函数在Less中也能实现。

image-size("file.jpg"); // => 100px 50px
image-width("file.jpg"); // => 100px
image-height("file.jpg"); // => 50px

// 单位转换
convert(9s, "ms"); // => 9000ms
convert(14cm, mm); // => 140mm
convert(8, mm); // => 8

// 列表
@list: "A", "B", C, "D";
length(@list); // => 4
extract(@list, 3); // => C
*/
// 数学
/*
ceil(2.1); // => 3 向上取整
floor(2.1); // => 2 向下取整
percentage(.3); // => 30% 转百分比
round(1.67, 1); // => 1.7 四舍五入，保留一位小数点
sqrt(25cm); // => 5cm 取平方根
abs(-5cm); // => 5cm 取绝对值
pi(); // => 3.141592653589793 圆周率π
max(3px, 42px, 1px, 16px); // => 42px
min(3px, 42px, 1px, 16px); // => 1px
*/
// 字符串
/*
replace("Hi Tom?", "Tom", "Jack"); // => "Hi Jack"
*/
// 判断类型
/*
isnumber(56px); // => true 是否含数字
isstring("string"); // => true
iscolor(#ff0); // => true
iscolor(blue); // => true
iskeyword(keyword); // => true
isurl(url(...)); // => true
ispixel(56px); // => true
isem(7.8em); // => true
ispercentage(7.8%); // => true
isunit(4rem, rem); // => true 是否为指定单位
isruleset(@rules); // => true 是否为变量
*/
// 颜色操作
/*
增加饱和度
saturate(color, 20%)
减少饱和度
desaturate(color, 20%)
增加亮度
lighten(color, 20%)
减少亮度
darken(color, 20%)
降低透明度
fadein(color, 10%)
增加透明度
fadeout(color, 10%)
设置绝对不透明度(覆盖原透明度)
fade(color, 20%)
旋转色调角度
spin(color, 10)
将两种颜色混合，不透明度包括在计算中。
mix(#f00, #00f, 50%)
与白色混合
tint(#007fff, 50%)
与黑色混合
shade(#007fff, 50%)
灰度，移除饱和度
greyscale(color)
返回对比度最大的颜色
contrast(color1, color2)
*/
// 颜色混合
/*
每个RGB 通道相乘，然后除以255
multiply(color1, color2);
与 multiply 相反
screen(color1, color2);
使之更浅或更暗
overlay(color1, color2)
避免太亮或太暗
softlight(color1, color2)
与overlay相同，但颜色互换
hardlight(color1, color2)
计算每个通道(RGB)基础上的两种颜色的平均值
average(color1, color2)
-->

层级结构

// 在less中,如果在一个选择器内部在加上一个选择器的话,表示两者是层级结构。
.father{
    .son{
        // ...
        
         //在less的层级结构中,如果要表示一个选择器的伪类选择器的话,可以在其内部使用 &:选择器名 的方式。
        &:hover{
            // ...
        }
    }
    // 在less的层级结构中,如果要表示一个选择器的伪元素选择器的话,可以在其内部使用 &::选择器名 的方式。
    &::before{
        // ...
    }
}

继承

继承与混合的区别 ：

• 混合的本质是拷贝,只是减少了less文件中的冗余代码,并没有减少css文件中的冗余
• 继承的本质是并集选择器,减少了css中的代码

.center{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

//继承的格式: 需要继承的选择器:extends(被继承的选择器)
.father:extend(.center){
     400px;
    height: 400px;
    background: red;
    .son:extend(.center){
         200px;
        height: 200px;
        background: yellow;
    }
}

条件判断

在less中,可以给混合添加条件判断,条件判断的类型可以是:

• 比较运算符(=, >, <, >=, <=)
• 逻辑运算符( (),() ()and() not())
• 以及内置比较函数(isem ispixel ...)

.size(@w, @h) when (@w >= 100px)and(@h >= 100px){
     @w;
    height: @h;
}
div{
    .size(100px, 100px);
    background: red;
}