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 ...
随机推荐
- datagridview 批量更新、日期设置、指定列弹出右键菜单
需求是这样,只有调整日期,调整金额两列能被修改,其余的列都不能被修改.日期格式要防止用户输错.数字输入了中文也要提示. 数据来源于存储过程里的视图,这里需要注意的一点是:datagridview采用a ...
- 牛逼！50.3K Star！一个自动将屏幕截图转换为代码的开源工具
1.背景 在当今快节奏的软件开发环境中,设计师与开发者之间的协同工作显得尤为重要.然而,理解并准确实现设计稿的意图常常需要耗费大量的时间和沟通成本.为此,开源社区中出现了一个引人注目的项目--scre ...
- Vue 页面传参方式 Query 和 Params
1. query 与 params 传参 query 需要和配合 path 属性使用,携带参数会拼接在请求路径后,效果同 Get 请求方式 http://localhost:8033/Permissi ...
- Vulkan Support Check and Dynamic Loader C++ code sample
很多时候不想静态依赖VulkanSDK所提供的静态库,因为会遇到一些过早的电脑不支持vulkan, 那么就需要使用动态加载vulkan-1.dll(for Windows)或libMoltenVK.d ...
- vue中退出循环的方法
forEachforEach不能使用break和continue.return也无法退出循环. 使用break,会报错(报错信息:SyntaxError: Illegal break statemen ...
- a标签的title属性 换行
使用 title 属性,可以让鼠标悬停在超链接上的时候,显示该超链接的文字注释. <a href="#" title = "123">超链接< ...
- 前端开发环境配置 nvm | npm 镜像 | git
安装 nvm nvm 是一个node版本管理工具,它可以让我们安装多个node版本并在需要的时候切换 # nvm 下载地址 https://github.com/coreybutler/nvm-win ...
- javascript 生成器和迭代器
前置知识 生成器函数会返回一种称为Generator的迭代器 迭代器是一个对象,定义一个序列,并在终止时返回一个返回值 Symbol.iterator为每一个对象定义了默认的迭代器,可以被for..o ...
- java8 多条件的filter过滤
java8 多条件的filter过滤 package com.example.core.mydemo.java; import java.io.Serializable; import java.ti ...
- redshift DATE_TRUNC函数 查询日期上个月的26号到当前月的26号
redshift DATE_TRUNC函数 查询日期上个月的26号到当前月的26号 # redshift脚本 # 2023-08-01 00:00:00.000 select DATE_TRUNC(' ...