理解以及使用less

喜欢ヅ旅行 2023-05-29 11:38 1阅读 0赞

#### 一、 LESS是什么？ ####

> 1.  LESS将CSS赋予了动态语言的特性，如变量、继承、运算、函数。
> 2.  .LESS既可以在客户端上运行，也可以借助Node.js或者Rhino在服务端运行。
> 3.  将.less文件编译后为正常的css样式

#### 二、 如何使用LESS ####

> 1.  在html文件中引入less文件：`<link href="less文件地址" rel="stylesheet/less">`
> 2.  引入`Less.js`文件：`<script src="文件地址"></script>`

#### 三、 LESS基础语法 ####

##### 1. 变量 #####

① 声明变量：`@变量名：值;`  
② 使用变量：`@变量名`

> 1.  在定义以及使用变量时，当对同一变量二次赋值时，会有作用域的问题，导致二次赋值以后的所有使用都为新值。
> 2.  在给有单位的属性赋值时，变量赋值必须要带单位

@color1:red;//全局变量
    .borderColr{ 
    	@radius:50%;//局部变量
    	background:@color1
    	border-radius:@radius
    }
    @color1:green;//二次赋值
    .test{ 
    	border-radius:@radius;//报错radius为局部变量
    	background:@color1;//背景为绿色
    }

##### 2. 混合 #####

> 1.  混合可以将一个定义好的class A轻松引入到另一个class B中，从而实现class B继承class A的所有样式。还可以带参调用，就和调用方法一样。
> 2.  不传参调用不需要带括号。传参调用需要带括号。
> 3.  `arguments`包含了所有传递进来的参数

//arguments
    .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { 
      box-shadow: @arguments;
      -moz-box-shadow: @arguments;
      -webkit-box-shadow: @arguments;
    }
    .box-shadow(2px, 5px);

@color1:red;//全局变量
    .borderColor{ 
    	background:@color1;
    	.borderRadius;//不传参调用，不需要带括号
    	.height(200px);//传参调用，需要带括号。
    }
    .borderRadius(@r:10px){ 
    	border-radius:@r;
    }
    .height(@h:100px){ 
    	height:@h;
    }
    
    //混合 编译后的.borderColor
    .borderColor{ 
    	background:red;
    	border-radius:10px;
    	height:200px;
    }

##### 3. 嵌套规则 #####

> 1.  我们可以在一个选择器里嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
> 2.  `&`代表本身，若在一个选择器中添加`&:hover`代表给本身添加`hover`样式

#header { 
      h1 { 
        font-size: 26px;
        font-weight: bold;
      }
      p { 
       font-size: 12px;
        a { 
         text-decoration: none;
          &:hover {  border-width: 1px
           }
        }
      }
    }
    
    
    //生成的css
    #header h1 { 
      font-size: 26px;
      font-weight: bold;
    }
    #header p { 
      font-size: 12px;
    }
    #header p a { 
      text-decoration: none;
    }
    #header p a:hover { 
      border-width: 1px;
    }

##### 4. 加减运算 #####

> 1.  运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系
> 2.  属性值的加减运算是带单位运算。颜色的运算时符号和值之间必须要有空格，否则报错，eg： 错误：@bgcolor-@bgcolor2；正确：@bgcolor - @bgcolor2

@w:100px;
    @h:100px;
    @bgcolor:#ff0000;
    @bgcolor2:#009991;
    .sn{ 
      width: @w*2;//200px
      height: @h*2;//200px
      border: 1px solid @color;
      background-color: @bgcolor - @bgcolor2;
    }

##### 5. 颜色的函数 #####

1.  `lighten(color,百分比)`：100%为白色，0%为原色。百分比越大颜色越亮
2.  `dark(color,百分比)`：100%为黑色，0%为原色。百分比越大颜色越暗
3.  `saturate(color，百分比)`：增大饱和度。但给普通颜色设置饱和度无变化。给`hsl(..,..,..)设置饱和度有变化`
4.  `desaturate(color，百分比)`：降低饱和度
5.  `fadein(颜色，百分比)`：增加颜色的不透明度
6.  `fadeout(颜色,百分比)`：减少颜色的不透明度
7.  `spin(颜色，度数)`：度数为数字。用于旋转所选颜色的角度（在颜色拼盘上逆时针旋转）
8.  `mix(color1,color2)`：混合两个颜色

##### 6. Math函数 #####

> 不可用下面三个函数拼接字符串给属性赋值（会在数字和字符串间自动生成一个空格）。但可直接用于相加减，也可直接对带px单位的属性做运算

1.  `round(num)`：四舍五入
2.  `ceil(num)`：向上取整
3.  `floor(num)`：向下取整
4.  `percentage(num)`:将一个数转成百分比

@a:round(200.6);
    @height:200.266px;
    @height:round(200.6)px;//错误，生成的为200 px
    .sx{ 
      height: round(@height);//200px
      height:round(@height)+@a;//400px
       height:@a+"px";//错误 ，生成201 "px"
      border:1px solid #fff000;
    }

##### 7. 命名空间（命名空间起名称可用：以`.`/`#`开头） #####

> 有时为了更好地封装或组织css，可将其放入一个命名空间中

#hello{ //命名空间
      .borderColor(@c:#ff0){ 
        border:1px solid @c;
      }
    }
    .se{ 
      height: round(@height)+@a;
    #hello>.borderColor(#000);//使用命名空间中的样式
    }

##### 8. 字符串插值：可将变量通过`@{变量名}`的方式嵌入到字符串中 #####

@base-url: "http://assets.fnord.com";
    background-image: url("@{base-url}/images/bg.png");
    //编译完成后为http://assets.fnord.com/images/bg.png

##### 9. 避免编译：加上`~`可不对后面的内容进行编译 #####

> 1.  有时我们需要输出一些不正确的css语法或者使用一些less不认识的专有语法，需要使用`~`，将其后面的内容不进行编译而直接输出字符串
> 2.  可用`""`将避免编译的内容包含起来

.class { 
      filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
    }
    
    //生成css的结果为
    
    .class { 
      filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
    }

##### 10.模式匹配和导引表达式 #####

###### ① 模式匹配 ######

> 1.  可根据不同的赋值起到模式匹配的作用。只有被匹配的混合才会被使用。变量可以匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的传入值。
> 2.  下例中，`mixin、switch`都是名称，可换。默认匹配的参数名也可换

//在下面例子中，可根据@switch的值取不同的.mixin，.mixin(@_,@color)代表无论@switch为什么值都会匹配
    //假如@switch为dark，则会取第一个样式
    @switch:dark;
    .mixin (dark, @color) { 
    //只接受dark作为首参
      color: darken(@color, 10%);
    }
    .mixin (light, @color) { 
    //只接受light作为首参
      color: lighten(@color, 10%);
    }
    .mixin (@_, @color) { 
    //无论首参为什么都会被匹配
      display: block;
    }
    .class { 
      .mixin(@switch, #888);
    }
    
    //上述例子编译后的CSS
    .class { 
     display: block;
     color: darken(#888, 10%);
    }

###### ② 导引 ######

> 1.  `when`关键字被定义为一个导引序列，只有当`when`括号中的判断为真时才会采用该混合，否则不采用
> 2.  导引中可用运算符：`>`、`<`、`>=`、`<=`、`=`（判断左右两边是否相等）
> 3.  导引中只有关键字`true`为真，其余值都被视为布尔假
> 4.  导引序列使用`,`分割不同的条件，当所有条件中任意一个条件符合时都会被视为匹配成功。
> 5.  在导引序列中可以使用`and`关键字实现与条件，使用`not`关键字实现非运算。`,`实现或运算
> 6.  如果想要基于值类型进行匹配，有几个函数：  
>     ① `iscolor(变量)`  
>     ② `isnumber(变量)`  
>     ③ `isstring(变量)`  
>     ④ `iskeyword(变量)`  
>     ⑤ `isurl(变量)`
> 7.  如果要判断一个值是纯数字还是某个单位量，可用以下函数  
>     ① `ispixel(数字)`：是否为带像素单位的值  
>     ② `ispercentage(数字)`：是否为百分数  
>     ③ `isem(数字)`