学习笔记及其demo参考教程指路:
less是css的预处理器也称为超集,是基于JavaScript编写,能够通过程序语言预处理的方式提高css代码复用性,减少css代码的冗余程度。
less的安装与配置
"less.compile": {
"compress": false, // true => remove surplus whitespace
"sourceMap": false, // true => generate source maps (.css.map files)
"out": "${workspaceRoot}\\less-learning\\css\\" // false => DON'T output .css files (overridable per-file, see below)
}
less命名空间和访问器
(待补充)
变量插值
一般来说,变量的赋值可表示为:@变量:值。
其中,左侧的变量是广义的,可以为普通的变量,也可以为选择器等属性。
对于普通的变量,例子如下:
// 定义属性fontSize
@fontSize: 15px;
.content {
h1 {
color: red;
font-size: @fontSize+10;
}
上述例子还可以表示为:
// 定义属性fontSize
@var:@fontSize;
@fontSize: 15px;
.content {
h1 {
color: red;
font-size: @fontSize+10;
}
对于第二种情况,比如选择器的情况,例子如下:
@Selector: h2,h3;
@{Selector} {
background-color: yellowgreen;
}
在这个例子中,设置了选择器变量,设置为批量的标题标签的背景颜色。
以上两个例子充分展现了less的复用能力,第一个例子是定义了一个能够复用的属性,将该属性的值进行复用;第二个例子是定义了选择器的属性,将选择器的属性进行复用,能够适应多种元素公用批量属性的情况。
在普通变量中,URL类型、path类型的变量需要使用 "{}" 进行包裹,因此其赋值右侧不是具体的值。
此外,还找到了一个比较丰富的例子,如下:
.@{selector} {
width: 100px;
height: 100px;
@{property}: #000;
background: url("@{bgImg}/test.png");
&:after {
display: block;
content: @@var;
}
}
@selector: box;
@bgImg: "../img";
@property: color;
@name: "你好啊";
@var: "name";
less拓展
less拓展extend
形式为“:extend”,其本意为单继承其他样式的函数或对象。
教程中给出了例子,如下所示:
h2 {
&:extend(.style);
font-style: italic;
}
.style {
background: green;
}
上述例子中,&用来替代自身。上述中的&就表示h2标签。这段less还等价为:
h2:extend(.style){};
.style{backgroud:green;}
less的混入是相当灵活的,因为我们即可以传参决定样式属性的值,也可以通过匹配取出相应的样式,但是灵活的同时也带来了编译时更加繁琐,体积也更大,性能稍微消耗一点。
而less的继承它是不可以传参改变的,它就是写死的,所以这里可以放我们写的公共样式,我们继承的样式相当于拷贝了一份。因为样式是写好了固定了,所以编译起来快。
总结:less的混入 灵活性高 相对于继承性能消耗大一点,less的继承不可传参,继承固定的样式,编译起来快,性能高。
less拓展mixins
mixins初步使用
mixins也是样式拓展的方法,使用方法见下例,a为被复用的样式,myclass5包含复用样式a。注意的是,a包含括号的话,在编译时不会输出到css文件。
.a() {
background-color: aqua;
}
.myclass5 {
font-size: 15px;
.a
}
既然带括号()后,不会被编译至css文本,那么被复用样式可以任意命名,且属于“私有属性”。如下所示,将上述代码进行修改,将a改为其他命名,仍然运行成功。
.abc() {
background-color: aqua;
}
.myclass5 {
font-size: 105px;
.abc
}
带有判断条件(guard)的mixins:
.mixins() when (@color=blue) {
.mixin {
color: yellow;
}
}
.myclass6 {
.mixins .mixin();
}
这里的(.mixins)也可以写为(#mixins),这里是“#”不是id的指代,而是命名空间的确定,在本例中对实际效果影响较少。此外,guard判断条件中包含@color属性,该属性需要提前声明,用在这里表示的含义是:如果color属性为blue,才会引入mixin属性(变为黄色),否则还是原来的样式(黑色)。
mixins构造函数
mixins构造函数表示mixins可以包含多个形参,且形参可以有多个默认值。例子如下:
.mixinsattr(@var1, @var2: 15px) {
background-color: @var1;
font-size: @var2;
}
.myclass7 {
.mixinsattr(#333)
}
构造函数的其他特性:
@arguments写在body体内,表示选择全部参数。
“...”写在形参处,表示形参数量可选。
模式匹配器
模式匹配器是构建多个被复用样式,这几个样式是一样的,但是会有不同的参数值,根据参数取值,可以确定调用的是哪个样式,即模式匹配。例子如下:
.mixin(light; @color) {
color: lighten(@color, 15%);
}
.mixin(dark; @color) {
color: darken(@color, 15%);
}
@color-new: dark;
.line {
.mixin(@color-new; #FF0000);
}
嵌套Mixin
嵌套mixin就是字面意思。在调用时,需要先后选择两次mixin,如果只运行外层的话,无法设置样式。即,需要调用到直接样式的上一层,同样的例子还可以从mixin规则集的传递中见到。
例子如下:
// 练习嵌套mixin
.outMixin(@var) {
.intMixin() {
font-size: @var;
}
}
.myclass9 {
.outMixin(50pt);
.intMixin;
}
Mixin的返回值
在mixin中,只要定义一个变量即可;在其他地方调用mixin函数后,拿到该变量即可返回。
//练习mixin返回值
.font(@x1, @x2) {
//一定要打大括号
@fontsize: ((@x1+@x2)/2);
}
.myclass10 {
.font(10px, 50px);
font-size: @fontsize;
}
Mixin规则集的传递
将mixin规则集整体的样式函数赋值给所需要的地方去。该功能需要定义一个变量承载规则集。
不理解其与extent 的区别。
《补充示例代码》
@import导入
@import导入是指将其他less/css文件导入至less文件中,两者代码可以合并,从而进一步增加其复用性。
格式:@import (reference、inline、less、css、once、multiple、optional关键字) “文件名称”。注意,import与括号之间需要有空格。
关键字reference
reference关键字的意思是,导入外部less文件后,编译过程中不直接输出到css文件。但如果是采用extend或mixin的显性形式,则输出到css中,样式生效。
例子如下:
内部style.less文件:
@import (reference)"D:\0727\study\code\less-learning\less\style2-2.less";
.mytitle1 {
color: red;
.style2;
}
外部style2-2.less文件
.style2 {
font-size: 48px;
}
编译成功后的css文件如下:
.mytitle1 {
color: red;
font-size: 48px;
}
关键字inline
inline关键字的意思是,导入外部文件后,会将其编译至css文件中,但样式并不会生效。
关键字less、css
这两个关键字会将导入的文件转化为less、css后缀的格式导入。
Less Guard
Less Guard包含在mixin的声明当中,作为判断该mixin是否使用的条件。Guard条件分为几种类型:比较运算、逻辑运算、类型检查。分别介绍如下:
比较运算:
格式如下所示,需要在mixin定义时确定guard条件。
.mixin(@a)when(@a<10px) {
color: green;
}
.mixin(@a)when(@a>=10px) {
color: orange;
}
.mixin(@a){
font-size: @a;
}
.mytitle2 {
.mixin(5px);
}
上述例子的结果为 color: green; font-size: 5px; ,表明匹配了第一、三条mixin。
类型检查函数
基础的类型检查函数包括:iscolor、isnumber、isstring、iskeyword、isurl。
还包括单位检查函数:ispixel(像素)、ispercentage、isem(当前对象内文本字体的尺寸)、isunit(单个单位)。
Less循环
Less循环是结合递归函数以及guard条件进行判断,例子如下:
.loop(@n, @i: 1) when(@i =< (@n+1)) {
//注意i还有{}包裹
.class@{i} {
width: (@i/@n*100%);
}
.loop(@n, @i+1);
}
.loop(4);
得到的编译结果如下:
.class1 {
width: 25%;
}
.class2 {
width: 50%;
}
.class3 {
width: 75%;
}
.class4 {
width: 100%;
}
LESS合并
merge操作
merge有两种形式,逗号合并、空格合并,均为追加至最后。两种形式的合并都必须要属性名称完全一致,逗号合并是在需要合并的两个对象之间增加逗号“,”,空格合并是增加空格“ ”。
// 练习属性值追加合并
.add() {
box-shadow+: 5px 5px 5px grey;
}
.class {
.add;
// 逗号合并
box-shadow+: 5px 5px 5px grey;
// 空格合并
box-shadow+_: 5px 5px 5px grey;
}
结果如下:
.class {
box-shadow: 5px 5px 5px grey, 5px 5px 5px grey 5px 5px 5px grey;
}
less组合爆炸
less组合爆炸指的是采用“&”符号,实现同级的两个或多个标签的组合。形象描述如下所示:
HTML页面:多个p、div平行标签,相邻标签的组合分为p+p、p+div、div+p、p+i、i+div、div+div五种。
<p>这是第一段</p>
<p>这是第二段,紧跟第一段(即p+p)。这将被突出显示</p>
<div>此div与第二段(即p+div)相邻。这将被突出显示。</div>
<p>这是与div(即p+div)相邻的第三段。这将被突出显示</p>
<i> 这是斜体。由于CSS中没有(p+i),因此不会突出显示</i>
<div>这是第二个div.</div>
<div>这是与第二个div相邻的div(即div+div)。这将突出显示</div>
less编码:使用&+&,表示p+p、p+div、div+p、div+div这四种组合情况。
p,
div {
color: red;
font-family: Lucida Console;
&+& {
color: green;
background-color: yellow;
font-family: "Comic Sans MS";
}
}
编译后的css结果表明,与预期一致。
p,
div {
color: red;
font-family: Lucida Console;
}
p + p,
p + div,
div + p,
div + div {
color: green;
background-color: yellow;
font-family: "Comic Sans MS";
}
上述例子不仅学习了less中采用&进行元素组合的用法,同时还了解了css中“+”的用法。
LESS的一些函数
less中内置的函数可以直接使用。仅罗列常用的字符串函数、 列表函数、数学函数,其他函数是使用可以直接参考以下手册:
Less 安装_w3cschoolhttps://www.w3cschool.cn/less/less-qild1yv2.html
字符串函数
replace、%format(格式化字符串)、e(去掉字符串的引号)、escape。
列表函数
length、extract。
extract:返回集合里某个位置的值,用法:extract(@arr,2)表示返回arr中索引为2的值。
数学函数
ceil、round、max、min、mod、pow等。
其他资料链接
less的用法与函数_less 函数_ey..的博客-CSDN博客https://blog.csdn.net/weixin_47863547/article/details/115304925