Less 快速入门（一）

墨蓝 2023-10-18 17:31 93阅读 0赞

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node.JS 或浏览器端。

#### [https://less.bootcss.com/][https_less.bootcss.com] 快速入门 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

#### [https://www.bootcdn.cn/less.js/][https_www.bootcdn.cn_less.js] less加速器 ####

## **一、变量（Variables）** ##

index.less

@width:100px;   //1>变量
    @height:@width+20px;
    @bg:red;
    
    #d1{
        width: @width;
        height: @height;
        background: @bg;
        #bord();  //注意：在调用混合时，可以加括号也可以不加括号
    }
    
    
    #d2{
        width: @width;
        height: @height;
        background:blue;
        .border;   //注意：在调用混合时，可以加括号也可以不加括号
    }
    
    //2>混合（Mixins）： 通用的属性集为一个选择器，然后在另一个选择器中去调用这些属性
    .border,#bord{
        border: 5px solid gold;
        margin: 5px;
    }

![20190423154218803.png][]

## **二、嵌套（Nesting）** ##

<div id="d1">
    			第一层
    			<div id="d2">
    				第二层
    			</div>
    			<p class="txt">第二层The resulting <a href="index.html">code </a>is more concise, 
    				<span>and mimics the structure of your HTML.</span></p>
    		</div>

**nesting.less**

@width:50%;   //1>变量
    @height:400px;
    @bg:gray;
    
    //& 符号的使用 — 如果你想写串联选择器，而不是写后代选择器，就可以用到 & 了。这点对伪类尤其有用如 :hover 和 :focus。
    #d1{
        width: @width;
        height: @height;
        border:10px solid @bg;
         #d2{
             font-size: 35px;
         }
        .txt{
            color: red;
            a{
                color:black;
                &:hover{   //鼠标悬停上 a:hover
                    text-decoration: none;
                    font-size: 25px;
                    color: cyan;
                }
                
                &:active{ //活动  a:active
                    color:blue;
                }
            }
            span{
               font-weight: bolder;
               font-size: 12px; 
               color: darkmagenta;
            }
        }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1][]

[https_less.bootcss.com]: https://less.bootcss.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190423154001897.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[https_www.bootcdn.cn_less.js]: https://www.bootcdn.cn/less.js/
[20190423154218803.png]: https://img-blog.csdnimg.cn/20190423154218803.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190423154517550.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70