CSS预处理器 Less的基本使用

Less的基本使用

简介

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，功能更加强大，开发更加方便。

工作流程

Less 包含一套自定义的语法及一个解析器，Less代码会先被编译成CSS，这样才会被浏览器识别，并引用编译后的CSS文件为元素添加样式。

注意

1.less可以在服务器端，浏览器端被引用；
2.在浏览器端引用外部less文件会出现跨域问题* 可以直接在html中使用less* 或使用live server开启本地服务。
3.less中的注释* 以//开头的注释不会被编译到css文件中* 以/**/包裹的注释会被编译到css文件中

基本使用

1.定义变量

（1）以@开头> @color:pink 当文件中所有的pink都要改成deeppink时，直接修改定义就可以了；> 也可以设置属性/选择器变量/类名> @m:margin：使用到margin的地方都可以用 @{m} 的格式使用；> @selector:#wrap 使用到#wrap的地方都可以用 @{selector} 的格式使用；> @url:路径 使用到该路径的地方都可以用 @{url} 的格式使用。> （2）以$开头> c o