less基本使用

-

Less基础

维护CSS的弊端

• css是一门非编程式语言，没有变量、函数、SCOPE(作用域) 等概念
• css需要书写大量看似没有逻辑的代码，冗余度较高
• 不方便维护及扩展，不利于复用
• css没有很好的计算能力

less 介绍

• Less(Leaner Style Sheets) 是一门CSS扩展语言，成为CSS的预处理器
• 在CSS语法基础上，引入了变量，运算以及函数等功能，简化了CSS的编写，降低了CSS的维护成本，写的更少，做的更多
• Less中文网址：http://lesscss.cn
• 常见的CSS预处理器：Sass、Less、Stylus

Less使用

创建后缀名为less的文件，在这个文件里面书写less语句

• less变量

  • 语法:

    @变量名:值;
    

  • 变量命名规范

    • 必须有@为前缀
    • 不能包含特殊字符
    • 不能以数字开头
    • 大小写敏感

Less的编译

• 使用Vscode Less插件—>Easy LESS,安装完之后,重新加载下vscode
• 只要保存以下less文件,会自动生成CSS文件

Less嵌套

• 子元素的样式直接写到父元素里面
• 伪类选择器,伪元素选择器,需要在前面添加 &
• 内层选择器的前面没有 & 符号,则它被解析为 父选择器的后代
• 若有 & 符号,它就被解析为父元素自身或父元素的伪类

Less运算

• Less提供了加 减 乘 除 算术运算

  less 里面写
  @width : 10px + 5;
  div {
      border:@width solid red;
  }
  生成的css
  div {
      border:15px solid red;
  }
  less甚至还可以这样
  width:(@width + 5) * 2;
  

  注:

  1. 运算符的左右两侧必须有一个空格隔开

     2. 两个数参与运算,如果只有一个数有单位,则最后的结果就以这个单位为准

  2. 两个数参与运算,如果2个数都有单位,而且不一样的单位,最后的结果以第一个单位为准