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 ...
随机推荐
- Mysql 存储引擎的区别以及索引查询失效的情况
存储引擎:就是指表在计算机上的存储方式.可以通过 SHOW ENGINES; 命令查询支持的存储引擎. alter table test engine= innodb/memory/myisam/ar ...
- 8.26考试总结(NOIP模拟48)[Lighthouse·Miner·Lyk Love painting·Revive]
告诉我,神会流血吗?--神不会,但你会. 前言 我直接打娱乐赛 T1 Lighthouse 解题思路 子集反演(但是 fengwu 硬要说是二项式反演咱也没法...) 发现其实 \(m\) 的值非常的 ...
- Qt OPC UA通信
介绍 OPC UA全称Open Platform Unified Architecture,开放平台统一架构,是工业自动化领域通用的数据交换协议,它有两套主要的通信机制:1.客户端-服务器通信:2.发 ...
- SELinux 安全模型——TE
首发公号:Rand_cs SELinux 安全模型--TE 通过前面的示例策略,大家对 SELinux 应该有那么点感觉认识了,从这篇开始的三篇文章讲述 SELinux 的三种安全模型,会涉及一些代码 ...
- C# .NET 国密 SM2 签名 默认USER ID
C# .NET 国密 SM2 签名 默认USER ID: 1234567812345678 string userId = "1234567812345678"; byte[] b ...
- k8s搭建安装 Harbor 私有镜像仓库（本地仓库，内网仓库）
主要参考 https://www.cnblogs.com/wangzy-Zj/p/14011228.html 额外: 1.如果 harbor.yml中的域名和openssl 生成的不一致,你改了hos ...
- C#.NET与JAVA互通之MD5哈希V2024
C#.NET与JAVA互通之MD5哈希V2024 配套视频: 要点: 1.计算MD5时,SDK自带的计算哈希(ComputeHash)方法,输入输出参数都是byte数组.就涉及到字符串转byte数组转 ...
- python logger 打印日志错误行数
python logger 打印日志错误行数 import logging app = Flask(__name__) # 配置日志 handler = logging.FileHandler('ap ...
- gradle dependencies 查找jar导入OR解决jar冲突
在gradle项目中,使用gradle dependencies先查询jar包的导入关系.然后找到导入的jar加入到项目中来.解决jar冲突等问题. 类似格式如下: annotationProcess ...
- 函数式表达式基本类型及固定类型 demo
1.常见类型及使用 import java.util.function.BiConsumer; import java.util.function.BiFunction; import java.ut ...