Less 官方文档学习笔记

LESS 是css的一种扩展，它的编辑器是基于node.js 的less.js，将less文件编译成css文件（可压缩）。

其中的概念：

变量：定义变量来代替某个值，只能编译一次，本质是“常量”。例如：

@color:#ffddee;body {background-color:@color;
}

输出的结果为:

body {background-color:#ffddee;
}

变量是延时加载的，只有用到的时候才会加载。变量的查找顺序是从下到上，最近优先。

混合(Mixin)：在一个选择其中调用另外一个选择器，从而拥有其定义的特征。例如：

a {background-color:red;.nav;
}.nav{font-size:14px;
}

输出的结果是：

1 a {
2   background-color:red;
3   font-size:14px;
4 }
5
6 .nav {
7   font-size:14px;
8 }

在混合的时候，如果不想让某个定义显示，可以在定义后加（）,如上面的代码，在.nav 的定义处改为.nav() {....} 则只输出 a的定义。就像函数的调用一样。而在调用的时候.nav()等价于.nav 如果.nav中需要使用变量，则可以在调用的时候传入变量，如：

@font:14px;
a {background-color:red;.nav(@font);
}.nav(@font) {font-size:@font;
}

其中，@font 是可以设置默认值的，用法和在PHP中的用法一样，直接在选择器定义的时候设置@font=12px;即可。

当传递多个参数的时候，可以用@argument对象接收所有的参数，然后以数组的方式使用它。如果.nav定义为 .nav(...) 则代表可以接收0到多个参数，如果定义为.nav(@font,...)则@font是必须的，后面还可以传参数，后面的参数可以用@rest全部接收，然后以数组的方式使用即可。

混合门卫(Mixin Guards):使用 guards 来匹配不同的css

例如：

.mixin(@a) when (lightness(@a) >= 60%){.......output a
}.mixin(@a) when (lightness(@a) < 50%) {.........output b;
}.mixin(@a) default() {.........output default
}

当调用mixin()时，根据传入不同的参数，匹配条件调用不同的输出定义。其中default() 是所有其他条件不匹配后的操作，这类似于其他语言中的switch case。

另外还可以用函数来检查类型，例如： iscolor, isnumber, iskeyword, isurl, ispixel, ispercentage, isem, isunit 等等。

嵌套：在选择器中定义另一个选择器，这样对应DOM中的结构. 例如：

div {a {font-size:14px; }
}

编译后输出的结果为：

div a {font-size:14px;
}

继承：在Less中允许选择器继承另一个选择器定义的属性，使用:extend，例如：

.subclass {background-color:#ccddee;text-align:center;
}.class {color:red&:extend(.subclass);
}

其中&代表当前的上级对象，即.class本身，也就是说 .a:extend(.b){} 等价于 .a{&:extend(.b);}。上面的输出结果为：

.class {color:red;
}.subclass, .class {background-color:#ccddee;text-align:center
}

在继承的时候，可以使用@_调用父层级的参数

如果在集成的时候加上all关键字，则会继承所有有关的定义，比如.a:extend(.b all){} 那么会继承所有出现过.b定义的地方的定义

继承的时候，如果在把 !important放在引用的选择器后面，则所有继承下的属性都会带有!important.

注意，:extend必须放在选择器的最后，否则是编译错误的。:extend是不能匹配带有变量的选择器定义的，然而带有变量的选择器定义可以使用:extend

合并属性：在每个需要合并的属性后添加一个+作为标识，则嵌套或者继承时，相同的属性就会合并

@import

使用方法：@import (option) filename; 导入其他文件内容到该Less文件

其中，option的选项有以下值

referrence: 引用一个less文件，但是不对其内部的定义进行输出；

inline: 包含(include) 源文件但是不执行

less：将导入的文件作为less文件编译，无论其后缀名是什么

css: 将导入的文件作为css文件编译，无论其后缀名是什么

once(default): 只包含一次该文件

multiple: 包含多次该文件。

转载于:https://www.cnblogs.com/JacobQiao/p/5224881.html

Less 官方文档学习笔记相关推荐

ZooKeeper官方文档学习笔记03－程序员指南03
我的每一篇这种正经文章,都是我努力克制玩心的成果,我可太难了,和自己做斗争. ZooKeeper官方文档学习笔记04-程序员指南03 绑定 Java绑定客户端配置参数 C绑定陷阱: 常见问题及故障 ...
Open3D官方文档学习笔记
Open3D官方文档学习笔记第一部分--点云 1 可视化点云 2 体素降采样 3 顶点法线评估 4 访问顶点法线补充:Numpy在Open3D中的应用 5 裁剪点云补充1:获取点云坐标补充2: ...
ZooKeeper官方文档学习笔记01－zookeeper概述
纠结了很久,我决定用官方文档学习 ZooKeeper概述学习文档学习计划 ZooKeeper:分布式应用程序的分布式协调服务设计目标数据模型和分层名称空间节点和短命节点有条件的更新和监视 ...
vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
Android 开发之ViewPage官方文档学习笔记
2019独角兽企业重金招聘Python工程师标准>>> 以下为官网的官方文档,我将从翻译该文档开始学习. ViewPager extends ViewGroup java.lang. ...
xarray官方文档学习笔记（序章）
个人需要开了这个坑不定时更新希望能和大家共同学习和交流工作中难免有不足和错误,希望大家多多批评指正 xarray官方文档首页:http://xarray.pydata.org/en/stable ...
OpenCV-Python官方文档学习笔记（上）
整理自OpenCV-Python官方文档一. OpenCV-Python Tutorials 1 安装及验证 2 图片读写,展示 3 视频读写,展示 4 绘图功能(绘制几何形状:线.圆.椭圆.矩形. ...
kafka官方文档学习笔记2--QuickStart
下载kafka https://www.apache.org/dyn/closer.cgi?path=/kafka/1.0.0/kafka_2.11-1.0.0.tgz 解压安装包 > tar ...
kafka官方文档学习笔记3--配置简述
Kafka使用key-value键值对格式的配置,这些配置即可以在进程启动时,根据指定的properties文件加载,也可以通过编程的方式,在程序中动态指定:根据集群中角色的不同分为6种配置: bro ...
MongoDB 官方文档学习笔记（一）：概述、数据库、集合、视图及定容集合
MongoDB概述 Getting started 准备环境学习之前需要,安装MongoDB,可参考:https://docs.mongodb.com/manual/installation/ Mo ...

Less 官方文档学习笔记

Less 官方文档学习笔记相关推荐

最新文章

热门文章