less入门及语法了解

朱雀 2021-09-13 15:44 382阅读 0赞

## **1.less官方网站：** ##

英文：http://www/lesscss.org/  
中文：http://www.lesscss.net/

## **2.less.js下载：** ##

一.输入网址：http://www.lesscss.net  
二.点击更新日志  
![在这里插入图片描述][20200221183832920.png]  
三.点击less.js  
![在这里插入图片描述][20200221183942665.png]  
四.点击右边的download zip  
![在这里插入图片描述][20200221184745166.png]  
五.在下载到的文件夹里找到压缩包  
![在这里插入图片描述][20200221185031708.png]  
六.点开找到less文件，dist/less  
七.将less.min.js复制到项目文件里  
八.在项目主页中引入：  
![在这里插入图片描述][20200221185839240.png]  
如果不引入less.min.js的话，css将无任何效果

## **3.less变量（跟sass用法类似）** ##

一.普通的变量

@width: 10px;
    @height: @width + 10px;
    
    #header { 
      width: @width;
      height: @height;
    }
    编译为：
    
    #header { 
      width: 10px;
      height: 20px;
    }

二.作为选择器和属性名  
使用时变量以@（变量名）的方式使用  
![在这里插入图片描述][20200221191658582.png]  
三.作为URL  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]

## **4.混合** ##

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法

.bordered { 
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    如果我们希望在其它规则集中使用这些属性，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：
    
    #menu a { 
      color: #111;
      .bordered();
    }
    
    .post a { 
      color: red;
      .bordered();
    }
    .bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了

## **5.Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。** ##

#header { 
      color: black;
    }
    #header .navigation { 
      font-size: 12px;
    }
    #header .logo { 
      width: 300px;
    }
    用 Less 语言我们可以这样书写代码：
    
    #header { 
      color: black;
      .navigation { 
        font-size: 12px;
      }
      .logo { 
        width: 300px;
      }
    }

使用此方法将伪选择器（pseudo-selectors）与混合（mixins）一同使用：

.clearfix { 
      display: block;
      zoom: 1;
    
      &:after { 
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        clear: both;
        visibility: hidden;
      }
    }

[20200221183832920.png]: /images/20210913/7c7a8b2720494cd8816694bbebe2d5d5.png
[20200221183942665.png]: /images/20210913/0c65fdfdd20148b7841df537702cacd1.png
[20200221184745166.png]: /images/20210913/d95769926b3d46f7a49545b67d4743d9.png
[20200221185031708.png]: /images/20210913/6549e5a7b0ab4e409ff6c5aa28345c65.png
[20200221185839240.png]: /images/20210913/b7520bf398b540d2a6563007cba192ab.png
[20200221191658582.png]: /images/20210913/5b25c8af26ef4a0ea3b38a1f102eb75e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]: /images/20210913/916e334d59bf4ff9b9fb5644b8696d4f.png