less的一些学习小结
一、如何引入less
1、在页面中引入less.js
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script> <link rel="stylesheet/less" href="style.less"> <script src="less.min.js"></script> 复制代码
2、在命令行 使用npm安装
npm install -g less $ lessc styles.less > styles.css 复制代码
二、变量
1、值变量：以 @ 开头 定义变量，并且使用时 直接 键入 @名称。
/* Less */ // 以下定义了变量，在后面会被使用 @color: #999; @bgColor: skyblue; //不要添加引号 @width: 50%; #wrap { color: @color; // 引入上面自定义的变量 background: @bgColor; width: @width; } // 上述的写法实质上等一下面的写法 /* 生成后的 CSS */ #wrap { color: #999; background: skyblue; width: 50%; } 复制代码2、选择器变量：让 选择器变成动态
/* Less */ @mySelector: #wrap; @Wrap: wrap; @{mySelector}{ //变量名 必须使用大括号包裹 color: #999; width: 50%; } .@{Wrap}{ color:#ccc; } /* 生成的 CSS */ #wrap{ color: #999; width: 50%; } .wrap{ color:#ccc; } 复制代码3、属性变量
/* Less */ @borderStyle: border-style; @Soild:solid; #wrap{ @{borderStyle}: @Soild; //变量名 必须使用大括号包裹 } /* 生成的 CSS */ #wrap{ border-style:solid; } 复制代码4、url变量
/* Less */ @images: "../img";//需要加引号 body { background: url("@{images}/dog.png");//变量名 必须使用大括号包裹 } /* 生成的 CSS */ body { background: url("../img/dog.png"); } 复制代码5、声明变量
/* Less */ @background: {background:red;}; #main{ @background(); } /* 生成的 CSS */ #main{ background:red; } 复制代码6、变量运算【灰常强大】
/* Less */ @width:300px; @color:#222; #wrap{ width:@width-20; height:@width-20*5; margin:(@width-20)*5; color:@color*2; background-color:@color + #111; } /* 生成的 CSS */ #wrap{ width:280px; height:200px; margin:1400px; color:#444; background-color:#333; } 复制代码7、变量作用域（就近原则）
/* Less */ @var: @a; @a: 100%; #wrap { width: @var; @a: 9%; } /* 生成的 CSS */ #wrap { width: 9%; } 复制代码8、用变量去定义变量
/* Less */ @fnord: "I am fnord."; @var: "fnord"; #wrap::after{ content: @@var; //将@var替换为其值 content:@fnord; } /* 生成的 CSS */ #wrap::after{ content: "I am fnord."; } 复制代码二、嵌套
1、& 的妙用：代表的上一层选择器的名字
/* Less */ #header{ &:after{ // 这里的&代表的就是#header content:"Less is more!"; } .title{ font-weight:bold; } &_content{//理解方式：直接把 & 替换成 #header margin:20px; } } /* 生成的 CSS */ #header::after{ content:"Less is more!"; } #header .title{ //嵌套了 font-weight:bold; } #header_content{//没有嵌套！ margin:20px; } 复制代码2、媒体查询以往我们都是把样式和媒体查询的央视单独写开的，现在只需要如下编写：
/* Less */ #main{ //something... @media screen{ @media (max-width:768px){ width:100px; } } @media tv { width:2000px; } } /* 生成的 CSS */ @media screen and (maxwidth:768px){ #main{ width:100px; } } @media tv{ #main{ width:2000px; } } 复制代码三、混合方法
1、无参数方法
/* Less */ .card { // 等价于 .card() background: #f6f6f6; box-shadow: 0 1px 2px rgba(151, 151, 151, .58); } #wrap{ .card();//等价于.card(); } /* 生成的 CSS */ #wrap{ background: #f6f6f6; box-shadow: 0 1px 2px rgba(151, 151, 151, .58); } 复制代码2、默认参数方法
/* Less */ .border(@a:10px,@b:50px,@c:30px,@color:#000){ //传的参数中必须带着单位。 border:solid 1px @color; box-shadow: @arguments;//指代的是全部参数 } #main{ .border(0px,5px,30px,red);//必须带着单位 } #wrap{ .border(0px); } #content{ .border;//等价于 .border() } /* 生成的 CSS */ #main{ border:solid 1px red; box-shadow:0px,5px,30px,red; } #wrap{ border:solid 1px #000; box-shadow: 0px 50px 30px #000; } #content{ border:solid 1px #000; box-shadow: 10px 50px 30px #000; } 复制代码3、方法的匹配模式
/* Less */ .triangle(top,@width:20px,@color:#000){ border-color:transparent transparent @color transparent ; } .triangle(right,@width:20px,@color:#000){ border-color:transparent @color transparent transparent ; } .triangle(bottom,@width:20px,@color:#000){ border-color:@color transparent transparent transparent ; } .triangle(left,@width:20px,@color:#000){ border-color:transparent transparent transparent @color; } .triangle(@_,@width:20px,@color:#000){ border-style: solid; border-width: @width; } #main{ .triangle(left, 50px, #999) } /* 生成的 CSS */ #main{ border-color:transparent transparent transparent #999; border-style: solid; border-width: 50px; } 复制代码4、方法的命名空间
/* Less */ #card(){ background: #723232; .d(@w:300px){ width: @w; #a(@h:300px){ height: @h;//可以使用上一层传进来的方法 } } } #wrap{ #card > .d > #a(100px); // 父元素不能加 括号 } #main{ #card .d(); } #con{ //不得单独使用命名空间的方法 //.d() 如果前面没有引入命名空间 #card ，将会报错 #card; // 等价于 #card(); .d(20px); //必须先引入 #card } /* 生成的 CSS */ #wrap{ height:100px; } #main{ width:300px; } #con{ width:20px; } 复制代码5、方法的条件筛选:比较运算有： > >= = =< <
/* Less */ #card{ // and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行 .border(@width,@color,@style) when (@width>100px) and(@color=#999){ border:@style @color @width; } // not 运算符，相当于 非运算 !，条件为 不符合才会执行 .background(@color) when not (@color>=#222){ background:@color; } // , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行 .font(@size:20px) when (@size>50px) , (@size<100px){ font-size: @size; } } #main{ #card>.border(200px,#999,solid); #card .background(#111); #card > .font(40px); } /* 生成后的 CSS */ #main{ border:solid #999 200px; background:#111; font-size:40px; } 复制代码6、数量不定的参数: ... 犹如ES6中扩展运算符
/* Less */ .boxShadow(...){ box-shadow: @arguments; } .textShadow(@a,...){ text-shadow: @arguments; } #main{ .boxShadow(1px,4px,30px,red); .textShadow(1px,4px,30px,red); } /* 生成后的 CSS */ #main{ box-shadow: 1px 4px 30px red; text-shadow: 1px 4px 30px red; } 复制代码7、方法使用!important
/* Less */ .border{ border: solid 1px red; margin: 50px; } #main{ .border() !important; } /* 生成后的 CSS */ #main { border: solid 1px red !important; margin: 50px !important; } 复制代码8、循环方法
/* Less */ .generate-columns(4); .generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); } /* 生成后的 CSS */ .column-1 { width: 25%; } .column-2 { width: 50%; } .column-3 { width: 75%; } .column-4 { width: 100%; } 复制代码9、属性拼接方法： +_ 代表的是 空格；+ 代表的是 逗号。
逗号
/* Less */ .boxShadow() { box-shadow+: inset 0 0 10px #555; } .main { .boxShadow(); box-shadow+: 0 0 20px black; } /* 生成后的 CSS */ .main { box-shadow: inset 0 0 10px #555, 0 0 20px black; } 复制代码空格
/* Less */ .Animation() { transform+_: scale(2); } .main { .Animation(); transform+_: rotate(15deg); } /* 生成的 CSS */ .main { transform: scale(2) rotate(15deg); } 复制代码四、继承
1、extend 关键字的使用
/* Less */ .animation{ transition: all .3s ease-out; .hide{ transform:scale(0); } } #main{ &:extend(.animation); } #con{ &:extend(.animation .hide); } /* 生成后的 CSS */ .animation,#main{ transition: all .3s ease-out; } .animation .hide , #con{ transform:scale(0); } 复制代码2、all全局搜索替换
/* Less */ #main{ width: 200px; } #main { &:after { content:"Less is good!"; } } #wrap:extend(#main all) {} /* 生成的 CSS */ #main,#wrap{ width: 200px; } #main:after, #wrap:after { content: "Less is good!"; } 复制代码五、导入
导入 less 文件 可省略后缀
import "main"; //等价于 import "main.less"; 复制代码
@import的位置可随意放置
#main{ font-size:15px; } @import "style"; 复制代码3、reference
使用@import (reference)导入外部文件，但不会添加 把导入的文件 编译到最终输出中，只引用。
/* Less */ @import (reference) "bootstrap.less"; #wrap:extend(.navbar all){} 复制代码4、once
@import语句的默认行为。这表明相同的文件只会被导入一次，而随后的导入文件的重复代码都不会解析。
@import (once) "foo.less"; @import (once) "foo.less"; // this statement will be ignored 复制代码
5、multiple
使用@import (multiple)允许导入多个同名文件。
/* Less */ // file: foo.less .a { color: green; } // file: main.less @import (multiple) "foo.less"; @import (multiple) "foo.less"; /* 生成后的 CSS */ .a { color: green; } .a { color: green; } 复制代码六、函数
1、判断类型
isnumber()：判断给定的值 是否 是一个数字。
isnumber(blue); // false isnumber("string"); // false isnumber(1234); // true isnumber(56px); // true isnumber(7.8%); // true isnumber(keyword); // false 复制代码iscolor()：判断给定的值 是否 是一个颜色。
surl()：判断给定的值 是否 是一个 url 。
2、颜色操作
saturate(): 增加一定数值的颜色饱和度。
lighten(): 增加一定数值的颜色亮度。
darken(): 降低一定数值的颜色亮度。
fade(): 给颜色设定一定数值的透明度。
mix(): 根据比例混合两种颜色。
3、数学函数
ceil()：向上取整。
floor()：向下取整。
percentage()：将浮点数转换为百分比字符串。
round()：四舍五入。
sqrt()：计算一个数的平方根。
abs()：计算数字的绝对值，原样保持单位。
pow()：计算一个数的乘方。
七、其他
1、注释
/* */ CSS原生注释，会被编译在 CSS 文件中。
/ / Less提供的一种注释，不会被编译在 CSS 文件中。
2、避免编译：~' 值 '
/* Less */ #main{ width:~'calc(300px-30px)'; } /* 生成后的 CSS */ #main{ width:calc(300px-30px); } 复制代码3、变量拼串： ~"字符@{变量}字符";
.judge(@i) when(@i=1){ @size:15px; } .judge(@i) when(@i>1){ @size:16px; } .loopAnimation(@i) when (@i<16) { .circle:nth-child(@{i}){ .judeg(@i); border-radius:@size @size 0 0; animation: ~"circle-@{i}" @duration infinite @ease; transition-delay:~"@{i}ms"; } @keyframes ~"circle-@{i}" { // do something... } .loopAnimation(@i + 1); } 复制代码4、嵌套使用JS
/* Less */ @content:`"aaa".toUpperCase()`; #randomColor{ @randomColor: ~"rgb(`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`)"; } #wrap{ width: ~"`Math.round(Math.random() * 100)`px"; &:after{ content:@content; } height: ~"`window.innerHeight`px"; alert:~"`alert(1)`"; #randomColor(); background-color: @randomColor; } /* 生成后的 CSS */ // 弹出 1 #wrap{ width: 随机值（0~100）px; height: 743px;//由电脑而异 background: 随机颜色; } #wrap::after{ content:"AAA"; } 复制代码5、覆盖原有组件库组件样式： /deep/"类名（选择器）";
/deep/.ant-skeleton-content { background-color: #fff; padding: 12px 24px; } 复制代码看人家的文章，搬过来自己做笔记使用，如有侵权，请联系我，我会删掉的，谢谢。原作者：SimonMa
作者：文伊
链接：https://juejin.cn/post/7024005708144181255