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: 包含多次该文件。

时间: 2024-10-25 00:47:12

Less 官方文档学习笔记的相关文章

NFC官方文档学习笔记(一):NFC前台调度

上Android开发官网看下下NFC相关知识,发现在网上相关的介绍也非常多,我也滥竽充数地写一个学习记录,就是官方API DEMO中的COPY版本. /** * NFC前台调度: 读取NDEF数据:一个NFC标签处理与标签的调度系统,分析发现的NFC标签,适当 * 地对数据进行分类,并启动一个应用程序.在分类的数据中,要处理扫描NFC标签 的应用程序可以声明一个 intent filter来处理数据请求. * */ public class ForegroundDispatch extends

hadoop官方文档学习笔记(1)——resource manager HA

resource manager HA是hadoop自从2.4之后推出的功能,以Active/Standby的方式提供冗余,目的是为了消除单点失败的风险. 1.总体架构: 2.故障切换:有自动和手动两种形式. 手动:如果以手动形式切换,使用yarn haadmin命令首先将Active节点转为standby,再将standby节点转为active. 自动:RM有基于zookeeper的节点选举机制决定哪一个是活动节点.不需要像HDFS一样部署一个zkfc守护进程,因为RM内嵌了这样的功能. 做了

jenkins官方文档学习笔记 初识Jenkins

什么是jenkins? Jenkins是一个用来监控重复工作的受到嘉奖的应用,比如构建一个软件项目或者定时执行的任务. 在这些工作中,Jenkins主要专注与以下两项工作: 1,持续构建/测试软件项目,Jenkens提供简单易用的所谓的持续集成系统,让开发者把变动集成到项目中变的更简单,让用户获得一个新的构建.自动持续的集成提高了生产效率. 2,监控外部调用执行的工作,比如cron jobs和procmail jobs,即使这些功能运行在远程机器上.例如,定时任务中,你会定期的收到捕获输出的邮件

Spring 4 官方文档学习(十二)View技术

1.介绍 Spring 有很多优越的地方,其中一个就是将view技术与MVC框架的其他部分相隔离.例如,在JSP存在的情况下使用Groovy Markup Templates 还是使用Thymeleaf,仅仅是一个配置问题. 本章覆盖了主要的view技术,嗯嗯,可以与Spring结合的那些,并简明的说明了如何增加新的view技术. 本章假定你已经熟悉了Spring 4 官方文档学习(十一)Web MVC 框架之resolving views 解析视图 -- 它覆盖了views如何耦合到MVC框架

Effective Go(官方文档)笔记

Effective Go(官方文档)笔记 自己主动局部变量提升(编译期完毕?):return &...; 内置函数: new/make copy, append delete range(这是keyword吧?由于后面没有()) array是值对象 slice:引用array 2维切片(略) map if seconds, ok := timezone[tz]; ok { ... func (f *File) Read(buf []byte) (n int, err error) { ... 注

TensorFlow官方文档入门笔记[一]

TensorFlow官方文档入门笔记[一] 张量 3 # a rank 0 tensor; this is a scalar with shape [] [1., 2., 3.] # a rank 1 tensor; this is a vector with shape [3] [[1., 2., 3.], [4., 5., 6.]] # a rank 2 tensor; a matrix with shape [2, 3] [[[1., 2., 3.]], [[7., 8., 9.]]] #

Spring 4 官方文档学习(十一)Web MVC 框架之resolving views 解析视图

接前面的Spring 4 官方文档学习(十一)Web MVC 框架,那篇太长,故另起一篇. 针对web应用的所有的MVC框架,都会提供一种呈现views的方式.Spring提供了view resolvers,可以让你在浏览器中render model,而不必绑定到某种特定的view技术上.开箱即用,例如,Spring可以让你使用JSPs.Velocity目标和XSLT views.See Chapter 23, View technologies for a discussion of how

根据ThinkPHP官方文档学习opensns框架

根据ThinkPHP官方文档学习opensns框架 1.解读Application下各个Controller文件夹下的作用 控制器类的命名方式是:控制器名(驼峰法,首字母大写)+Controller 控制器文件的命名方式是:类名+class.php(类文件后缀) namespace Weibo\Controller; ///这是系统的规范要求,表示当前类是weibo模块下的控制器类,与实际路径一致 use Think\Controller; //引入 Think\Controller 类库便于直

React官方文档学习记录(四)- 条件渲染

一点点记录,建议需要学习React的移步官方文档去学习. 在React中,你可以创建一个清晰(distinct)的组件来简要描述你现在需要的东西.然后,你只需要使用你应用中的state来渲染它们. React中的条件型渲染跟JavaScript中的条件运算符运行方式差不多.好像就是使用JavaScript中的if或者三元运算符创建元素来显示现在的状态,然后让React更新UI来匹配这些修改. 下面这个例子就是根据不同的isLoggedIn进行不同的欢迎. 1 2 3 4 5 6 7 8 9 10