侧边栏壁纸
  • 累计撰写 22 篇文章
  • 累计收到 1 条评论

less

admin
2022-06-02 / 0 评论 / 10 阅读 / 正在检测是否收录...

前缀为“-webkit-”的属性,能够在以webkit为内核的浏览器中正常使用,通常代表chrome和safari。主要是为了兼容老版本的写法

less安装与使用

  1. 安装less后,新建less文件会附带一个css文件,会对其中的内容进行自动编译。less有两种注释模式,区别在于是否在css文件中显示。
  2. @xxx:red;定义全局的样式变量。 在项目中可以把常用的变量进行封装到一个文件中。

    (bgColor:red) 
    .index {
      color:@bgColor;
    }

    less变量

  3. 选择器变量
    l3wu441x.png
  4. 属性变量
    l3wu5noh.png
  5. url变量
    l3wu80xr.png
  6. 声明变量
    l3wua7c4.png
  7. 变量运算
    l3wudglo.png
  8. 变量作用域
    l3wudq4y.png
  9. 用变量定义变量
    l3wufao8.png

less嵌套

less可以嵌套定义和嵌套媒体查询

混合方法

  1. 无参数方法
    l422ap3c.png
  2. 默认参数方法
    l422dpdb.png
  3. 方法的匹配模式
    l422ltkr.png
    注意点1:最后定义的triangle会选择最为匹配的,triangle中的第一个变量是left,那么他就回去找到定义的时候第一个参数是left的,如果有多个会多个都匹配
    注意点2:如果匹配的参数是变量,也会去匹配,例如@_
  4. 方法的命名空间
    l422zdkc.png
    l422zp4i.png
    注意点:
    l42307u4.png
  5. 方法的条件筛选
    l423rccw.png
    l423sind.png
  6. 数量不定的参数
    l423vbi3.png
  7. important!
    优先级最高
  8. 循环方法(递归)--略
  9. 属性拼接
    l4241btx.png
    l4241ois.png

继承

  1. extend继承
    l424ft40.png
    l424gh2m.png
  2. all全局搜索替换
    l424md88.png
  3. 减少代码重复性

导入

  1. 文件导入
    l424tj8z.png
  2. reference 使用引入的less文件,但不会编译他
    l424un1q.png
  3. once @important语句的默认行为。相同的文件只会被导入一次,而随后的导入文件的重复代码都不会解析
    l424w8t6.png
  4. multiple 允许导入多个同名文件
    l424xlky.png

条件表达式

带条件的混合 类型检测函数 单位检测函数

函数

函数库
l4254mcs.png

0

评论 (0)

取消