当前位置：首页 > web >正文

Less Less基础

web 2025/8/1 1:13:28

1.less

less是一种动态样式语言，属于CSS预处理器的范畴，它扩展了CSS语言，增加了变量，Mixin，函数等特性，使CSS更易维护和扩展。Less既可以在客户端上运行，也可以借助Node.js在服务端运行。

2.Less中的注释

(1).以//开头的注释，不会被编译到css文件中

(2).以/**/包裹的注释会被编译到css文件中

3.Less中的变量

(1).使用@来声明一个变量：@pink：pink，@selector:#box;

(2).作为普通属性值来使用：直接使用@pink

(3).作为选择器、属性名和url：使用@{selector}的形式

        @color:deeppink;
        @idname:#box;
        @optionName:width;
        .......................
        @{idname}{
        position: relative;
        @{optionName}: 300px;
        ..........................
        .inner{
        ..........................
        background-color: @color;
        ...........................
        }
        }

(4).变量的延迟加载

@color:deeppink;
@idname:#box;
@optionName:width;
@var:1;

@{idname}{
...........................
.inner{
...........................
background-color: @color;
@var:0.5;
opacity: @var; // opacity: 0.3;
@var:0.3;
}
opacity: @var; // opacity: 1;
}

4.less的嵌套规则

(1).基本嵌套规则

LESS 嵌套遵循 “父级选择器包含子级选择器” 的逻辑，对应 HTML 中的父子元素关系。

(2).&的使用

用 & 避免生成后代选择器。

@color:deeppink;
@idname:#box;
@optionName:width;
@var:1;
@{idname}{
position: relative;
@{optionName}: 300px;
height: 400px;
border: 1px solid #000;
margin: auto;
.inner{
..........................
background-color: @color;
..........................
&:hover{ // 生成#box .inner:hover,不使用&则生成#box .inner :hover
background-color: pink;
}
}

5.避免编译

#box{
width: ~"calc(100px + 100px)"; //提示less这里不用编译，让原生css计算
// height: 100px + 100px; //less编译过后为200px
height: 100px + 100em; //less编译过后为200px,less运行出的单位是less遇到的第一个单位，是纯数值运算，不考虑单位转换
background: red;
}

@color:deeppink;
@idname:#box;
@optionName:width;
@var:1;
*{margin: 0;padding: 0;
}
@{idname}{position: relative;@{optionName}: 300px;height: 400px;border: 1px solid #000;margin: auto;background-color: skyblue;.inner{width: 100px;height: 100px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: @color;margin: auto;@var:0.5;opacity: @var;@var:0.3;&:hover{background-color: pink;}}opacity: @var;
}

查看全文

http://www.xdnf.cn/news/16694.html