Java教程

认识Less、Less的语法

本文主要是介绍认识Less、Less的语法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

目录

一、初识Less

二、Less的语法

1.注释

2.变量

3.父元素

4.扩展

5.混合函数

6.less中的运算

7.引入less文件


一、初识Less

        less是一门CSS预处理语言

        less是一个CSS的增强版,通过less可以编写更少的代码实现更强大的样式

        在less中添加了许多新的特性,像对变量的支持、对mixin的支持...

        less的语法大体上和css一致,但是less中添加了许多对css的扩展, 所以浏览器无法直接执行less代码,要执行必须先将less转换为css,然后由浏览器执行

二、Less的语法

1.注释

Less中的注释以 // 开头,是单行注释

//less中的单行注释,注释中的内容不会被解析到css中

2.变量

变量,在变量中可以存储一个任意的值,并且我们可以在需要时,任意的修改变量中的值

        变量的语法:@变量名

 

 作为变量名时,如果是直接使用,则以 @变量名 的形式使用即可

.box4{
    width: @a;
    height: @a;
    background-color: @b;
}

作为类名,或者一部分值使用时必须以 @{变量名} 的形式使用

.@{c}{
    width: @a;
    height: @a;
    background-image: url("@{c}/1.png");
}

        变量发生重名时会优先使用比较近的变量

        可以在变量声明前就使用变量

@d:200px;
@d:300px;
div{
    // 变量发生重名时,会优先使用比较近的变量
    @d:120px;
    width: @d;
    height: @e;
}
// 可以在变量声明前就使用变量
@e:300px;

div{
    width: 300px;
    height: $width;
}

 

  3.父元素

        父元素中可以嵌套子元素,&符号表示外层的父元素

.box1 {
    .box2 {
        color: red;
    }
    >.box3 {
        color: red;
    }
    // 为box1设置一个hover
    //&表示外层的父元素
    &:hover {
        color: orange;
    }
    div & {
        width: 30px;
    }
}

编译后的CSS文件如下:

  4.扩展

        extend()对当前选择器扩展指定选择器的样式(选择器分组)

.p1 {
    width: 100px;
}
.p2:extend(.p1) {
    height: 20px;
}

编译后的CSS文件如下:

 

 

 

        直接对指定的样式进行引用,这里就相对于将p1的样式在这里进行了复制(mixin 混合)

.p1 {
    width: 100px;
}
.p3{
    // 直接对指定的样式进行引用,这里就相对于将p1的样式在这里进行了复制
    // mixin 混合
    .p1()
}

编译后的CSS文件如下:

 

 

使用类选择器时可以在选择器后边添加一个括号,这时我们实际上就创建了一个mixins

.p4(){
    width: 400px;
    height: 400px;
    background-color: orange;
}
.p5{
    .p4();
}

编译后的CSS文件如下:

 

  5.混合函数

        混合函数 在混合函数中可以直接设置变量,调用混合函数时,需要按顺序传递参数,也可以使用键值对不按照顺序传递参数。

.test(@w,@h,@bg-color){
    width: @w;
    height: @h;
    border: 1px solid @bg-color;
}
div{
    .test(200px,200px,red)
    // .test(@bg-color:red,@w:200px,@h200px,)
}

编译后的CSS文件如下:

 调用混合函数时也可以不传参数,但是必须要在混合函数中设置默认值,如下:

 

  6.less中的运算

        在less中所有的数值可以直接进行运算(加减乘除运算

.box1{
    width: 100px + 100px;
    height: 100px*2;
    background-color: red;
}

编译后的CSS文件如下:

 

  7.引入less文件

        可以通过 import 来将其他的less引入到当前的less

@import "syntax.less";

这篇关于认识Less、Less的语法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!