LESS 学习demo 【原创】

LESS 学习demo

Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com QQ: 1724338257

目录导航

• LESS 学习demo
  • 1 工具
  • 2 demo 目录结构
    • 01-嵌套与命名空间
    • 02-变量(variables)
    • 03-混合(mixins)
    • 04-运算(operations)
    • 05-关键字(important)
    • 06-条件表达式(guard)
    • 07-循环(loop)
    • 08-合并属性(merge)
    • 09-父运算符
    • 10-常用函数

github: https://github.com/csxiaoyaojianxian/Html5Study

1 工具

1. koala
2. less.min.js

2 demo 目录结构

01-嵌套与命名空间

• less.min.js 的引入
• 字符集
• 注释
• 引入
• 嵌套
• 命名空间
• 作用域

02-变量(variables)

• 定义变量
• 作为选择器和属性名
• 作为URL
• 定义多个相同名称的变量

03-混合(mixins)

• 基本混合
• 使用() 的不带输出的混合
• 混合选择器
• 参数：基本参数
• 参数：多个参数
• 参数：多个同名参数
• 参数：命名参数
• 返回值
• extend伪类实现样式的继承使用
• 参数应用：处理CSS3兼容性问题

04-运算(operations)

• 优先级
• 运算规则

05-关键字(important)

• !important

06-条件表达式(guard)

• 条件运算符
• IS函数
• when 设置条件
• 多条件

07-循环(loop)

• 循环应用：栅格系统

08-合并属性(merge)

• +
• +_

09-父运算符

• &
• 多个&&

10-常用函数

• 字符串函数
• 数学函数
• 类型函数
• 颜色函数

​

【By CS逍遥剑仙】 未经允许不得转载：禅林阆苑 » LESS 学习demo 【原创】