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. &父选择器引用
在使用嵌套规则时,需要注意 & 符号。
当内层选择器前面没有& 符号时,它表示的是父选择器后面的后代选择器。
如果有& 时,表示的是父元素自身或父元素的伪类
 
更多使用方式从官网查看: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

 

Less常用功能使用的更多相关文章

  1. WebStorm 常用功能的使用技巧分享

    WebStorm 是 JetBrain 公司开发的一款 JavaScript IDE,使用非常方便,可以使编写代码过程更加流畅. 本文在这里分享一些常用功能的使用技巧,希望能帮助大家更好的使用这款强大 ...

  2. AVA正则表达式4种常用功能

    正则表达式在字符串处理上有着强大的功能,sun在jdk1.4加入了对它的支持 下面简单的说下它的4种常用功能: 查询: String str="abc efg ABC";  Str ...

  3. [转]WebPack 常用功能介绍

    概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...

  4. FastReport.Net 常用功能总汇

    一.常用控件 文本框:输入文字或表达式 表格:设置表格的行列数,输入数字或表达式 子报表:放置子报表后,系统会自动增加一个页面,你可以在此页面上设计需要的报表.系统在打印处理时,先按主报表打印,当碰到 ...

  5. python3 字符串与列表常用功能

    一.字符串常用功能 1. capitalize(),将字符串的首字母变成大写,其余全部置为小写:如果字符串中有多个单词,也只是将第一个单词的首字母置为大写:例: >>> name = ...

  6. matlab进阶:常用功能的实现,常用函数的说明

    常用功能的实现 获取当前脚本所在目录 current_script_dir = fileparts(mfilename('fullpath')); % 结尾不带'/' 常用函数的说明 bsxfun m ...

  7. WebPack常用功能介绍

    概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...

  8. JavaScript 常用功能总结

    小编吐血整理加上翻译,太辛苦了~求赞! 本文主要总结了JavaScript 常用功能总结,如一些常用的JS 对象,基本数据结构,功能函数等,还有一些常用的设计模式. 目录: 众所周知,JavaScri ...

  9. TeeChart控件的安装与常用 功能设置

    TeeChart控件的安装 TeeChart 7.0 With Source在Delphi 7.0中的安装 一.删除Delphi7自带TeeChart  1.Component -> insta ...

  10. CSS3常用功能的写法

    随着浏览器的升级,CSS3已经可以投入实际应用了. 但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题.上周的YDN介绍了CSS3 Please网站,该网站总结了一些常用功能的写法. 以下就是 ...

随机推荐

  1. NLP之TextRNN(预测下一个单词)

    TextRNN @ 目录 TextRNN 1.基本概念 1.1 RNN和CNN的区别 1.2 RNN的几种结构 1.3 多对多的RNN 1.4 RNN的多对多结构 1.5 RNN的多对一结构 1.6 ...

  2. 18.drf request及源码分析

    REST framework的 Request 类扩展了Django标准的 HttpRequest ,添加了对REST framework请求解析和身份验证的支持. 源代码片段: class Requ ...

  3. LabVantage仪器数据采集方案

    LabVantage的仪器数据采集组件为LIMS CI,是一个独立的应用程序/服务,实现仪器数据的采集(GC.LC等带有工作站的仪器). 将仪器输出数据转换为LIMS所需数据并传输,使用Talend这 ...

  4. SQL--存储过程的使用

    存储过程的概念 存储过程类似一个函数,可以执行一条或者多条SQL语句,可带参数,可返回值 为了简化操作,方便更改和扩展,将一个事件的处理封装在一个单元中供使用. 创建存储过程 --创建存储过程(不带参 ...

  5. vue2和vue3组合使用教程地址

    https://cn.vuejs.org/guide/essentials/watchers.html#eager-watchers

  6. Python基础部分:10、数据类型的内置方法和字符编码

    目录 一.数据类型内置方法 1.字典dict内置方法 1.1.类型转换 2.字典必须要掌握的方法 2.1.取值方式 2.2.修改内部数据值 2.3.删除数据 2.4.统计字典中键值对个数 2.5.字典 ...

  7. select中DISTINCT的应用-过滤表中重复数据

    在表中,一个列可能会包含多个重复值,有时也许希望仅仅列出不同(distinct)的值. DISTINCT 关键词用于返回唯一不同的值. SQL SELECT DISTINCT 语法 SELECT DI ...

  8. Java 中经常被提到的 SPI 到底是什么?

    layout: post categories: Java title: Java 中经常被提到的 SPI 到底是什么? tagline: by 子悠 tags: - 子悠 Java 程序员在日常工作 ...

  9. Linux面试题2:网络IO模型 & IO多路复用

    网络IO 先确定一下范围,我们讨论的都是网络IO,现阶段计算机早已经从CPU密集型转换成网络IO密集型,所以网络io的类型对于服务响应而言更重要. 五种IO模型 依据Unix的IO分类,网络IO分为五 ...

  10. VR技术名词解释

    视觉相关技术 分辨率 分辨率(resolution)就是屏幕图像的精密度,是指显示器所能显示的像素的多少.由于屏幕上的点.线和面都是由像素组成的,显示器可显示的像素越多,画面就越精细,同样的屏幕区域内 ...