Less常用功能使用

Less,功能,常用 · 浏览次数 : 215

小编点评

**Less 是一个 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。** **以下是一些 Less 的重要功能：** * **变量：**允许定义和使用变量，并通过变量名访问变量的值。 * **混合（mixin）：**允许将多个 CSS 样式片段组合成一个新的样式。 * **函数：**允许定义可重复使用的 CSS 语句。 * **选择器嵌套：**允许使用嵌套结构来指定多个选择器。 * **&父选择器引用：**允许使用 `&`符号引用父选择器的后代选择器。 * **变量嵌套：**允许将变量定义和其他变量嵌套在一起。

正文

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

Less常用的重要功能有：

1.变量

2.cala计算

3.html样的选择器嵌套

4. &父选择器本身或父选择器伪类

1.变量

包括变量的定义，变量的引用，变量的计算

值变量

@width:5000px;
@height:300px;
@font_size:12px;

.textarea {
	width:@width;
	height:@height;
	font-size:@font_size;
}

名称变量（选择器或属性名）

@width:5000px;
@height:300px;
@font_size:12px;
@name:.text;
@b_c:border-color;
.textarea {
	width:@width;
	height:@height;
	font-size:@font_size;
}
@{name} {
    @{b_c}: aqua;
}

2.calc计算

div{ 
@val: 0.20rem; 
width: calc(~”100% - @{val}”); 
}
编译成:
div { 
width: calc(100% - 0.2rem); 
}

3.选择器嵌套，引用

less的使用像html一样使用的嵌套结构，并且可以引用

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

//引用使用
#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

4. &父选择器引用

在使用嵌套规则时，需要注意 & 符号。

当内层选择器前面没有& 符号时，它表示的是父选择器后面的后代选择器。

如果有& 时，表示的是父元素自身或父元素的伪类

    .van-cell {
      background-color: #007bff;
      color: white;
      &::after {
        display: none;
      }
      .avatar {
        width: 60px;
        height: 60px;
        background-color: #fff;
        border-radius: 50%;
        margin-right: 10px;
      }
      .username {
        font-size: 14px;
        font-weight: bold;
      }
    }

更多使用方式从官网查看：https://less.bootcss.com/#概览

伪类与伪元素介绍

伪元素：使用::before ::after修饰，创建的一个有内容的虚拟容器。这个元素虽然逻辑上存在，但并不存在于实际的DOM树中，它是新创建的元素，这个新创建的元素叫“伪元素”。

伪类（xxx的伪类，如a:link）：使用:link :hover修饰，它存在于DOM树中，逻辑上存在，但在DOM树上无须标识的“幽灵”标签。

:before/:after是Css2的写法，

::before/::after是Css3的写法

1.伪元素要配合content属性一起使用

2.伪元素不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入

3.伪元素的特效通常要使用:hover伪类样式来激活

4.eg:当鼠标移在span上时，span前插入”duang”

<style>
 　　 span{
         background: yellow;
     }
      span:hover::before{
          content:"duang";
      }
  </style>
  
  <span>222</span>

参考文章：https://blog.csdn.net/weixin_49115895/article/details/108683791