less基本语法

                                        less的基本语法

目录

1.less注释语法

1.1 //单行注释

1.2 /**/多行注释

2.变量

2.1普通变量

2.2 在字符串中使用变量

 2.3 选择器使用变量

2.4 属性变量

2.5 导入其他的less

2.6 变量的作用域

2.7 变量的运算

---

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。

1.less注释语法

1.1 //单行注释

// 这种代码注释css并不识别,编译后会影藏,不会显示在css文件中

1.2 /**/多行注释

/**/这种注释是css的注释,编译以后,会保留显示在css文件中

2.变量

在less 中,可以使用变量,来统一设置一类可以重复使用的值,方便后期CSS代码维护

2.1普通变量

在less中使用@关键字来定义变量,基本语法是

@变量名:变量值

注:变量值一定要符合css变量值 

示例:

         //定义变量
            @bgcolor:#58a;

        //使用变量
            span {
                color:@bgcolor;
                font-size:24px;
            }

2.2 在字符串中使用变量

如果出现变量名和字符串一起拼接,则使用以下语法:

              "@{变量名}字符串"

 示例:

//定义变量
@images: "../img";

div{
    background:url("@{images}/1.png")
}

 2.3 选择器使用变量

语法 @{变量名} {

}

案例

@why:.box;
{@why} {
    width:100px;
    height:100px;
}

2.4 属性变量

语法 选择器 {

@{变量名}:变量值

}

示例:

//定义变量
@cr:color;
//使用变量
.box {
    @{cr}:skyblue;
}

2.5 导入其他的less

语法:@变量名: 地址;

@import "@{变量名}";

示例:

@src:'./header/inex.less'
@import"@{src}"
//这段代码就是将其他的less引入到自己的less中,并最终编译成css.

2.6 变量的作用域

less中变量的作用域可以按照js中的作用域来理解,每个css样式的{}都是一个独立的作用域.

示例:

@color: red;
.wrap{
    color:@color; // .wrap自己作用于内没有color变量,所以用上一次作用域重点变量
}
.box{
    @color: skyblue;
    color:@color; // 因为.box自己作用于中有同名变量,就会先用自己作用于内变量的值
}

2.7 变量的运算

变量还可以参与运算,示例如下:

@width: 300px;
.box{
    width:@width - 100;
    height:@width;
    background: skyblue;
}

less中的混合和嵌套点击即可哦

感兴趣可以去这里(less官网看看哦)