Less学习笔记(一)

1.Less初体验

1.1 什么是css预处理器?

• css预处理器就是用某一种语言来为css增加一些动态语言的的特性(变量、函数、继承等)
• css预处理可以让你的css更简洁,适应更强,代码有诸多的的好处。
• 简而言之：css预处理就是升级版的css

1.2 常见的css预处理器

Less、Sass、Stylus

2.为什么需要less?

• 2.1css的语法虽然简单，但它同时也带来了一些问题
• 2.2css需要书写大量看似没有逻辑的代码，不方便维护及扩展，也不利于互动
• 2.3造成这些原因的本质源于css是一门非编程试的语言，没有变量/函数/作用域等概念

3.什么是less（Learner Style Sheets）

• 3.1less是一门css预处理器，为css赋予动态语言的特征
• 3.2它扩展了css语言,增加了变量、Mixin(混合)、嵌套、函数、和运算等特性，使得css更以维护和扩
• 3.3用js的语法去写css

4.less基本使用

4.1在浏览器中直接使用

• 编写less文件—>引入less文件—>引入less.js—>运行
• 注意点:一定要先引入less.css在引入less.js如果less代码是写到单独的文件中，一定要在服务端环境运行才能生效。
• 使用方法一:www.lesscss.cn下载less包
  • 通过编辑打开才会有效果,如果不是通过编辑打开文件效果无效
• 使用方法二:下载考拉工具,通过客户端编译
  • 比较适合学习,不需要导入less.js文件
  • 官网地址:koala-app.com/