理解以及使用less
一、 LESS是什么？
- LESS将CSS赋予了动态语言的特性，如变量、继承、运算、函数。
- .LESS既可以在客户端上运行，也可以借助Node.js或者Rhino在服务端运行。
- 将.less文件编译后为正常的css样式
二、 如何使用LESS
- 在html文件中引入less文件：
<link href="less文件地址" rel="stylesheet/less">- 引入
Less.js文件：<script src="文件地址"></script>
三、 LESS基础语法
1. 变量
① 声明变量：@变量名：值;
② 使用变量：@变量名
- 在定义以及使用变量时，当对同一变量二次赋值时，会有作用域的问题，导致二次赋值以后的所有使用都为新值。
- 在给有单位的属性赋值时，变量赋值必须要带单位
@color1:red;//全局变量
.borderColr{@radius:50%;//局部变量background:@color1border-radius:@radius
}
@color1:green;//二次赋值
.test{border-radius:@radius;//报错radius为局部变量background:@color1;//背景为绿色
}
2. 混合
- 混合可以将一个定义好的class A轻松引入到另一个class B中，从而实现class B继承class A的所有样式。还可以带参调用，就和调用方法一样。
- 不传参调用不需要带括号。传参调用需要带括号。
arguments包含了所有传递进来的参数
//arguments
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {box-shadow: @arguments;-moz-box-shadow: @arguments;-webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);
@color1:red;//全局变量
.borderColor{background:@color1;.borderRadius;//不传参调用，不需要带括号.height(200px);//传参调用，需要带括号。
}
.borderRadius(@r:10px){border-radius:@r;
}
.height(@h:100px){height:@h;
}//混合 编译后的.borderColor
.borderColor{background:red;border-radius:10px;height:200px;
}
3. 嵌套规则
- 我们可以在一个选择器里嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
&代表本身，若在一个选择器中添加&:hover代表给本身添加hover样式
#header {h1 {font-size: 26px;font-weight: bold;}p {font-size: 12px;a {text-decoration: none;&:hover { border-width: 1px}}}
}//生成的css
#header h1 {font-size: 26px;font-weight: bold;
}
#header p {font-size: 12px;
}
#header p a {text-decoration: none;
}
#header p a:hover {border-width: 1px;
}
4. 加减运算
- 运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系
- 属性值的加减运算是带单位运算。颜色的运算时符号和值之间必须要有空格，否则报错，eg： 错误：@bgcolor-@bgcolor2；正确：@bgcolor - @bgcolor2
@w:100px;
@h:100px;
@bgcolor:#ff0000;
@bgcolor2:#009991;
.sn{width: @w*2;//200pxheight: @h*2;//200pxborder: 1px solid @color;background-color: @bgcolor - @bgcolor2;
}
5. 颜色的函数
lighten(color,百分比)：100%为白色，0%为原色。百分比越大颜色越亮dark(color,百分比)：100%为黑色，0%为原色。百分比越大颜色越暗saturate(color，百分比)：增大饱和度。但给普通颜色设置饱和度无变化。给hsl(..,..,..)设置饱和度有变化desaturate(color，百分比)：降低饱和度fadein(颜色，百分比)：增加颜色的不透明度fadeout(颜色,百分比)：减少颜色的不透明度spin(颜色，度数)：度数为数字。用于旋转所选颜色的角度（在颜色拼盘上逆时针旋转）mix(color1,color2)：混合两个颜色
6. Math函数
不可用下面三个函数拼接字符串给属性赋值（会在数字和字符串间自动生成一个空格）。但可直接用于相加减，也可直接对带px单位的属性做运算
round(num)：四舍五入ceil(num)：向上取整floor(num)：向下取整percentage(num):将一个数转成百分比
@a:round(200.6);
@height:200.266px;
@height:round(200.6)px;//错误，生成的为200 px
.sx{height: round(@height);//200pxheight:round(@height)+@a;//400pxheight:@a+"px";//错误 ，生成201 "px"border:1px solid #fff000;
}
7. 命名空间（命名空间起名称可用：以./#开头）
有时为了更好地封装或组织css，可将其放入一个命名空间中
#hello{//命名空间.borderColor(@c:#ff0){border:1px solid @c;}
}
.se{height: round(@height)+@a;
#hello>.borderColor(#000);//使用命名空间中的样式
}
8. 字符串插值：可将变量通过@{变量名}的方式嵌入到字符串中
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
//编译完成后为http://assets.fnord.com/images/bg.png
9. 避免编译：加上~可不对后面的内容进行编译
- 有时我们需要输出一些不正确的css语法或者使用一些less不认识的专有语法，需要使用
~，将其后面的内容不进行编译而直接输出字符串- 可用
""将避免编译的内容包含起来
.class {filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}//生成css的结果为.class {filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}
10.模式匹配和导引表达式
① 模式匹配
- 可根据不同的赋值起到模式匹配的作用。只有被匹配的混合才会被使用。变量可以匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的传入值。
- 下例中，
mixin、switch都是名称，可换。默认匹配的参数名也可换
//在下面例子中，可根据@switch的值取不同的.mixin，.mixin(@_,@color)代表无论@switch为什么值都会匹配
//假如@switch为dark，则会取第一个样式
@switch:dark;
.mixin (dark, @color) {//只接受dark作为首参color: darken(@color, 10%);
}
.mixin (light, @color) {//只接受light作为首参color: lighten(@color, 10%);
}
.mixin (@_, @color) {//无论首参为什么都会被匹配display: block;
}
.class {.mixin(@switch, #888);
}//上述例子编译后的CSS
.class {display: block;color: darken(#888, 10%);
}
② 导引
when关键字被定义为一个导引序列，只有当when括号中的判断为真时才会采用该混合，否则不采用- 导引中可用运算符：
>、<、>=、<=、=（判断左右两边是否相等）- 导引中只有关键字
true为真，其余值都被视为布尔假- 导引序列使用
,分割不同的条件，当所有条件中任意一个条件符合时都会被视为匹配成功。- 在导引序列中可以使用
and关键字实现与条件，使用not关键字实现非运算。,实现或运算- 如果想要基于值类型进行匹配，有几个函数：
①iscolor(变量)
②isnumber(变量)
③isstring(变量)
④iskeyword(变量)
⑤isurl(变量)- 如果要判断一个值是纯数字还是某个单位量，可用以下函数
①ispixel(数字)：是否为带像素单位的值
②ispercentage(数字)：是否为百分数
③isem(数字)
理解以及使用less相关推荐
- 通用解题法——回溯算法（理解+练习）
积累算法经验,积累解题方法--回溯算法,你必须要掌握的解题方法! 什么是回溯算法呢? 回溯算法实际上一个类似枚举的搜索尝试过程,主要是在搜索尝试过程中寻找问题的解,当发现已不满足求解条件时,就&quo ...
- stream流对象的理解及使用
我的理解:用stream流式处理数据,将数据用一个一个方法去 . (点,即调用) 得到新的数据结果,可以一步达成. 有多种方式生成 Stream Source: 从 Collection 和数组 Co ...
- Linux shell 学习笔记（11）— 理解输入和输出（标准输入、输出、错误以及临时重定向和永久重定向）
1. 理解输入和输出 1.1 标准文件描述符 Linux 系统将每个对象当作文件处理.这包括输入和输出进程.Linux 用文件描述符(file descriptor)来标识每个文件对象.文件描述符是一 ...
- java局部变量全局变量,实例变量的理解
java局部变量全局变量,实例变量的理解 局部变量 可以理解为写在方法中的变量. public class Variable {//类变量static String name = "小明&q ...
- 智能文档理解:通用文档预训练模型
预训练模型到底是什么,它是如何被应用在产品里,未来又有哪些机会和挑战? 预训练模型把迁移学习很好地用起来了,让我们感到眼前一亮.这和小孩子读书一样,一开始语文.数学.化学都学,读书.网上游戏等,在脑子 ...
- 熵,交叉熵,散度理解较为清晰
20210511 https://blog.csdn.net/qq_35455503/article/details/105714287 交叉熵和散度 自己给自己编码肯定是最小的 其他的编码都会比这个 ...
- mapreduce理解_大数据
map:对不同的数据进行同种操作 reduce:按keys 把数据规约到一起 看这篇文章请出去跑两圈,然后泡一壶茶,边喝茶,边看,看完你就对hadoop 与MapReduce的整体有所了解了. [前言 ...
- 文件句柄和文件描述符的区别和理解指针
句柄是Windows用来标识被应用程序所建立或使用的对象的唯一整数,Windows使用各种各样的句柄标识诸如应用程序实例,窗口,控制,位图,GDI对象等等.Windows句柄有点象C语言中的文件句柄. ...
- 通俗理解条件熵-数学
就是决策树里面选划分属性用到的计算 条件熵越小表示划分之后各个集合越纯净 前面我们总结了信息熵的概念通俗理解信息熵 - 知乎专栏,这次我们来理解一下条件熵. 我们首先知道信息熵是考虑该随机变量的所有可 ...
- 通俗理解tf.nn.conv2d() tf.nn.conv3d( )参数的含义 pytorhc 卷积
20210609 例如(3,3,(3,7,7))表示的是输入图像的通道数是3,输出图像的通道数是3,(3,7,7)表示过滤器每次处理3帧图像,卷积核的大小是3 x 7 x 7. https://blo ...
最新文章
- CSS3的过渡和动画
- 获取打印机分辨率_喵喵机P2S热敏打印机，升级屏幕带来了哪些体验？?
- 数据结构与算法JavaScript描述——链表
- arm 流水线和pc值
- swift调用支付宝
- php 获取某一年最后一天_vivo年货节最后一天!多款机型大促，错过让你后悔再等一年!...
- Jmeter（二）Jmeter目录介绍
- 四维空间和五维空间N维空间遐想
- c++的类中，声明一个对象好还是用指针申请一块空间好？
- archlinux安装个简单桌面icewm
- 【波形发生器(附源码)】基于DAC+DMA+UART的幅值、频率可调的正弦波、方波、三角波发生器
- 房地产类软件实战教程，如何写好房地产类软文
- 互联网的裁员潮，从业者该怎么样应对？
- 【Verilog】一、Verilog概述
- linux mac地址远程开机,用MAC地址远程开机的开机棒你见过吗？
- 有什么文字转语音软件？这几个软件你不能不知道
- MD5加密（MD5Util ）
- VSCode搭建 c 环境教程
- 免费申请使用IBM Cloud Lite(轻量套餐) 详细教程指南
- 帕斯卡三角形题解（Python代码实现）