Less预处理器的使用
练习页面：
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>第一：基本使用
less使用嵌套的方式实现子类或者后代选择器：
1，实现后代选择器
使用大括号嵌套表示祖先和后代之间的关系
.div1{
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
border: 1px red solid;
.div2{
position: absolute;
width: 50px;
height: 50px;
background-color:black;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
}编译之后
.div1 {
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
border: 1px red solid;
}
.div1 .div2 {
position: absolute;
width: 50px;
height: 50px;
background-color: black;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}变量的使用：
使用方法：通过@变量名：变量值的方式来定义变量；使用变量规则：若该变量表示的是样式的属性值，使用@变量名；如果该变量表示的是一个样式的属性或者选择器或者一个url时，则使用：@{变量名}的方式引入。
@colorBGC:black;/*定义属性值变量*/
@posi:position;/*定义属性变量*/
@selecter:div2;/*定义选中器变量*/
.div1{
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
border: 1px red solid;
.@{selecter}{/*使用选择器变量*/
@{posi}: absolute;/*使用属性变量*/
width: 50px;
height: 50px;
background-color:@colorBGC;/*使用属性值变量*/
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
}编译结果和上一步编译成的css结果一样。
变量的延迟加载：定义变量尽量定义在全局，如果定义在使用之后，加载同一个同名变量会加载最后一个变量作为其变量名。同时变量还有域的概念，先在本作用域找变量，在到其祖先选择器找变量。
@v:1;
.div1{
@v:2;
.div2{
@v:3;
top:@v;
@v:4;
}
height: @v;
}输出结果为：
.div1 {
height: 2;
}
.div1 .div2 {
top: 4;
}
由此可看出，变量首先赋值，再使用。
2,&的使用
&表示的是平级，通常使用在并集选择器或者伪类伪元素之中
@colorBGC:black;/*定义属性值变量*/
@posi:position;/*定义属性变量*/
@selecter:div2;/*定义选中器变量*/
div{
.@{selecter}{/*使用选择器变量*/
@{posi}: absolute;/*使用属性变量*/
width: 50px;
height: 50px;
background-color:@colorBGC;/*使用属性值变量*/
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
&:hover{/*表示选择器 div div2：hover */
background-color:red;
}
}
&.div1{/*表示选择器 div.div1 */
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
border: 1px red solid;
}
}输出结果为：
div .div2 {
/*使用选择器变量*/
position: absolute;
/*使用属性变量*/
width: 50px;
height: 50px;
background-color: black;
/*使用属性值变量*/
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
div .div2:hover {
background-color: red;
}
div.div1 {
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
border: 1px red solid;
}第二：混合mixins
1，普通混合
通过定义样式规则的方式，通过样式规则名引用规则就可；
样式规则：
.样式规则名（args）{
样式.....
}引用：
.样式规则名（args）注意：可以不转参数或者省略小括号，省略小括号表示的是将该规则编译到css文件中。
.guize(){//定义混合
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
border: 1px red solid;
}
div{
.guize;//引入混合
.div2{
position: absolute;
width: 50px;
height: 50px;
background-color:red;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
&:hover{
background-color:blue;
}
}
}2，带参数混合
带参数表示的是变量，通过定义变量，将变量转入混合中。
.guize(@color,@h,@w){//传参的形式
width: @w;
height: @h;
margin: 0 auto;
position: relative;
border: 1px @color solid;
}
div{
.guize(red,200px,200px);//传入参数S
.div2{
position: absolute;
width: 50px;
height: 50px;
background-color:red;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
&:hover{
background-color:blue;
}
}
}可以通过传不同的参数，来实现对不同选择器的相同属性的不同属性值的控制。
3，带参数且有默认值混合
.guize(@color:red,@h:100px,@w:100px){//传参的形式
width: @w;
height: @h;
margin: 0 auto;
position: relative;
border: 1px @color solid;
}
div{
.guize(red,200px,200px);//传入参数S
.div2{
position: absolute;
width: 50px;
height: 50px;
background-color:red;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
&:hover{
background-color:blue;
}
}
}如果我们少少传参数的时候，它会按照顺序进行匹配，此时如果传一个200px传给@w，则@color的值会是一个200px，不符合，此时可以通过命名参数实现对应传参。在调用的时候使用： .guize(@w：200px)就可将数据传给@w。
4，匹配混合
如我们画三角形，想要获取对应方向的三角形，需要一个个的动手换样式。为了代码复用，我们可以将四个方向的三角形样式都定义在一个文件中，然后再引入，通过特定的标识来匹配不同的样式：
四个角的样式：
.guize(@_){
width: 0;
height: 0;
border-width: 40px;
border-style: solid;
}
.guize(R){
border-color: transparent red transparent transparent;
}
.guize(T){
border-color: red transparent transparent transparent ;
}
.guize(L){
border-color: transparent transparent transparent red;
}
.guize(B){
border-color: transparent transparent red transparent;
}注意：将相同的样式定义在同名函数内，通过参数@_ 可以实现在编译的时候将样式编译到被匹配的样式中去。
匹配调用：
获取上三角
@import ‘./guize.less’
.div1{
height: 200px;
width: 200px;
border: blueviolet solid 1px;
.div2{
.guize(T);
}
}获取下三角：
@import ‘./guize.less’
.div1{
height: 200px;
width: 200px;
border: blueviolet solid 1px;
.div2{
.guize(B);
}
}注意：这个就是画三角形的API。
5，@arguments混合
就是在传参的使用，直接通过@arguments获取实参列表而不是一个个写。
.guize(@1,@2,@3){
border:@arguments;
}
.div1{
height: 200px;
width: 200px;
border: blueviolet solid 1px;
.div2{
height: 50px;
width: 50px;
.guize(red,solid,1px);
}
}编译后：
.div1 {
height: 200px;
width: 200px;
border: blueviolet solid 1px;
}
.div1 .div2 {
height: 50px;
width: 50px;
border: red solid 1px;
}第三：less计算
less中的可计算值数值可以实现加减乘除运算（加入计算的数值只需要一个数值有单位就可，都有也可以）
.guize(@1,@2,@3){
border:@arguments;
}
.div1{
height: 200px;
width: 200px;
border: blueviolet solid 1+2px;//计算
.div2{
height: 50px;
width: 50px;
.guize(red,solid,1px);
}
}编译：
.div1 {
height: 200px;
width: 200px;
border: blueviolet solid 3px;/*结果为3px*/
}
.div1 .div2 {
height: 50px;
width: 50px;
border: red solid 1px;
}
Less预处理器的使用的更多相关文章
- 前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
- C和指针 第十四章 预处理器 头文件
编写一个C程序,第一个步骤称为预处理,预处理在代码编译之前,进行一些文本性质的操作,删除注释.插入被include的文件.定义替换由#define定义的符号,以及确定代码的部分内容是否应该按照条件编译 ...
- 关于前端CSS预处理器Sass的小知识！
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- CSS预处理器Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...
- C#预处理器指令 ，你造吗？？？ (●'◡'●)
什么是c#预处理指令?? 用于在 C# 源代码中嵌入的编译器命令. C#预处理器指令有哪些?? ↓↓↓这些就是预处理器指令啦 下面我们一一道来(●'◡'●) 1.#if ,#elif,#else,en ...
- Myth – 支持变量和数学函数的 CSS 预处理器
Myth 是一个预处理器,有点类似于 CSS polyfill .Myth 让你写纯粹的 CSS,同时还让你可以使用类似 LESS 和 Sass 的工具.您仍然可以使用变量和数学函数,就像你在其它预处 ...
- Harp – 内置常用预处理器的静态 Web 服务器
Harp 是一个基于 Node.js 平台的静态 Web 服务器,内置流行的预处理器,支持把 Jade, Markdown, EJS, Less, Stylus, Sass, and CoffeeSc ...
- Koala – 开源的前端预处理器语言图形编译工具
koala 是一个前端预处理器语言图形编译工具,支持 Less.Sass.Compass.CoffeeScript,帮助 Web 开发者更高效地使用它们进行开发.跨平台运行,完美兼容 Windows. ...
- CSS 预处理器（框架）初探：Sass、LESS 和 Stylus
现在最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 拿less来说,可以在页面上直接使用less文件,但要引用less.js进行解析:同时也可以直接将less ...
随机推荐
- C# winform GDI+ 五子棋 （一）：基本界面和胜负判断
棋盘和棋子采用GDI+画上去的.棋盘18*18.棋子是用DrawElipse画的,白棋和黑棋分两个List集合存储,方便判断五子连线的情况. 主要说一下,五子连线的思路,把集合按行和按列以及按正斜和反 ...
- EasyUI框架Datagrid（数据表格）的实现，以及Datagrid的分页显示（详解）
在前端页面中使用EasyUI框架时,通常会使用EasyUI自带的datagrid(数据表格)样式,下面我们对datagrid样式进行简单的介绍,并且会对datagrid的分页显示进行详细的介绍. Ea ...
- WPF中 x:Name和Name的区别
x:Name 唯一地标识 XAML 定义的对象,以便于从代码隐藏或通用代码中访问对象图中实例化的对象.x:Name 一旦应用于支持编程模型,便可被视为与由构造函数返回的用于保存对象引用或实例的变量等效 ...
- 莫烦tensorflow学习记录 （6）卷积神经网络 CNN (Convolutional Neural Network)
卷积 和 神经网络 莫烦大佬的原文章https://mofanpy.com/tutorials/machine-learning/tensorflow/intro-CNN/ 我的理解就是千层饼,鸡蛋烧 ...
- ABC351
我多久没更新这个系列了啊 E 把格子分成两类,每一类之间的坐标均可互相走到. 然后将这里面的点都旋转 \(45\) 度,于是这个问题就被转换成曼哈顿距离的问题了. 我们可以把 \(x\) 和 \(y\ ...
- Grafana 开源了一款 eBPF 采集器 Beyla
eBPF 的发展如火如荼,在可观测性领域大放异彩,Grafana 近期也发布了一款 eBPF 采集器,可以采集服务的 RED 指标,本文做一个尝鲜介绍,让读者有个大概了解. eBPF 基础介绍可以参考 ...
- 聊聊GLM-4-9B开源模型的微调loss计算
概述 Github官方地址:GLM-4 网上已经有很多关于微调的文章,介绍各种方式下的使用,这里不会赘述.我个人比较关心的是微调时的loss计算逻辑,这点在很多的文章都不会有相关的描述,因为大多数人都 ...
- AES加密和解密,key需要32位
AES加密和解密,key需要32位 package com.example.core.mydemo.sign; import org.apache.commons.codec.binary.Base6 ...
- Windows查看电源使用情况
这里使用Windows自带的东西查看电源使用情况. 1.按Win键+R,输入cmd,回车. 2.输入Powercfg /batteryreport回车. 3.根据提示找到电池报告文件,双击打开即可.
- opc da 服务器数据 转 profinet IO项目案例
1 案例说明 1. 在OPC DA服务器上运行OPC DA client软件查看OPC DA服务器的相关参数. 2. 配置VFBOX网关参数,使用网关采集OPC DA服务器数据 ...