Less常用功能使用

Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。
Less常用的重要功能有:
1.变量
2.cala计算
3.html样的选择器嵌套
4. &父选择器本身或父选择器伪类
 
1.变量
包括变量的定义,变量的引用,变量的计算
值变量
1
2
3
4
5
6
7
8
9
@width:5000px;
@height:300px;
@font_size:12px;
 
.textarea {
    width:@width;
    height:@height;
    font-size:@font_size;
}

名称变量(选择器或属性名)

1
2
3
4
5
6
7
8
9
10
11
12
13
@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计算
1
2
3
4
5
6
7
8
div{
@val: 0.20rem;
width: calc(~”100% - @{val}”);
}
编译成:
div {
width: calc(100% - 0.2rem);
}
3.选择器嵌套,引用
less的使用像html一样使用的嵌套结构,并且可以引用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
 
//引用使用
#menu a {
  color: #111;
  .bordered();
}
 
.post a {
  color: red;
  .bordered();
}
4. &父选择器引用
在使用嵌套规则时,需要注意 & 符号。
当内层选择器前面没有& 符号时,它表示的是父选择器后面的后代选择器。
如果有& 时,表示的是父元素自身或父元素的伪类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.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”
1
2
3
4
5
6
7
8
9
10
<style>
    span{
         background: yellow;
     }
      span:hover::before{
          content:"duang";
      }
  </style>
   
  <span>222</span>

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

 
posted @   滴水微澜  阅读(289)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
点击右上角即可分享
微信分享提示