Less 的基础用法

转载是一种动力 分享是一种美德

1

Less 介绍

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

Less 可以运行在 Node 或浏览器端。

官网：https://less.bootcss.com/

可以使用的编译工具建议：Koala

地址：http://koala-app.com/index-zh.html

2

使用方法入门

1

在项目中创建 .less 文件

2

将.less 和 less.js文件引入 html

注意：

link 标签rel ="stylesheet/less"；

自己的 .less 文件先于 less.js 引入；

3

运行 html

运行文件 必须在服务器中打开

4

使用 预编译工具Koala （考拉 ）

下载工具：http://koala-app.com/index-zh.html

将整个文件夹目录拖到界面中间

点击右下角 compile 按钮，即可编译成功。

会在my.less的同级目录生成一个my.css文件。

3

常用基本方法

1

基础变量

2

变量计算

3

变量 嵌套

编译后=>>

如果不传参，则用默认值；

一个样式类 当成可以传参数的函数 来调用；

4

嵌套 规则

编译后=>>

&：代表当前元素

5

变量 作用域

编译后=>>

变量 @s 在#ss内部中被改变了，但是不影响全局的值。

所以在 #aa 中依然是原值。

6

import 指令

A.less内容 ：@aaa:red

B.less内容：@import 'A.less' ;

div{ color:@aaa }

import将外部的less引入到本地less文件里面来。

7

@media 媒体查询

编译后 ==>

以上仅为常用基础用法！