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 媒体查询

编译后 ==>

以上仅为常用基础用法!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180824G0Y4XW00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券