less学习笔记

最新推荐文章于 2022-05-23 15:31:08 发布

mytheart

最新推荐文章于 2022-05-23 15:31:08 发布

阅读量360

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： less css module

本文链接：https://blog.youkuaiyun.com/weixin_42755677/article/details/96703498

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文是关于Less预处理器的学习笔记，详细介绍了Less的注释、变量与运算、作用域、混合功能（包括带参数的混合和默认值）、模块引入以及变量的延迟加载特性。通过这些内容，读者可以更好地掌握Less在CSS开发中的高效应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.less的注释

// 嵌套语法只想给开发人员看到得注释
/包裹注释会被编译到css文件中/

2.变量/及变量运算

@width:300px;
@color:blue;
@height:@width + 100px;

3.作用域/块级作用域

 @size:10px;
 body{
     background-color:#ccc;
     @size:20px;
     .wrapper{
         width:@width;
         height:@height;
         border:1px solid #000;
         @size:30px;
         .box{
             background-color: @color;
             li{
                 @size:40px;
                 font-size:@size;
                 width:80%;
                 height:20px;
                 background-color:#fff;
                 border:1px solid #000;
                 list-style: none;
                 @size:5px;
                 // 变量&符号
                 &:hover{
                     background-color:#000;
                 }
             }
             // li:hover{
             // }
         }
     }
 }

4.less的混合(将相同样式抽出)

 .border{
     border-top:2px solid #000;
     border-bottom:2px solid red;
 }

 body{
     background-color:#ccc;
     .wrapper{
         margin:50px auto;
         width:500px;
         height:500px;
         .border;
         .box{
             margin-top:30px;
             width:200px;
             height: 200px;
             background-color: @color;
             .border;
             li{
                 width:80%;
                 height:20px;
                 background-color:#fff;
                 border:1px solid #000;
                 list-style: none;
             }
         }
     }
 }

5.带参数的混合

 .border(@w,@color){
     border:@w solid @color;
 }
 body{
     background-color:#ccc;
     .wrapper{
         margin:50px auto;
         width:500px;
         height:500px;
         .border(5px,red);
         .box{
             margin-top:30px;
             width:200px;
             height: 200px;
             background-color: @color;
             .border(5px,pink);
             li{
                 width:80%;
                 height:20px;
                 background-color:#fff;
                 border:1px solid #000;
                 list-style: none;
             }
         }
     }
 }

6.带默认值的参数(不传值得时候取默认值)

.border(@w:1px,@color:#000){
    border:@w solid @color;
}
body{
    background-color:#ccc;
    .wrapper{
        margin:50px auto;
        width:500px;
        height:500px;
        .border(5px,red);
        .box{
            margin-top:30px;
            width:200px;
            height: 200px;
            background-color: @color;
            .border();
            li{
                width:80%;
                height:20px;
                background-color:#fff;
                border:1px solid #000;
                list-style: none;
            }
        }
    }
}

7.在less中引入模块

@import './triangle.less';
.wrapper{
    width:400px;
    height:400px;
    margin:50px auto;
    //
    .box{
        .triangleTop(50px,blue) 
    }
}

8.运算

.box{
    width:(100+100px);
    height:300px;
    border:3px solid #000;
}

9.变量的延迟加载

延迟加载：变量是延迟加载的，在使用前不一定要预先说明。意思是指：在前面用了这个变量，但没有定义，但可以在后面给他定义出来，不影响输出。

// 如：编译前：                                    编译后：
		div{                                       div {
			width: 100px; 								width: 100px;
			height: 200px;								height: 200px;
			font-size: @size;							font-size: 20px;
			color: @color;								color: #333333;
			}                                      }
		@size: 20px;