【Less】Less基本用法总结

一、介绍

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
中文网址: http://lesscss.cn/

二、特点

1、写样式更简单：嵌套
2、使用方便：变量、运算、函数
3、学习成本低：语法

三、语法

1、变量

变量声明

@color:#adf;
@height:100px;
//1. 变量声明
header{
     
    background-color:@color;
    height:@height;
}

• 变量名称要求： 字母、数字、下划线、中横线
• 首字母可以为数字，可以为纯数字
• 区分大小写
• 变量值随意

变量差值

将一个变量的值作为选择器

@section:#section;
@{
     section}{
     
    height:400px;
    background:#ede;
}

变量拼接

@one:section;
@two:footer;
@s:~'@{
     one},@{
     two}';
@{
     s}{
     
    background:#999;
}

2、运算

header{
     
    height:100px+200px;
}
section{
     
    height:100px*2%;  // 200px; 
    // 如果都有单位，则使用第一个作为单位
    width:900/33px;   //27.2727px;
    // 如果只有一个有单位，则使用该单位
}

3、嵌套

less 支持嵌套书写形式

（1）普通嵌套

#app{
     
	#header{
     
        // 子孙元素
		.logo{
     		
		}
		// 子元素
		>.search{
     
		
		}
        // 后边紧挨着的元素
        + div{
     
            
        }        
        &:hover{
     
            
        }
        &::before{
     
            
        }
	}
}

（2）媒体查询

.left{
     
    height:500px;
    background-color:#adb;
    // >=1200
    @media screen and(min-width:1200px) {
     
       background:#6e4848; 
    }
    // >=1200,<=900
    @media screen and(max-width:1200px) and (min-width:900px){
     
        background:#baa; 
    }
    //<900
    @media screen and (max-width:900px){
     
        background:#abd; 
    }
}

（3）变量作用域

变量只能在当前代码段和下层代码段使用。

4、混合 mixins

将需要重复使用的代码封装到一个类中,在需要使用的地方调用。

.class #id

（1）普通混合

.font_h{
     
    color: red;
}
h1{
     
    font-size:28px;
    .font_h;
}

（2）不带输出混合

不输出选择器的单独样式设置

.float_left{
     
    content:".";
    display:block;
    clear:both;     
}

#box1{
     
    float_left();
}

（3）参数混合

// 定义混合
.border(@border_color){
     
    border:2px solid @border_color;
}
// 使用混合
.div{
     
    .border(#f60);
    // 使用时我们需要传入一个参数进去
}

.div {
     
    border: 2px solid #ff6600;
}

两个混合，混合名相同，但是参数不同，这是两个不同的混合，根据参数的个数来决定执行哪个混合

参数默认值

// 定义混合
.border(@border_color:#f60;){
     
    border:2px solid @border_color;
}
// 使用混合
.div{
     
    .border();
}

.div {
     
    border: 2px solid #ff6600;
}

注意： 具有默认值的参数一定要靠后声明，否则会有语法错误。

调用的时候有两种形式

按顺序传参

.box2(100px, 100px, #000);

制定参数名传参

.box2(@bg:#090, @width: 100px, @height:200px);

（4）条件混合

.arrow(@size:10px, @color: #908, @direction) when(@direction=bottom) {
     
    width:0px;
    height:0px;
    border-style:solid;
    border-width: @size;
    border-color: @color transparent transparent transparent ;
}

4、导入

less 支持组件化，允许将不同功能的代码放到不同的文件中。

• less 文件不需要加后缀
• css 文件需要加文件后缀

5、函数

less 提供了内置函数来处理，文档地址 https://less.bootcss.com/functions/，函数和混合的区分

• 混合相当于是自定义函数
• 函数相当于是内置函数

数学函数

• ceil
• floor
• percentage 将小数转化为 『百分比』

颜色操作

• lighten 加亮
• darken 加暗
• fadein 提高透明度
• fadeout 降低透明度

6、Map

Map 相当于 JS 的对象，可以把一系列的数据保存在 Map 中

#color(){
     
    base: #098;
    darker: darken(#098, 10%);
    darkest: darken(#098, 30%);
}

footer{
     
    height:100px;
    background: #color[darker];
}