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 ...
随机推荐
- 使用SQL语句完成数据表的去重工作
引入问题 可能大家都遇到过这样一种情况,一张表存在若干行数据,只是主键值相同,但是其它字段都是相同的,这就是我们通常所说的数据库重复数据,那我们是如何将这些数据删除呢?现在我们就介绍一种方法来实现数据 ...
- jQuery——动画加载页面
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script&g ...
- 薄书的Gitee 码云使用教程学习纪录
git 使用帮助 参考: https://www.liaoxuefeng.com/wiki/896043488029600/1163625339727712 https://blog.csdn.net ...
- swap文件修复
修复swap文件 vim -r /aaaa.swap
- 支付宝支付jemter 插件，导入到高版本jmeter 中使用
官方支付宝压力测试文档中: 蚂蚁金服开放平台 - 文档中心 (alipay.com) 有个 temp.jmx 文件(http://p.tb.cn/rmsportal_10157_temp.jmx.zi ...
- maven常用命令大全(附详细解释)
1.常用打包命令 mvn clean package -Dmaven.test.skip=true -- 跳过单测打包mvn clean install -Dmaven.test.skip=true ...
- JavaScript将类数组转换为数组的三种方法
// 类数组转换为数组 const list = [] // 假定为类数组 const arr1 = Array.from(list); const arr2 = Array.prototype.sp ...
- kettle从入门到精通 第六十九课 ETL之kettle kettle cdc mysql，轻松实现实时增量同步
1.之前kettle cdc mysql的时候使用的方案是canal+kafka+kettle,今天我们一起学习下使用kettle的插件Debezium直接cdc mysql. 注:CDC (Chan ...
- .NET8操作Mysql，Pomelo.EntityFrameworkCore.MySql版本目前最高只有7.0解决办法
Pomelo.EntityFrameworkCore.MySql7.0是不支持.NET8的,但现在Pomelo.EntityFrameworkCore.MySql的最新版本只有7.0 因为 Pomel ...
- golang模拟键盘输入字符串
介绍 仅供学习使用哈,不要用来开gua. 代码仓库:https://github.com/GuoFlight/gkeybd (本人仓库,欢迎留言) 注意事项 只支持英文 使用前请切换到英文输入法.因为 ...