Less基本知识点

1.补充CSS,垂直水平居中写法

Less基本知识点_第1张图片

2.如何运用Less

1)node用法

2)script标签引用(需放在body标签下面)

3.预编译器(借助考拉编译器,将less转换为CSS)

Less基本知识点_第2张图片

css中新建.Less
html中引入.CSS

www.koala-app.com(考拉官方网站)

4.注释是否开放查看

Less基本知识点_第3张图片

5.变量的应用(网站主配色可以运用)

Less基本知识点_第4张图片

Less基本知识点_第5张图片

Less基本知识点_第6张图片

6.同级结构写法   &

Less基本知识点_第7张图片

基本语法写法

Less基本知识点_第8张图片

7.混合模式

Less基本知识点_第9张图片

1)不带参数的混合

Less基本知识点_第10张图片

2)不带输出的混合——加括号

Less基本知识点_第11张图片

3)带参数的混合

Less基本知识点_第12张图片

4)带参数+默认值的混合

Less基本知识点_第13张图片

5)带命名参数的混合

6)匹配模式

用边框画三角形,兼容IE

Less基本知识点_第14张图片

Less基本知识点_第15张图片

Less基本知识点_第16张图片

7)arguments(很少用)实参

Less基本知识点_第17张图片

8.less计算

Less基本知识点_第18张图片

9.继承extend

Less基本知识点_第19张图片

Less基本知识点_第20张图片

继承全部ALL

Less基本知识点_第21张图片

Less基本知识点_第22张图片

10.避免编译

Less基本知识点_第23张图片

 

 

 

你可能感兴趣的:(Less基本知识点)