less的基本使用

目录

• 一、less语法
• • 1. 变量
  • • 1.1 基础用法
    • 1.2 变量用作属性名
    • 1.3 变量用作类名
    • 1.4 变量用作链接
    • 1.5 定义多个变量
    • 2. 混合
    • • 2.1 普通混合
      • 2.2 不输出到css的混合
      • 2.3 带选择器的混合
      • 2.4 带参数的混合
      • 2.5 参数有默认值的混合
      • 2.6 多个参数的混合
      • 2.7 arguments变量
      • 2.7 得到混合中的 运算变量 的 返回值
      • 3. 嵌套规则
      • • 3.1 基础用法
        • 3.2 父元素选择器&
        • 3.3 改变选择器的顺序&
        • 4. 运算
        • 5. 命名空间
        • 6. 作用域
        • 7. 引入
        • • 7.1 main.less
          • 7.2 index.less
          • 7.3 编译后的css
          • 7.4 引入可携带参数
          • 二、vue 配置less全局变量

            一、less语法

            1. 变量

            1.1 基础用法

            语法：@变量名: 值;

            less:

            // 1. 定义变量(全局变量)@bgColor:white;@Height:50rpx;.contain{    background-color: @bgColor; }.row{    height:@Height;    margin-left:@Height;}   

            编译后的css:

            .contain {  background-color: white;}.row {  height: 50rpx;  margin-left: 50rpx;}

            注意：

            最好尽量用全局变量，避免无法复用！

            比如我写变量@Height:50rpx;在contain{}里面，而row{}里面的@Height变量不存在，导致出错，这是叫局部变量。

            1.2 变量用作属性名

            语法：@变量名: 属性名;

            less:

            // 定义变量（属性名）@bg-img:background-image;p{  @{bg-img}:路径;} 

            编译后的css:

            p {  background-image: 路径;}

            1.3 变量用作类名

            语法：@变量名: 类名;

            less:

            //定义类名@demo:newClass;.@{demo}-new{ // "-new"在类名基础上，新的类名 newClass-new   @bg:rgb(0,0,0);   background:@bg;}//p使用此类名"newClass-new">
            demo

            编译后的css:

            .newClass-new {  background: rgb(0,0,0);}

            1.4 变量用作链接

            语法：@变量名: 路径;

            less:

            // 链接可以为任何链接*注意放置的位置@bg-img:"路径";header{  background:url(@bg-img);}

            编译后的css:

            header {  background: url("路径");}

            1.5 定义多个变量

            定义 同一变量名称（名字）两次或多次后，less只会选择最后定义的！

            less:

            @bg-img:"路径1";@bg-img:"路径2";@bg-img:"路径3";header{    background:url(@bg-img);}//  结果为：background: url("路径3");

            2. 混合

            混合就是一种将一系列属性从一个规则引入（“混合”）到另一个规则集的方式。这个意思是在less中定义的选择器类可以直接放入其他选择器类里面，这种重复使用很强。

            2.1 普通混合

            less:

            //1.普通混合.bor{    background-color: aqua;    width: 32rpx;}.poop{    color:white;    .bor;}

            编译后的css:

            .bor {  background-color: aqua;  width: 32rpx;}.poop {  color: white;  background-color: aqua;  width: 32rpx;}

            2.2 不输出到css的混合

            如果你想要创建一个混合的类，但是我不想让它输出到css的样式并显示。

            只要类的名字后面加上括号，就可以实现的，这样不会到css样式中显示！

            less:

            // 2.不带输出的混合.mymix{    color:black;}.mymix-echa(){//css样式中不显示    background-color: white; }.dad{    width: 30rpx;    height:30rpx;}

            编译后的css:

            .mymix {  color: black;}.dad {  width: 30rpx;  height: 30rpx;}

            在css样式中实现不显示.mymix-echa()类。

            2.3 带选择器的混合

            语法：{&：选择器};

            less:

            //3.带选择器的混合.father(){    &:hover{        background-color: white;        font-size:32px;    }} .child{ // 编译后的类名字后面多了:hover    .father;}.son{ // 编译后的类名字后面多了:hover    .father;}

            编译后的css:

            .child:hover {  background-color: white;  font-size: 32px;}.son:hover {  background-color: white;  font-size: 32px;}

            2.4 带参数的混合

            语法：类的名称（形参）{};

            less:

            // 4.带参数的混合.son(@width){    width:@width;}.dad{    .son(300px);//需要传一个参数进去}

            编译后的css:

            .dad {  width: 300px;}

            2.5 参数有默认值的混合

            语法：类的名称（形参）{};

            less:

            //5.带参数的混合默认值.son(@width:200px){    width:@width;}.dad{    .son();}

            编译后的css:

            .dad {  width: 200px;}

            2.6 多个参数的混合

            一个组合可以带多个参数，参数之间可以使用分号或者逗号来分割。

            但是建议尽量使用分号来分隔，因为这逗号可以编译为参数分割或者css为列表分割。

            less:

            //6.带多个参数的混合.mini(@color;@padding:xxx;@margin:2){    color-1:@color;    padding-2:@padding;    margin-3:@margin;}.p{    .mini(1,2,3;something, ele);}

            编译后的css:

            .p {  color-1: 1, 2, 3;  padding-2: something, ele;  margin-3: 2;}

            2.7 arguments变量

            arguments变量表示可变参数，意思是形参从先到后的顺序。

            注意：这个是参数值位置必须是一一对应。

            less:

            //7.arguments变量.son3(@dd1:20px;@dd2:solid;@dd3:white){    border:@arguments;}.p4{    .son3();}

            编译后的css:

            .p4 {  border: 20px solid white;}

            2.7 得到混合中的 运算变量 的 返回值

            就像调用函数一样的过程。

            less:

            //8.得到混合中变量的返回值.ave(@x,@y){    @ave:(@x+@y);}.son{    .ave(20px,40px);    width:@ave;}

            编译后的css:

            .son {  width: 60px;}

            分析代码过程：

            1.首先把二个参数分别为20px和40px传到.ave(@x,@y)；

            2.在.ave{}里面获取了两个值并进行计算结果，然后给变量@ave；

            3.在.son{}中调用了@ave的值；

            4.最后生成了编译后css的结果width为60px。

            3. 嵌套规则

            3.1 基础用法

            less:

            //10.嵌套规则.contain{  .dad{      width:30px;      background-color: #fff;      .son{          border-radius: 40px;      }  }    .dad1{      height:300px;      background-color: black;  }}

            编译后的css:

            .contain .dad {  width: 30px;  background-color: #fff;}.contain .dad .son {  border-radius: 40px;}.contain .dad1 {  height: 300px;  background-color: black;}

            3.2 父元素选择器&

            表示当前选择器的所有父选择器，使用&符引用选择器的名。

            less:

            //11.父元素选择器&.bgcolor{    background: black;    a{        color:#fff;        &:hover{            color:blue;        }    }}

            编译后的css:

            .bgcolor {  background: black;}.bgcolor a {  color: #fff;}.bgcolor a:hover {  color: blue;}

            3.3 改变选择器的顺序&

            如果将当前的选择器名字后面放在&，就会当前的选择器提到父级。

            less:

            // 12.改变选择器的顺序&.contain{    h1&{        width:200px;        height:300px;    }} #son{    ul{        li{            .contain&{                height:100px;                background-color: #fff;            }        }    }}

            编译后的css:

            h1.contain {  width: 200px;  height: 300px;}.contain#son ul li {  height: 100px;  background-color: #fff;}

            4. 运算

            注意：

            运算符与值之间必须以空格分开，涉及优先级时可以以()进行优先级运算。

            less:

            // 13.运算.contain{    font-size:300px+200*2;}

            编译后的css:

            .contain {  font-size: 700px;}

            5. 命名空间

            将一些需要的混和 组合在一起，可以通过嵌套多层id或者class来实现。

            当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？此时就需要命名空间

            #mynamespace() { //加 () 表示不输出到css   .home {...}   .user {...}}

            我们定义了一个名为 mynamespace 的命名空间，

            如果我们要复用 user 这个选择器的时候，

            在需要混入这个选择器的地方，只需使用 #mynamespace > .user 就可以了。

            将一个选择集其中的一部分拿出来，只采用这一部分数据操作

            less：

            #bgcolor(){ // 加()默认不输出    background: #ffffff;    .a{        color: #888888;        &:hover{            color: green;        }        .b{            background: red;        }    }}.bgcolor1{    background: yellow;    #bgcolor>.a;    // > 符号表示选中混合中的每一个样式}.bgcolor2{    // #bgcolor>.a>.b;    #bgcolor .a .b;  // 省略写法：将>换成空格即可}

            编译后的css:

            .bgcolor1 {  background: yellow;  color: #888888;}.bgcolor1:hover {  color: green;}.bgcolor1 .b {  background: red;}.bgcolor2 {  background: red;}

            6. 作用域

            首先会在局部查找变量和混合，如果没找到，编译器会在父作用域中查找，以此类推。

            7. 引入

            可以引入一个或多个.less文件，然后这个文件中的所有变量都可以在当前的less项目中使用！

            语法：@import 'less文件路径';

            比如：有一个main.less文件，如何引入项目中

            7.1 main.less

            @baby:300px;

            7.2 index.less

            //16.引入@import "../main"; //引入main.less文件 .contain-qq{    width:@baby;}

            7.3 编译后的css

            .contain-qq {  width: 300px;}

            7.4 引入可携带参数

            @import "main.less";@import (reference) "main.less";  //引用LESS文件，但是不输出@import (inline) "main.less";  //引用LESS文件，但是不进行操作@import (once) "main.less";  //引用LESS文件，但是进行加工，只能使用一次@import (less) "index.css";  //无论是什么格式的文件，都把它作为LESS文件操作@import (css) "main.less";  //无论是什么格式的文件，都把它作为CSS文件操作@import (multiple) "../main.less";  //multiple，允许引入多次相同文件名的文件@import (multiple) "../main.less";  //multiple，允许引入多次相同文件名的文件

            二、vue 配置less全局变量

            参考：https://blog.csdn.net/qq_42493241/article/details/120021001