首页 前端知识 less的基本使用

less的基本使用

2024-03-10 11:03:25 前端知识 前端哥 715 137 我要收藏

目录

  • 一、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;

div{
  @{bg-img}:路径;
} 

编译后的css:

div {
  background-image: 路径;
}

1.3 变量用作类名

语法:@变量名: 类名;

less:

//定义类名
@demo:newClass;

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

编译后的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;
}
.div{
    .mini(1,2,3;something, ele);
}

编译后的css:

.div {
  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;
}
.div4{
    .son3();
}

编译后的css:

.div4 {
  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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3513.html
标签
less
评论
发布的文章

Jquery——基础

2024-04-03 12:04:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!