LESS基础教程

一、初见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文件，后缀名是.less,保存后会自动编译成css

使用node

要使用node就要先安装node，这个就自己去官网下载吧，傻瓜式安装，无需多言

node官网：https://nodejs.org/

如果不知道自己的电脑有没有安装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 class="div">
    
</div>
<p id="p1">
    
</p>

@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

<div class="div">
   	<div class="item">
        <p>
            
        </p>
    </div>
    <div class="content">
        
    </div>
</div>

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;
}

posted @ 2020-02-22 14:59 司徒炼阅读(1798) 评论(0) 编辑收藏举报

刷新页面返回顶部

司徒炼

一入编程深似海，从此妹子是路人!

LESS基础教程

一、初见LESS

1. 什么是LESS

2. LESS的官方网站

3. LESS与CSS的写法

4. 搭建开发环境

二、LESS语法

1. 注释

2. 变量

2.1 普通的变量

2.2 变量的合法标识符

2.3 作为选择器和属性名

2.4 作为URL

2.5 延迟加载

2.6 变量的作用域

三、混合

3.1 普通混合

3.2 不能输出的混合

3.3 &符号的运用

3.4 带参数的混合

3.5 带参数并且有默认值

3.6 带多个参数的混合

3.7 定义多个相同名称和相同参数个数的混合

3.8 @arguments变量

3.9 匹配模式

3.10 得到混合中变量的返回值

四、嵌套规则

4.1 普通的嵌套

4.2 用&改变嵌套的顺序

4.3 所有组合

五、运算

5.1 数值运算

5.2 颜色值运算

六、命名空间

七、@import和!important

7.1 引入

7.2 !important

八、条件表达式

九、循环

十、继承

公告