less_入门

浅浅的花香味﹌ 2022-05-20 00:59 158阅读 0赞

less is more, Than CSS  
CSS预处理器  
Less CSS是一种动态语言，属于CSS预处理语言的一种，她使用类似于CSS的语法，为CSS赋予额动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护  
LESS CSS可以在多种语言、环境中使用，包括浏览器端，桌面客户端、服务器端

先建一个文件main.less 这时后缀名就不是css了，在里面声明头部

@charset"utf-8"

通过koala软件把我们写的less编译成css  
注意，引用的还是css,不是less  
我们编辑的是less文件

2.less的注释  
![这里写图片描述][70]  
/\*\*/ 会被编译  
// 不会被编译  
在css中没有//

3.变量  
在less中可以使用@符号定义变量  
@变量名:值

@text_width:300px;
    //注意，是冒号，不是赋值等于号
    .box {
      width:@text_width;
      height:100px;
      background: green;
    }

4.混合  
![这里写图片描述][70 1]  
我们写了一个样式：

.border { border:5px solid pink; }

这个样式想在某个div里面用，以往我们要在class中加上这个类名，现在直接在css中引用就行

.box {
      width:@text_width;
      height:100px;
      background: green;
    
      .border;
    }

所以说我们可以混合使用我们定义的样式

混合可带参数：

.border2(@border_width){ border: @border_width solid yellow } .box {
      width:@text_width; .border2(10px);
    }

这样的话边框的像素，就不会固定下来

混合–默认参数

.border3(@border_width:30px){ border: @border_width solid pink } .box {
      width:@text_width; .border3();
    }

不写参数默认的是30px,但是例2如果是`.border2();` less就会报错

什么时候用这种混合比较方便呢？  
比如说CSS3各种兼容：

.border_radius(@radius:5px){ 
      -webkit-border-radius:@radius;
      -moz-border-radius:@radius;
      border-radius:@radius;
    }
    .test {
      .border_radius();
    }

我们就不需要每次写三行了，如果不满意像素也可以自己改

5.匹配模式  
![这里写图片描述][70 2]  
纯css写一个三角：

.sanjiao {
      width:0;
      height:0;
      overflow:hidden;
    // 处理IE6最小高度的问题
       border-width:10px;
       border-color: red transparent transparent transparent;
       想要哪里为底就显示哪个边框的颜色，其余的边框的颜色设置为透明
       border-style: solid dashed dashed dashed;
       //因为在IE6中会有一个黑色的边，解决方法是哪个方向有颜色，让它变成solid，其余的变成dashed
    }

OK，我们现在开始也什么是匹配模式：

//匹配模式
    
    .triangle(top,@w:5px,@c:#ccc){ 
       border-width:@w;
       border-color: transparent transparent @c transparent;
       border-style: dashed dashed solid dashed;
    }
    .triangle(bottom,@w:5px,@c:#ccc){ 
       border-width:@w;
       border-color: @c transparent transparent transparent;
       border-style: solid dashed dashed dashed;
    }
    .triangle(left,@w:5px,@c:#ccc){ 
       border-width:@w;
       border-color: transparent @c transparent transparent;
       border-style: dashed solid dashed dashed;
    }
    .triangle(right,@w:5px,@c:#ccc){ 
       border-width:@w;
       border-color: transparent transparent transparent @c;
       border-style: dashed dashed dashed solid;
    }
    .triangle(@_,@w:5px,@c:#ccc){ 
      width:0;
      height:0;
      overflow:hidden;
    }
    .sanjiao1{
      .triangle(top);
    }

根据我们输入的参数自动去匹配是哪个，其中@\_样式放置的是这个样式的公共部分  
这样我们想要任何方向的小三角自己定义就行

匹配模式定位：

//匹配模式定位
    .pos(a) {
      position:absolute;
    }
    .pos(r) {
      position: relative;
    }
    .pos(f){
      position:fixed;
    }
    .pipei {
      width:200px;
      background:pink;
      height:200px;
      .pos(f);
      top:0;
    }

相当于传了哪个字符，就用了哪个css样式

6.运算  
less中的运算任何数字、颜色或者变量都可以参与运算，运算应该被包裹在括号之中  
例如： +-\*/

@test_01:300px;
    
    .box_01 {
      width:@test_01 + 20;
      background: yellow;
      height:200px;
    }
    //注意20 可以带像素，也可以不带像素，两者只要有一个带像素就行

也可以带小括号

.box_01 { width:(@test_01 - 200) * 5; }

颜色也可以运算：

background: #ccc - 10;

比\#ccc颜色暗了一点  
颜色加减法基本不用

7.嵌套规则：  
![这里写图片描述][70 3]

.list {
      height: 60px;
      padding: 0 10px;
      width: 800px;
      margin: 0 auto;
    
      li {
        padding: 0 20px;
        background: #CCC; 
      }
      a {
        float:left;
        &:hover{
          color:red };
      }
      span {
        float:right;
      }
    }

&:代表它上一层的选择器  
比以前写ul li 要省事

8.arguments 变量  
@arguments包含了所有传递进来的参数  
如果你不想单独处理每一个参数的话可以这样写：

.border_arg(@w:30px,@c:red,@XX:solid){
      border:@arguments
    }
    .test_arguments{
      .border_arg()
    }

.border\_arg(40px)就会把属性带过去  
如果你不想写参数的时候就可以用arguments

9.避免编译，！important以及总结  
![这里写图片描述][70 4]  
在less中编写：

.test_03{ width:calc(300px-30px); }

在相应的CSS 中：

.test_03 { width: calc(270px); }

我们看到less已经帮我们计算出来了，这个CSS3属性calc是让浏览器去计算的，而不是less去执行，所以我们要避免编译  
方法是在避免编译的上面加上‘~’，数值用引号包裹起来

.test_03{ width:~'calc(300px-30px)'; }
    
    .test_03 { width: calc(300px-30px); }

就不会被编译了

！important关键字  
会为所有混合所带来的样式，添加上！important

.test_important{
      .border_radius() !important;
    }
    .test_important {
      -webkit-border-radius: 5px !important;
      -moz-border-radius: 5px !important;
      border-radius: 5px !important;
    }

10.导入样式：

@import (less) 'a.css' //导入css文件，(less)后面有一个空格
    @import 'ku'  //如果不加后缀名。默认是一个ku.less文件

写在哪里就会编译在哪里

[70]: /images/20220520/9288ade162a841949dcbe15104f6b0b0.png
[70 1]: /images/20220520/d5aefc5d82a3462389b879488acb4d34.png
[70 2]: /images/20220520/d45bd9c2c22e4902971a8cda0de4b374.png
[70 3]: /images/20220520/f2294724d4c64a338ee49e37852363e2.png
[70 4]: /images/20220520/8a2b5ace0dc046478a8e5529363a9e28.png