Less的基本使用

目录

文章目录

前言

Less了解

Less的基本使用

Less文件

Less变量

Less Mixin混入

Less运算符

Less嵌套

Less编译

总结

---

---

前言

本文主要介绍less的基本使用

---

Less了解

• Less是CSS的一种扩展程序式语言，也可以称为CSS的预处理器，它在CSS原有的基础上增加了变量、Mixin、函数等特性，它让css的编写更有程序化。同时也还有其他的CSS处理器，Sass，Stylus。它可以在配合rem和flexible.js做页面适配。

Less的基本使用

• Less文件

  • 首先，先创建一个.Less文件，在less文件里是正常的写CSS的内容的

• Less变量

  • 语法：@变量名：值；一般在Less文件最顶部声明变量，在CSS样式里可以调用变量
  • 必须要以@开头，不能有特殊字符，不能以数字开头

  • @size: 18px;
    div{
        font-size: @size;
    }

  • Less中的变量也是有作用域存在的，上面这种变量在最外面声明的变量，就是全局作用域

  • div{
        @size: 18px;
        font-size: @size;
    }

  • 这种的话就是局部作用域，只能在div{ 这个括号里面调用 }

• Less Mixin混入

  • .bg{
      color: red;  
    }
    div{
        .bg();
    }
    
    

  • 这样可以调用重复样式的类或者id

• Less运算符

  • 在less中可以直接用运算符来计算，加(+)、减(-)、乘(*)、除(/)
  • 注意：使用除法计算时，需要使用括号将表达式括起来；例如（25 / 2）

• Less嵌套

  • 在less中可以使用父子嵌套的方式来写CSS样式

  • div{
        font-size: 14px;
        p{
            color: red;
        }
    }
    
    

  • 像伪类/交集/伪元素选择器这些选择器，在嵌套时需要在前面使用“&”，不使用的话，在编译的时候，前面会有一个空格

  • div{
        font-size: 14px;
        p{
            color: red;
        }
        &:hover{
            font-size: 20px;
        }
    }
    

  • 这里less文件编译后，就会有一个div:hover的选择器；如果不加&的话，编译后会成为div空格:hover。
• Less引入
  • less文件中可以通过@import来引入其他less文件，有两种引入方法
    • @import url(abc.less);
    • @import 'abc.less'
    • 这里的.less后缀可以省略，但是建议还是不要省略

• Less编译

  • less文件时不能之间在html中使用的，需要将less文件编译成css文件。然后引入html中
  • 在vscode中有一个插件可以编译less文件-----easy LESS
    • 下载插件后重启vscode，然后创建一个less文件，在写入样式保存后会自动生成一个同名的css文件
    • 自定义生成的CSS文件存放路径
      • 在vscode设置里搜索easy LESS，找到LESS：Compile编辑
      • 
      • 还有一种方法就是在less的文件顶部添加 //out: 路径；如果是//out: false，就代表当前less文件不编译

总结

这些就是简单介绍了下Less的基本使用，less可以在写css的时候增加效率提高，并且Less+rem+flexible可以适配布局