1.初识less
- less 是一个 css 扩展,让 css 变成支持变量,嵌套等操作的 css 语言
- 可以去 Less官方文档 去学习
- less是一门css的预处理语言
- less是一个css的增强版,通过less可以编写更少的代码实现更强大的样式
- 在less中添加了许多的新特性:像对变量的支持、对mixin的支持… …
- less的语法大体上和css语法一致,但是less中增添了许多对css的扩展,所以浏览器无法直接执行less代码,要执行必须向将less转换为css,然后再由浏览器执行
2.less 基础
-
less 可以在浏览器端使用也可以在服务端使用
-
在浏览器端使用CDN:
HTML <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>
-
并且需要告诉浏览器我们写的是 less 代码:
HTML <style type="less"></style>
-
但是上面的方法是运行时编译 (也就是运行这个网页时才把 less 文件转化为 css),影响网页加载时间
-
我们想让我们写好 less 文件之后直接转换成 css 文件,这里 vscode 安装
EasyLESS
插件,写好之后会自动生成语义相同的 css 文件
关于EasyLESS扩展的配置
在settings.json文件中添加以下代码(注意json文件中尽量不要添加中文注释,会报错)
JSON
{
"less.compile": {
"compress": true,
"sourceMap": true,
"out": true,
}
}
-
compress
代表压缩css。 -
sourceMap
代表生成地图(在浏览器控制台可以追踪到less文件位置) -
out
代表输出对应的css文件所以一般全部都为true
当然你也可以这样
CODE
"less.compile": {
"out": "${workspaceRoot}\\src\\assets\\css\\"
}
- ‘${workspaceRoot}’ 代表的是根目录;
- 这样就可以更改生成.css文件的路径了,但是上面代码配置是我的.css文件的目录地址,这个自行配置就行;
3.less语法
3.1 导入与注释
在 less 中导入文件用 @import
import用来将其他的less引入到当前的less
可以通过import来将其他的less引入到当前的less中
HTML
@import "../test.less";
less 注释
- less 里面的注释分为在编译之后仍然显示和在编译以后不显示两种
HTML
/* 我在编译之后仍然显示 */ css中的注释,内容会被解析到css文件中
// 我在编译之后不显示 less中的单行注释,注释中的内容不会被解析到css中
3.2 less变量
- less 中使用
\@
来定义变量 - less 中的变量是
块级作用域
HTML
@color:pink;
- 选择器和属性名同样可以作为变量 (但是这种形式用的很少)
CSS
@m:margin;
@selector:#wrap;
* {
// 使用的时候要加大括号
@{m}:0;
}
@{selector} {
color: pink;
}
// 网址在使用的时候也要加大括号
@image: "../image";
div {
background: url("@{image}");
}
- 变量的延迟加载 (变量提升):less 会等到块级作用域加载完成才会替换里面的变量
HTML
div {
//可以先使用后定义
z-index: @var;
@var: 3;
}
// z-index 属性值为 3
- 变量发生重名时,会优先使用比较近的变量
CSS
@d:200px;
@d:300px;
@h:200px;
@h:300px;
div{
// 变量发生重名时,会优先使用比较近的变量
@d:115px;
width: @d; //此处使用115px
height: @h; //此处使用115px
//可以在变量声明前就使用变量
@h:115px;
}
- 其实 css3 中也支持变量,以两个横线开头定义一个变量
--
CSS
html{
/* css原生也支持变量的设置 */
--color:#ff0;
--length:200px;
}
新版本语法$
CSS
div{
width: 300px;
// 新版的语法
height: $width;
}
3.3 less嵌套规则
- 父标签的样式可以嵌套子标签的样式 (像在 html 里面的结构一样)
CSS
#father {
color:pink;
.inner {
color: purple;
}
}
-
假如要让 子元素 .inner 添加一个 hover 属性
& 表示父类的名称
CSS
#father {
color:pink;
.inner {
color: purple;
// 不能直接在里面写 :hover,这样写他会直接变成inner的子元素
// 要这样写
&:hover {
background: pink;
}
}
}
3.4 less混合
- 混合是为了避免大量重复的样式代码,可以将一部分样式打包成代码块 (长得很像函数)
CSS
// 可以传参,即使没有参数也要加括号,加了括号后在 css 文件中不会显示
.template(@w,@h) {
color: pink;
width: @w;
height: @h;
}
div {
// 上面的样式就添加到里面了
.template(100px,100px);
}
- less 混合支持默认参数,例如:
CSS
.template(@w:100px,@h:200px) {
color: pink;
width: @w;
height: @h;
}
div {
// 这时里面可以不用传参数
.template();
}
- less 也支持命名参数,解决了参数不匹配的问题
CSS
.template(@w:100px,@h:200px,@c:pink) {
color: @c;
width: @w;
height: @h;
}
div {
// .template(black);
// 显示错误,w 参数把 black 接收了过去,导致显示错误
.template(@c:black);
// 正确写法
}
小知识:haslayout:是 ie6 版本之前的兼容性问题,可以开启 haslayout 来解决兼容性问题 开启的方法:
overflow: hidden
- less 匹配模式:例如想要弄四个方向的三角型,可以在函数的第一个参数上弄一个标识符,然后就可以定义四个混合,这时就可以根据传入的参数来判断想要用的是哪个方向的三角型
CSS
// 向左的三角型
.template(L,@w:100px,@h:200px,@c:pink) {
// 假如里面是画三角型的方法
color: @c;
width: @w;
height: @h;
}
// 向右的三角型
.template(R,@w:100px,@h:200px,@c:pink) {
// 假如里面是画三角型的方法
color: @c;
width: @w;
height: @h;
}
div {
// 想要一个向左的三角型
.template(L);
}
- 当混合里面的第一个参数是
@_
时并且也拥有其他形参时,调用同名混合也会把拥有这个参数的混合调用上- arguments 变量:和 js 中的
arguments
是一样的,是包含实参的伪数组
- arguments 变量:和 js 中的
CSS
.border() {
border: @arguments;
}
div {
.border(1px,solid,black);
}
// 可以把合并语法传入进去
3.5 less 计算
- 在 less 中,计算的双方只需要一方带单位就可以了
- 例如:
100 + 100px == 200px
- 为了和 css 保持兼容,less 不会把
calc()
属性计算出来,会留到 css 中计算
在less中所有的数值都可以直接进行运算
CSS
.box1{
// 在less中所有的数值都可以直接进行运算
// + - * /
width: 100px + 100px;
height: 100px/2;
background-color: #bfa;
.box1{
/* calc()计算函数 */
width: calc(200px*2);
height: var(--length);
background-color: var(--color);
}
}
3.6 less 继承
- 继承同样是为了压缩代码,混合有时候两个类似的功能,他们的 css 代码相差不多,但是里面有很多的重复,这时我们可以使用继承来写这部分代码
- 在继承中不支持参数
- 语法格式:
div:extend(.jicheng)
(实质就是在两个选择器中加了一个逗号)
CSS
//:extend() 对当前选择器扩展指定选择器的样式(选择器分组)
.p2:extend(.p1){
color: red;
}
.p3{
//直接对指定的样式进行引用,这里就相当于将p1的样式在这里进行了复制
//mixin 混合
.p1();
}
// 使用类选择器时可以在选择器后边添加一个括号,这时我们实际上就创建了一个mixins
.p4(){
width: 100px;
height: 100px;
}
.p5{
.p4;
}
或者我们这样来看更直观
CSS
// less 文件
.jicheng {
width: 100px;
height: 100px;
margin: 0;
padding: 0;
}
.header:extend(.jicheng) {
/* header 里的代码 */
}
- less 编译后
CSS
/* css 文件 */
.jicheng,
.header {
width: 100px;
height: 100px;
margin: 0;
padding: 0;
}
.header {
/* header 里的代码 */
}
- 想要继承类的所有状态需要在 extend 后面加上 all
div:extend(.jicheng all)
CSS
.jicheng {
// 继承的东西...
}
.jicheng:hover {
// :hover 继承的东西...
}
.header:extend(.jicheng all) {
// header 自己的样式
}
- 这样就可以继承本身的和 :hover 的了
CSS
.jicheng,
.header {}
.jicheng:hover,
.header:hover {}
3.7 函数
1.数学函数
1.1 ceil()函数:表示向上取整
less:
.ceil{
width:ceil(555.99999px);
}
css:
.ceil {
width: 556px;
}
1.2 floor()函数:表示向下取整
less:
.floor{
height:floor(333.77777px);
}
css:
.floor {
height: 333px;
}
1.3 percentage()函数:表示把浮点数转换为百分比
less:
.percentage{
width:percentage(0.30px);
}
css:
.percentage {
width: 30%;
}
1.4 round()函数:表示取整和四舍五入
less:
.round{
font-size:round(5.7px);
}
css:
.round {
font-size: 6px;
}
1.5 sqrt()函数:表示计算一个数的平方根,原样保持单位
less:
.sqrt{
width: sqrt(49px);
}
css:
.sqrt {
width: 7px;
}
1.6 abs()函数:表示计算数字的绝对值,原样保持单位
less:
.abs{
height: abs(-888px);
}
css:
.abs {
height: 888px;
}
1.7 sin()函数:表示正弦函数(可忽略)
less:
.sin{
width:sin(1);
}
css:
.sin {
width: 0.84147098;
}
1.8 asin()函数:表示反正弦函数(可忽略)
less:
.asin{
height:asin(1);
}
css:
.asin {
height: 1.57079633rad;
}
1.9 cos()函数:表示余弦函数(可忽略)
less:
.cos{
width:cos(1);
}
css:
.cos {
width: 0.54030231;
}
1.10 acos()函数:表示反余弦函数(可忽略)
less:
.acos{
width:acos(1);
}
css:
.acos {
width: 0rad;
}
1.11 tan()函数:表示正切函数(可忽略)
less:
.tan{
width:tan(5);
}
css:
.tan {
width: -3.38051501;
}
1.12 atan()函数:表示反正切函数(可忽略)
less:
.atan{
width:atan(3);
}
css:
.atan {
width: 1.24904577rad;
}
1.13 pi()函数:表示返回π(pi)(可忽略)
less:
.pi{
height:pi();
}
css:
.pi {
height: 3.14159265;
}
1.14 pow()函数:表示乘方运算
less:
.pow{
width:pow(2,3)px;
}
css:
.pow {
width: 8 px;
}
1.15 mod()函数:表示取余运算
less:
.mod{
width: mod(9,5)px;
}
css:
.mod {
width: 4 px;
}
1.16 min()函数:表示最小值运算
less:
.min{
height:min(5,3,10)px;
}
css:
.min {
height: 3 px;
}
1.17 max()函数:表示最大值运算
less:
.max{
width:max(100,300,200)px;
}
css:
.max {
width: 300 px;
}
2.字符串函数
1.escape()表示将输入字符串的url特殊字符进行编码处理
2.e()表示css转义 用~“值”符号代替
3.%()表示 函数%(string,arguments…) 格式化一个字符串
4.replace()表示用另一个字符串替换文本
3.长度函数
1.length()函数表示返回集合中值的个数
2.extract()函数表示返回集合中指定索引的值
4.类型函数
1.isnumber()表示如果值是一个数字,返回真(true),否则返回假(false)
2.isstring()表示如果值是一个字符串,返回真(true),否则返回假(false)
3.iscolor()表示如果值是一个颜色,返回真(true),否则返回假(false)
4.iskeyword()表示如果值是一个关键字,返回真(true),否则返回假(false)
5.isurl()表示如果值是一个url地址,返回真(true),否则返回假(false)
6.ispixel()表示如果值是带px单位的数字,返回真(true),否则返回假(false)
7.issem()表示如果值是带em单位的数字,返回真(true),否则返回假(false)
8.ispercentage()表示如果值是一个带%单位的数字,返回真(true),否则返回假(false)
9.isunit()表示如果值是带指定单位的数字,返回真(true),否则返回假(false)
5.颜色值定义函数
1.rgb()表示通过十进制红、绿、蓝(RGB)创建不透明的颜色对象
2.rgba()表示通过十进制红、绿、蓝(RGB),以及alpha四种值(RGBA)创建带alpha透明的颜色对象
3.argb()表示创建格式为#AARRGGBB的十六进制颜色 ,用于IE滤镜,.net和安卓开发
4.hls()表示通过色相,饱和度,亮度(HLS)三种值创建不透明的颜色对象
5.hsla()表示通过色相,饱和度,亮度,以及alpha四种值(HLSA)创建带alpha透明的颜色对象
6.hsv()表示通过色相,饱和度,色调(HSV)创建不透明的颜色对象
7.hsva()表示通过色相,饱和度,亮度,以及alpha四种值(HSVA)创建带alpha透明的颜色对象
6.颜色值通道提取函数
1.hue()从HSL色彩空间中提取色相值
2.saturation()从HSL色彩空间中提取饱和度
3.lightness()从HSL色彩空间中提取亮度值
4.hsvhue()从HSV色彩空间中提取色相值
5.hsvsaturation()从HSV色彩空间中提取饱和度值
6.hsvvalue()从HSV色彩空间中提取色调值
7.red()提取颜色对象的红色值
8.green()提取颜色对象的绿色值
9.blue()提取颜色对象的蓝色值
10.alpha()提取颜色对象的透明度
11.luma()计算颜色对象luma的值(亮度的百分比表示法)
12.luminance()计算没有伽玛校正的亮度值
7.颜色值运算函数
1.saturate()表示增加一定数值的颜色饱和度
2.desaturate()表示降低一定数值的颜色饱和度
3.lighten()表示增加一定数值的颜色亮度
4.darken()表示降低一定数值的颜色亮度
5.fadein()表示降低颜色的透明度(或增加不透明度),令其更不透明
6.fadeout()表示增加颜色的透明度(或降低不透明度),令其更透明
7.fade()表示给颜色(包括不透明的颜色)设定一定数值的透明度
8.spin()表示任意方向旋转颜色的色相角度
9.mix()表示根据比例混合两种颜色,包括计算不透明度
10.greyscale()表示完全移除颜色的饱和度,与desaturate(@color,100%)函数效果相同
11.contrast()表示旋转两种颜色相比较,得出哪种颜色的对比度更大就倾向于对比度最大的颜色
8.颜色混合函数
1.multiply()表示分别将两种颜色的红绿蓝三种值做乘法运算,然后再除以255,输出结果更深的颜色(对应ps中的“变暗/正片叠底”)
2.screen()表示与multiply函数效果相反,输出结果更亮的颜色。(对应ps中“变亮/滤色”)
3.overlay()表示结合multiply与screen两个函数的效果,令浅的颜色更浅,深的颜色更深(对应ps中的叠加),输出结果由第一个颜色参数决定
4.softlight()表示与overlay函数效果相似,只是当纯黑色或纯白色作为参数时输出结果不会是纯黑色或纯白色(对应ps中的“柔光”)
5.hardlight()表示与overlay函数效果相似,不过由第二个颜色参数决定输出颜色的亮度或黑度,而不是第一个颜色参数决定(对应ps中“强光/亮光/线性光/点光”)
6.difference()表示从第一个颜色值中减去第二个(分别计算RGB三种颜色值),输出结果更深的颜色(对应ps中“差值/排除”)
7.exclusion()表示效果与difference函数效果相似,只是输出结果差别更小(对应ps中“差值/排除”)
8.average()表示分别对RGB三个颜色值取平均值,然后输出结果。
9.negation()表示与difference函数效果相反,输出结果是更亮的颜色。(效果相反不代表做加法运算