一、初见LESS
1. 什么是LESS
Less是Css的预编译语言，兼容Css语法，在其基础上扩展，可以使用变量，混合，继承，函数等语法，更贴近编程语言，在开发时使用，生产时将Less转换为Css文件。
2. LESS的官方网站
3. LESS与CSS的写法
CSS的写法
.content{
display: flex;
}
.content .item{
width: 100rem;
height: 100rem;
background: pink;
color: #fff;
}
LESS的写法
.content{
display: flex;
.item{
width: 100rem;
height: 100rem;
background: pink;
color: #fff;
}
}
4. 搭建开发环境
因为less其实无法在浏览器上运行的，它要编译成CSS才行。主要以下方法
下载less.js文件，利用该文件编译less，但是太建议使用
借助考拉这软件编译
借助vs code，在该编辑器安装编译less的插件，less文件保存后就会自动生成对应的CSS
借助node环境
因为前面两种没用过，所以主要介绍下后两种
在vs code安装less的编译插件
安装插件Easy LESS，如下图所示
有了这个后，可以在编辑器新建less文件，后缀名是.less,保存后会自动编译成css
使用node
要使用node就要先安装node，这个就自己去官网下载吧，傻瓜式安装，无需多言
如果不知道自己的电脑有没有安装node的话，打开终端，也就是window的cmd，至于苹果电脑的，很抱歉，我不知道，本人用的是window。
查看node版本，最好是版本8以上的，本人是v12.13.0
node -v
有了node后，就有了npm这个包管理工具，现在的Node版本会自带npm的
接下来就是安装less了，我这里用全局安装，这样在哪里都可以用了
npm install less -g
查看版本
lessc -v
在自己电脑上新建一个文件夹，再新建一个less文件
代码如下
@bg: #000;
.div{
height: 2rem;
width: 2rem;
background: @bg
}
使用命令行
cd 你自己的less文件所在的地址
如cd C:\Users\asus\Desktop\less教程
命令行
lessc style.less
这个会在终端输出编译后的css代码
命令行
lessc style.less style.css
会输出编译好的CSS文件
如果要卸载全局依赖
npm uninstall less -g
二、LESS语法
1. 注释
less的注释有两种
//这种注释，在编译后不会出现在CSS文件上
/*这种注释，编译后会出现在CSS文件上*/
2. 变量
2.1 普通的变量
变量的定义
@变量名: 值;
例如
@bg: #000;
@length: 200rem;
div{
width: @length;
height: @length;
background-color: @bg;
}
变量的值如果需要单位，要把单位一起写上
如果重复定义变量，那么后面的变量会覆盖前面的变量
@color: #333;
@color: #fff;
p{
color: @color;
}
CSS
p {
color: #fff;
}
2.2 变量的合法标识符
变量名是不能随便定义的，有些特殊的字符的变量名会导致编译报错，像#, .等，经过试试，可以使用数字，英文大小写，下划线，中划线，且开头可以是数字，其他特殊符号就不要去整了，这些也够用了，编程语言的标识符都没这么多。
2.3 作为选择器和属性名
@div: div;// 选择器名
@width: width; // 属性名
@p: p1;
//使用的时候要加上花括号{}
.@{div}{
@{width}: 200rem;
height: 200rem;
background: #ffffff;
}
#@{p}{
color: #fff;
}
2.4 作为URL
@imgUrl: "./img.png"; // 图片地址
div{
height: 2rem;
width: 2rem;
background: url("@{imgUrl}");
}
2.5 延迟加载
变量不一定要先声明后使用，可以先使用再声明，这样也是不会报错的，不过没有特殊情况，不建议这样写，影响可读性。
div{
width: @length;
height: @length;
background-color: @bg;
}
@bg: #000;
@length: 200rem;
2.6 变量的作用域
存在多个相同变量时，会使用最后定义的变量，less会在当前作用域向上搜索。
花括号{}就是一个作用域
LESS
@color: #fff;
div{
color: @color; // #888;
@color: #777;
border-color: @color; // #888;
p{
@color: #000; // 如果这里没有定义，就会去外部的作用域寻找该变量
color: @color; // #000;
}
background: @color; // #888;
@color: #888; // 最后定义的，所以会使用这个变量
}
CSS
div {
color: #888;
border-color: #888;
background: #888;
}
div p {
color: #000;
}
三、混合
混合就是将一系列属性从一个规则集引入到另一个规则集中。
通俗来讲就是将相同的CSS片段抽取到一个类中，其他类可以引用这个类。
3.1 普通混合
h1 {
font-size: 36px;
font-family: "楷体";
border: 1px solid #ffffff;
color: pink;
}
h2 {
font-size: 32px;
font-family: "楷体";
border: 1px solid #ffffff;
color: pink;
}
上面有相同片段的代码，可以提取出来放在一个类里
.mixins{
font-family: "楷体";
border: 1px solid #ffffff;
color: pink;
}
h1{
font-size: 36px;
}
h2{
font-size: 32px;
}
之后在需要这个类(混合)时，引入这个混合
.mixins{
font-family: "楷体";
border: 1px solid #ffffff;
color: pink;
}
h1{
font-size: 36px;
.mixins;
}
h2{
font-size: 32px;
.mixins;
}
这样编译出来的CSS是这样的
.mixins {
font-family: "楷体";
border: 1px solid #ffffff;
color: pink;
}
h1 {
font-size: 36px;
font-family: "楷体";
border: 1px solid #ffffff;
color: pink;
}
h2 {
font-size: 32px;
font-family: "楷体";
border: 1px solid #ffffff;
color: pink;
}
这个类.mixins被输出了，这样就显得有点多余了，所以接下来是，让它不输出的混合
3.2 不能输出的混合
要让混合不输出，只要在后面加上括号()就行了
.mixins(){
font-family: "楷体";
border: 1px solid #ffffff;
color: pink;
}
h1{
font-size: 36px;
.mixins();
}
h2{
font-size: 32px;
.mixins();
}
输出CSS
h1 {
font-size: 36px;
font-family: "楷体";
border: 1px solid #ffffff;
color: pink;
}
h2 {
font-size: 32px;
font-family: "楷体";
border: 1px solid #ffffff;
color: pink;
}
3.3 &符号的运用
&这个符号代表着父级的意思
h1{
font-size: 36px;
&:hover{
color: pink;
}
}
这时&就代表着父级h1
编译后的CSS
h1 {
font-size: 36px;
}
h1:hover {
color: pink;
}
混合中的&
.mixins(){
&:hover{
color: pink;
}
}
h1{
font-size: 36px;
.mixins();
}
h2{
font-size: 32px;
.mixins();
}
这段代码等价于
h1{
font-size: 36px;
&:hover{
color: pink;
}
}
h2{
font-size: 32px;
&:hover{
color: pink;
}
}
所以编译后的CSS
h1 {
font-size: 36px;
}
h1:hover {
color: pink;
}
h2 {
font-size: 32px;
}
h2:hover {
color: pink;
}
3.4 带参数的混合
.mixins(@color){
&:hover{
color: @color;
}
}
h1{
font-size: 36px;
.mixins(red); //传入颜色
}
h2{
font-size: 32px;
.mixins(pink); //传入颜色
}
3.5 带参数并且有默认值
.mixins(@color:pink){
&:hover{
color: @color;
}
}
h1{
font-size: 36px;
.mixins(); // 不传参数时，默认为上面设置的pink
}
h2{
font-size: 32px;
.mixins(green);
}
3.6 带多个参数的混合
.mixins(@w, @h, @bgColor:#000){
width: @w;
height: @h;
background: @bgColor;
}
.div1{
.mixins(200px, 200px, pink); //参数要一一对应
}
.div2{
.mixins(200px, 200px); // 最后一个参数因为有默认值，所以可以省略
}
如果没有一一对应，虽然不会报错，但是CSS会无效
.mixins(@w, @h, @bgColor:#000){
width: @w;
height: @h;
background: @bgColor;
}
.div1{
.mixins(200px, pink);// 这样没有一一对应，第二个参数的值不应该是颜色值
}
编译出的CSS
.div1 {
width: 200px;
height: pink; /*这里很明显不对*/
background: #000;
}
那么问题来了，如果混合的参数排列是这样的
.mixins(@w, @bgColor:#000, @h){
width: @w;
height: @h;
background: @bgColor;
}
如果这样的话，下面的写法就是个错误的
.mixins(@w, @bgColor:#000, @h){
width: @w;
height: @h;
background: @bgColor;
}
//下面的代码会报错
.div1{
.mixins(200px, 200px);
}
改成这样
.mixins(@w, @bgColor:#000, @h){
width: @w;
height: @h;
background: @bgColor;
}
//指定参数
.div1{
.mixins(@w:200px, @h:200px);
}
如下混合应该如何传参
如果margin要有四个值时，要如何传参
.mixins(@margin, @bgColor ){
width: 200px;
height: 200px;
margin: @margin;
background: @bgColor;
}
答案如下
.mixins(@margin, @bgColor ){
width: 200px;
height: 200px;
margin: @margin;
background: @bgColor;
}
//这里被分号分割了，这时可以看成两个参数，而2px,3px,4px,5px这一串将会被作为第一个参数
.div{
.mixins(2px,3px,4px,5px;pink);
}
编译出的CSS
.div {
width: 200px;
height: 200px;
margin: 2px, 3px, 4px, 5px;
background: pink;
}
如果传参时的括号里面只有逗号，那么会一次传给各个参数
如果传参时既有逗号和分号，那会把分号之前的看成一个整体
.mixins(2px,3px,4px,5px;)这样是一个参数
3.7 定义多个相同名称和相同参数个数的混合
先来看相同名字的混合，但参数个数不同
.mixins(@color){
color: @color;
}
.mixins(@color, @w){
color: @color;
width: @w;
}
.div{
.mixins(pink);
}
.div1{
.mixins(pink, 20px);
}
编译后的CSS
.div {
color: pink;
}
.div1 {
color: pink;
width: 20px;
}
从上面看来，混合会自己匹配，只有一个参数的会去找一个参数混合，两个就会去找有连个参数的混合
如果混合名相同，参数个数也相同呢？
.mixins(@color, @w){
color: @color;
width: @w;
}
.mixins(@bg, @h){
background: @bg;
height: @h
}
.div1{
.mixins(pink, 20px);
}
编译后的CSS
.div1 {
color: pink;
width: 20px;
background: pink;
height: 20px;
}
这样就很明显了，两个混合都会被引用
再来看另一种情况
相同混合名且参数名也相同
.mixins(@color){
color: @color;
}
.mixins(@color, @w:200px){
background: @color;
width: @w;
}
.div1{
.mixins(pink);
}
编译输出
.div1 {
color: pink;
background: pink;
width: 200px;
}
其实这种情况和第二种其实是一样的，只不过因为有默认值，所以两个混合都被引用了。
3.8 @arguments变量
这个可以@arguments可以代表全部参数
.mixins(@b, @c){
border: 1px @arguments;
}
.div1{
.mixins(solid, pink);
}
编译后的CSS
.div1 {
border: 1px solid pink;
}
3.9 匹配模式
自己定义一个字符串
比如
//t-l 这个是自定义的
.mixins(t-l,@w:5px){
border-top-left-radius: @w;
}
.mixins(b-l,@w:5px){
border-bottom-left-radius: @w;
}
.div1{
.mixins(t-l); //这个将会匹配，这时会引用第一个
}
编译后的CSS
.div1 {
border-top-left-radius: 5px;
}
再举个例子
.mixins(r){
float: right;
}
.mixins(l){
float: left;
}
.div1{
.mixins(l);
}
编译后的CSS
.div1 {
float: left;
}
3.10 得到混合中变量的返回值
.add(@w, @h){
width: @w;
height: @h;
@margin: @w + @h;
}
div{
.add(100px, 200px);
margin: @margin; // 拿到上面混合定义的变量值
}
也可以有多个返回值
.add(@w, @h){
width: @w;
height: @h;
@margin: @w + @h;
@padding: @w+ @h + 100px;
}
div{
.add(100px, 200px);
margin: @margin;
padding: @padding;
}
四、嵌套规则
像HTML一样的嵌套，让层级显得明显
4.1 普通的嵌套
举个栗子
HTML
LESS
.div{
width: 200px;
.item{
height: 400px;
p{
line-height: 2rem;
}
}
.content{
background: "#000";
}
}
编译后的CSS
.div {
width: 200px;
}
.div .item {
height: 400px;
}
.div .item p {
line-height: 2rem;
}
.div .content {
background: "#000";
}
4.2 用&改变嵌套的顺序
.a{
.b{
.c{
color: red;
}
}
}
编译后为
.a .b .c {
color: red;
}
如果加上&
.a{
.b{
.c &{
color: red;
}
}
}
编译后为
.c .a .b {
color: red;
}
4.3 所有组合
利用多个&符号
p, a, ul ,li{
& &{
color: #fff;
}
}
编译后
p p,
p a,
p ul,
p li,
a p,
a a,
a ul,
a li,
ul p,
ul a,
ul ul,
ul li,
li p,
li a,
li ul,
li li {
color: #fff;
}
五、运算
less的运算主要是数值型运算，颜色值运算，单位至少要存在一个，运算符要与值分开，涉及优先级时以括号()进行优先级运算。
5.1 数值运算
举个例子
div{
width: 10px + 20;
height: 10rem + 2;
}
.div{
width: 10px + 5rem; // 有连个不同单位时会，使用第一个的单位 15px
height: 10px + 2 * 4;
line-height: (2px + 5px) * 4;
}
编译后
div {
width: 30px;
height: 12rem;
}
.div {
width: 15px;
height: 18px;
line-height: 28px;
}
5.2 颜色值运算
LESS在运算时，会先转换为rgb模式，计算后再返回16进制的颜色值，因为rgb模式的值最大为255，所以超过这个值时，将默认使用最大数255。
div{
color: #000000 + 2;
background: red + green;
}
编译后
div {
color: #020202;
background: #ff8000;
}
六、命名空间
将一些需要的混合组合在一起，可以通过多层id或class来实现
#div(){
height: 4px;
.a(){
color: red;
.b(){
width: 4px;
}
}
}
#p(){
height: 4px;
.a(){
color: green;
}
.b(){
background: red;
}
}
div{
#div > .a //只引用 #div 中的a
// #div()>.a 这会引起报错
}
p{
#p(); // 只引用id的样式
}
ul{
#p .a; //也可以省略 > 用空格代替
}
编译后
div {
color: red;
}
p {
height: 4px;
}
ul {
color: green;
}
七、@import和!important
7.1 引入
新建两个less文件，一个main.less，另一个style.less
可以在less文件中，引入另一个less文件，这样就可以使用其文件中的变量以及混合
main.less
@color: #000;
.add(){
width: 4rem;
height: 4rem;
}
style.less
@import './main.less'; // 引入
.a{
.add();
background: @color;
}
7.2 !important
在调用混合时使用该关键字，可以让混合中的属性都继承该关键字
.min(){
width: 2px;
height: 2px;
}
.a{
.min();
}
.b{
.min() !important;
}
编译后
.a {
width: 2px;
height: 2px;
}
.b {
width: 2px !important;
height: 2px !important;
}
八、条件表达式
类似编程语言的if，在less中用的是when
//lightness 计算亮度的函数
.mixin(@a) when(lightness(@a) >= 50%){
background: black;
}
.mixin(@a) when(lightness(@a) < 50%){
background: white;
}
.mixin(@a){
color: @a;
}
//引用混合
.a{
.mixin(#ddd); // 亮度大于 50% 所以 是 black
}
.b{
.mixin(#333); // 亮度小于 50% 所以 是 white
}
编译后
.a {
background: black;
color: #ddd;
}
.b {
background: white;
color: #333;
}
九、循环
在LESS中混合可以调用自身，
关键字loop和when
.loop(@count) when(@count > 0){
.loop(@count - 1); // 调用自身
width: 10px * @count;
}
div{
.loop(5);
}
编译后
div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
}
但是这样的代码没什么意义，所以来看另一个例子
.loop(@count) when(@count > 0){
// 当变量作为选择器时，要加上花括号
h@{count}{
font-size: 10 * @count;
}
.loop(@count - 1); // 调用自身
}
.loop(6);
编译后
h6 {
font-size: 60;
}
h5 {
font-size: 50;
}
h4 {
font-size: 40;
}
h3 {
font-size: 30;
}
h2 {
font-size: 20;
}
h1 {
font-size: 10;
}
十、继承
一个类继承另一个类的样式，其实就是将两个类组合在一起，用逗号隔开
.center{
display: flex;
justify-content: center;
align-items: center;
}
.div:extend(.center){
width: 400px;
}
.p:extend(.center){
}
编译后
.center,
.div,
.p {
display: flex;
justify-content: center;
align-items: center;
}
.div {
width: 400px;
}
360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
