less的使用
主流的
CSS
预处理器
- Less 官网：http://lesscss.org 中文 :https://less.bootcss.com/
- Sass 官网：http://sass-lang.com
- Stylus 官网：http://learnboost.github.com/stylus
一 less编译
1 CSS预处理语言
less不能够支持得到浏览器的支持，需要将其进行转换。
less sass:都是css预处理器-》语言，为开发者提供的一个CSS解决方案。
css:不支持函数 不支持变量。
浏览器不支持less,sass。需要对其进行编译（将less,sass--->css）
猫云：https://www.bootcdn.cn/
2 使用less.js
less.js
下载地址：https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js
2.1 编译less style
注意：
1、less.js是可以将less转化为css
2、less.js如果转换成style的话，需要增加type="text/less"属性
3、less.js必须要写到style的下边
<style type="text/less">
@w:200px;
@h:300px;
.container {
width: @w;
height:@h;
background:red;
margin:0 auto;
p {
color:green;
}
}
</style>
<script src="../lib/less.min.js"></script>
2.2 编译less 外部
注意：
页面中直接使用.less文件，需要将rel=stylesheet/less
<link rel="stylesheet/less" href="less/index.less">
<script src="../lib/less.min.js"></script>
2.3 通过命令编译之后的CSS
压缩外部文件
<link rel="stylesheet" href="less/output.css" target="_blank" rel="external nofollow" >
3 命令安装less
3.1 使用less命令
使用less命令：
1、安装node
2、打开cmd控制台
一、通过运行
1、打开运行（win+r）
2、在运行中输入 cmd 回车
二、通过目录
在目录中直接输入 cmd 回车。
3、验证node是否安装完成
在控制台输入 node -v
4、全局安装less
npm install less -g
5、使用lessc 命令进行编译less文件
lessc需要转换的less文件地址 输出less文件地址
3.2 编译命令
1、将当前的index.less 编译为 output.css:
lessc index.less output.css
2、将当前目录下的less文件夹中的index.less 编译到了当前文件夹中
lessc less/index.less output.css
3、指定编译以后的目录：
lessc less/index.less less/output.css
3.3 其他命令
1、cd..:进入到上一级目录
cd one: 进入到one文件夹
cd o 按下tab ： 选择以o开头目录，按回车进入目录
2、cd less:进入到less文件夹
3、c: 切换盘符
4、从c盘中跳转到D:\210225\lession01\code\less中：
C:\>cd D:\210225\lession01\code\less
C:\>d:
D:\210225\lession01\code\less>
5、dir: 显示当前的文件列表
6、cls:清屏
7、可以通过上下箭头切换命令（之前使用过的命令）
3.4 转换并压缩
1、安装
npm install less-plugin-clean-css -g
2、使用
lessc index.less output.css --clean-css
4 第三方编译软件koala
可以跨平台运行，操作很简单,只需要将你编译的文件拖进来即可
4 使用vscode自动编译less
当有需要时，可以在设置中搜索less关键字
setting.config.js:
{
"window.zoomLecel":1,
"less.compile": {
"compress": true,//是否删除多余空白字符
"sourceMap":true,//是否创建文件目录树，true的话会自动生成一个.css.map文件
"out":"../css/",//true,//是否输出css文件，false为不输出
"outExt":".css",//输出文件的后缀，默认为.css或.wxss
}
}
二 注释（重点）
1、// less提供的一种注释，不会被编译css中
2、 css原生注释，会在编译生成的css中出现
// 行注释，不会被编译的
@color: green;
/*
块注释，会被编译
*/
@width: 100px;
三 变量（重点）
1 值变量
使用 @ 符号来定义变量 ，在Less中开头是 @ 则是变量。
语法：@变量名：变量值
@width: 100px;
@height: @width + 100px;
2 作为普通属性值使用
单位设置与第一个设置的参数保持一致
@width: 100px;
@height: @width + 100em;
.demo{
width:@width; //100px
height:@height; //200px
}
3 选择器变量
选择器也可以使用变量，变量需要用@{}包裹
@selector:root;
.@{selector} {
width:100px;
height:200px;
background:#ccc
}
4 属性变量
属性名称使用变量，变量需要用@{}包括
@selector:root;
@abc:height;
.@{selector} {
width:100px;
@{abc}:200px;
background:#ccc
}
5 url变量
url需要加引号，若要将里面的值进行拼接，需要用到{}
@bg:'img/Logo.png';
@bgImg:'Logo.png';
.root {
background-image: url('less/img/Logo.png');
}
.one {
background-image: url(@bg);
}
.two {
background-image: url('img/@{bgImg}');
}
6 声明变量
用于引入公共代码块
- 结构: @name: { 属性: 值 ;};
- 使用:@name();
@wh: {
width:100px;
height:200px
}
.root {
@wh();
background-color: red;
7 lazy loading(作用域)
懒加载（按照需要加载） 预加载
lazy loading的含义在于变量的定义位置不必要在其使用位置之前，但其使用范围仍然满足内层优先原则，且同级定义的相同变量，后一个生效（即将会在前一个覆盖），自己给自己设置的优先级最高。
@w:@h;
@h:100px;
.root {
@w:300px;
width:@w;
height:@h;
@w:400px;
}
@w:200px;
8 避免翻译
使用~‘值’结构可以避免被翻译，不加翻译的时候会带上引号，会报错
@min-width-750:~'min-width:750px';
.root {
width: 300px;
height: 300px;
background-color: red;
}
@media (@min-width-750) {
.root {
background-color: green;
}
}
四 混合Mixins
混合就是将一系列属性从一个规则集引入到另一个规则集的方式，类似于 JavaScript 中的函数， 目的是提高代码的重用性。
1 普通混合
传递参数加（），如果没有参数，可以省略（）。
.one {
width: 100px;
height: 200px;
}
.root {
.one();// 如果你不需要传递参数，那么可以省略（）。
background:red
}
2 不带输出的混合
混合名（）的形式定义。增加（），不会编译为css场景，假如结构当中不使用这个形式，可不加。
// one 不会被输出
.one(){
width:100px;
height:200px;
}
.root{
.one();
background:red;
}
3 命名空间
可以在Mixins中指定多个属性作为子容器，方便拼接
.demo(){
.one {
color: red;
}
.two{
color: blue;
}
.three{
color:yellow;
}
}
.a {
.demo > .one; //把one下面的属性拿过来 使用>要加空格，不建议使用.
}
.b{
.demo .two;
}
.c{
.demo.three;
}
4 带参数的混合
不声明的时候结果一一对应，也可以直接定义，但是要自己改参数。
.demo(@b,@w,@h){
width:@w;
height:@h;
border:@b solid red;
}
.root{
// 传递参数需要一一对应
// .demo(4px,100px,200px);
// 可以直接定义。无须一一对应。
.demo(@w:200px,@b:4px,@h:400px);
}
5 有默认值的混合
.demo(@b:1px,@w,@h:500px) {
width:@w;
height:@h;
border:@b solid red;
}
.root{
.demo(2px,@w:200px,@h:800px);
}
6 带多个参数的集合
.border(@a:1px,@w:100px,@h:200px,@color:green){
width:@w;
height:@h;
border:solid @a @color;
}
#main{
.border(2px,@h:300px);
}
7 @arguments的用法
@arguments 犹如 JS 中的 arguments 指代的是 全部参数。
.demo(@b:1px,@s:solid,@color:red){
// border: @color @b @s ;
border: @arguments;
}
.root{
width:100px;
height: 100px;
.demo(4px);
}
8 条件判断
Less 没有 if else，它有 when用于做条件判断 less
// 与
.demo(@b:1px,@s:solid,@color:red) when (@b=4px) and (iscolor(@color)){
border: @arguments;
}
// 非
// .demo(@b:1px,@s:solid,@color:red) when not(@color=red){
// border: @arguments;
// }
// 或
// .demo(@b:1px,@s:solid,@color:red) when (@b=4px) , (@color=red){
// border: @arguments;
// }
.root{
width:100px;
height: 100px;
.demo(4px,dashed,1);
}
9 Mixins的重载
相同混合属性名,参数不同的
Mixins
称为
Mixins
的重载。
重载：定义函数，名字可以相同，但是参数的数量不一致。如果一致的话不符合规范。
.one(@w){
width:@w;
}
.one(@w,@bg){
width:@w;
height:10px;
background: @bg;
}
.one(@w,@h,@bg){
width:@w;
height:@h;
background: @bg;
}
.root{
.one(100px,200px,yellow);
}
五 嵌套
Less 提供了使用嵌套代替层叠或与层叠结合使用的能力
1 基本层级嵌套
.root{
width: 100px;
height: 200px;
border:1px solid yellow;
p{
color:red;
}
}
2 父选择&符
.root{
p{
background: red;
&:first-child{
color:gold;
}
}
//p:nth-child(1){
// color:green;
//}
3 @media 嵌套
.root {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
}
六 运算符
Less还支持+、-、*、/运算符。但对单位不一致的运算数进行运算要注意以下两点：
- 运算数与运算符间必须用空格分隔；
- 以第一个运算数的单位作为运算结果的单位
@w: 1px +2em;// 运算数与运算符间没有空格，没有输出
@w1: 2px - 1em;
@w2: 2px * 2em;
@w3: 4px * 2em;
.one{
width: @w;// 失败的
}
.two{
width: @w1;// 1px
}
.three{
width: @w2;// 4px
}
.four{
width: @w3;// 8px
}
七 函数
混合（
Mixins
）类似于 JavaScript 中的自定义函数， 而这里的函数类似于
JavaScrip
t 中的内置函数。
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。
可以参考 Less 中文网提供的函数手册： http://lesscss.cn/functions/#misc-functions
需要注意的是，一般我们很少会使用这些内置函数。
1 混合 (misc)
// 字符转颜色
color("#CCC")
//返回图像尺寸(示例尺寸100*50)
image-size("file.jpg"); // => 100px 50px
image-width("file.jpg"); // => 100px
image-height("file.jpg"); // => 50px
// 单位转换
convert(9s, "ms"); // => 9000ms
convert(14cm, mm); // => 140mm
convert(8, mm); // => 8
2 字符串
// 转义
filter: e("ms:alwaysHasItsOwnSyntax.For.Stuff()"); // 与~"value"类似
// 替换
replace("Hi Tom?", "Tom", "Jack"); // => "Hi Jack"
replace("Hi Tom?", "(Tom).$", "new $1."); // => "Hi new Tom"
3 判断类型
isnumber(56px); // => true 是否含数字
isstring("string"); // => true
iscolor(#ff0); // => true
iscolor(blue); // => true
iskeyword(keyword); // => true
isurl(url(...)); // => true
ispixel(56px); // => true
isem(7.8em); // => true
ispercentage(7.8%); // => true
isunit(4rem, rem); // => true 是否为指定单位
isruleset(@rules); // => true 是否为变量
4 颜色操作
rgb(90, 129, 32) // #5a8120
darken(hsl(90, 80%, 50%), 20%) // #4d8a0f 增加饱和度
hsl(90, 100%, 50%) // => #80ff00 色相(H)、饱和度(S)、明度(L)
hsla(90, 100%, 50%, 0.5) // => rgba(128, 255, 0, 0.5) 色相(H)、饱和度(S)、明度(L)、透明度(A)
hsv(90, 100%, 50%) // => #408000 色调（H），饱和度（S），明度（V）
hsv(90, 100%, 50%) // => rgba(64, 128, 0, 0.5) 色调（H），饱和度（S），明度（V）、透明度(A)
hue(hsl(90, 100%, 50%)) // => 90 提取色相
5 数学函数
ceil(2.1); // => 3 向上取整
floor(2.1); // => 2 向下取整
percentage(.3); // => 30% 转百分比
round(1.67, 1); // => 1.7 四舍五入，保留一位小数点
sqrt(25cm); // => 5cm 取平方根
abs(-5cm); // => 5cm 取绝对值
sin(1deg); // => 0.01745240643728351 正弦
asin(-0.8414709848078965); // => -1rad 反正弦
pi(); // => 3.141592653589793 圆周率π
max(3px, 42px, 1px, 16px); // => 42px
min(3px, 42px, 1px, 16px); // => 1px
八 映射（Maps）
映射需要加括号
.demo(){
width:100px;
height:200px;
.one{
width:600px;
height:500px;
}
}
.root{
// 需要加上括号。
@one:.demo.one();
width:.demo[width];
// height:.demo.one[height];
height:@one[height];
background:red;
}
九 继承
extend 是 Less 的一个伪类。它可继承 所匹配声明中的全部样式 。
与
mixins
的区别：不可以传参数
.demo{
width:100px;
height:200px;
.my{
background:red;
}
}
#one{
&:extend(.demo);
}
#two{
&:extend(.demo .my);
}
十 导入（重点）
你可以导入一个
.less
文件，此文件中的所有变量就可以全部使用了。
如果导入的文件是
.less
扩展名，则可以将扩展名省略掉。普通的css也支持import
@import "library.less";
@import "mixins"; // mixins.less
@import "typo.css";
![MaaS突破，Serverless化再升级，阿里云如何重塑云计算技术体系？[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)