Less 语法特性

                                                  ——(原创翻译:译者添加部分解释和代码运行结果)

♥在线Less编译器:LESS2CSS



《一》综述

Less作为CSS的扩展,不仅能向下兼容CSS,它还使用CSS已有的语法以增加自身的特有属性。这使得学习Less变得简单。

  1. 变量:很显而易见的表示方法:

    输出:

    注意变量其实是一个常数,且只能被定义一次。


  2. 混合
    混合是从一个包括一系列的属性的样式集到另一个样式集的一种表达方式,如下所示:

    我们想在其他的样式集中包含这些属性被,因此,我们只需要从所需的样式集中提取出样式名称即可。输出:

    #bordered元素的属性将会出现在#menu a 中(其中同样可以使用.class属性替换)

  3. 嵌套规则
    Less中允许使用嵌套或者级联组合。看如下示例:

    输出:


    可以使用如下的方式达到同样的效果。

    输出:(跟上面示例结果一样)
    使用同样的方式还可以绑定伪类,

    (其中&表示当前选择器的父元素)
    输出:


  4. 嵌套指令与冒泡
    media 与 keyframe 等指令可以像选择器一样进行嵌套。

    条件指令:e.g @Media, @supports 与 @document 也会被选择性复制到对应元素中去。

    输出:

    剩余的非条件指令,比如:font-face 与 keyframes,也会进行冒泡,对应元素不会改变。
    例如:

    输出:


  5. 操作符
    算法操作符 + - * / 能够操作任何数字,颜色或变量,结果的单位类型为最左边的单位。在加减、比较运算之前会先进行格式转化,如果出现语法错误或表意不明,则将被忽略,比如:px -> cm 或 red->%;

    相乘与相除不会转换数字,


【资源共享,欢迎转载,转载请注明出处:Qbooooble

原文链接-Less官方文档

时间: 2024-10-11 06:46:51

Less 语法特性的相关文章

C/C++笔试忍法帖04——C/C++语法特性篇

1.Heap与stack的差别 Heap是堆,stack是栈. Stack的空间由操作系统自动分配/释放,Heap上的空间手动分配/释放. Stack空间有限,Heap是很大的自由存储区 C中的malloc函数分配的内存空间即在堆上,C++中对应的是new操作符. 程序在编译期对变量和函数分配内存都在栈上进行,且程序运行过程中函数调用时参数的传递也在栈上进行. 2.In C++, what does "explicit" mean? what does "protected&

总结常见的ES6新语法特性。

前言 ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数(=>).class等等.用一句话来说就是: ES6给我们提供了许多的新语法和代码特性来提高javascript的体验 不过遗憾的是,现在还没有浏览器能够很好的支持es6语法,点这里查看浏览器支持情况,所以我们在开发中还需要用babel进行转换为CommonJS这种模块化标准的语法. 因为下面我会讲到一

Atitit.jdk java8的语法特性详解 attilax 总结

Atitit.jdk java8的语法特性详解 attilax 总结 1.1. 类型推断这个特别有趣的.鲜为人知的特性1 2. Lambda1 2.1. 内部迭代意味着改由Java类库来进行迭代,而不是客户代码.例如:1 2.2. Stream 流失接口 管道(pipelines)模式2 2.3. 方法引用(Method reference)2 2.4.  默认方法(Default method)2 2.5. 生成器函数(Generator function)2 2.6. 新加入的Nashorn

总结常见的ES6新语法特性

总结常见的ES6新语法特性 ES6给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数(=>).class等等.用一句话来说就是: ES6给我们提供了许多的新语法和代码特性来提高javascript的体验 不过遗憾的是,现在还没有浏览器能够很好的支持es6语法,点这里查看浏览器支持情况,所以我们在开发中还需要用babel进行转换为CommonJS这种模块化标准的语法. 因为下面我会讲到一些es6新特性的例子,如果想要

[C/C++不常见语法特性]_[位域的使用细节]

场景: 1.位域作为一个控制空间大小的语法特性其实是有它自己的用武之地的,比如网络通讯的协议定制,使用位域为1来严格限制bool值为0,1等等. 2.它有一些细节需要注意, 第一: 位域的大小是值的类型的整数倍,不足整数倍的补全.如unsigned short的大小是16位,那么如果总值17位的话会自动补全到16*2=32位. 第二: 赋值当然需要位运算符或者不超过它的最大值的整数. 代码: #include <stdlib.h> #include <assert.h> #incl

利用Idea重构功能及Java8语法特性——优化深层嵌套代码

当遇到深层嵌套代码,如for,if,lambda表达式或内部类及这些代码的组合,这时我们可以通过Java 8的语法特性来进行优化. 下面的代码是一个嵌套循环的示例. public MappedField getMappedField(final String storedName) { for (final MappedField mf : persistenceFields) { for (final String n : mf.getLoadNames()) { if (storedName

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法 一丶什么是JQuery JQuery: ???????JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率 ??????js库是包含了把复杂的功能封装到简单的方法中 JQuery的两大特性: ???????链式编程:可以.的形式实现多个功能 ?

Python语法特性

Python语法特性 使用Python来编写也有很长一段时间了,也想着如何优化自己的代码,随之也搜了一些问题.其中印象比较深刻的就是stackoverflow上的一个问题解答了. Argument Unpacking 可以使用 * 和 ** 分别将一个列表和一个字典解包为函数参数如: def draw_point(x, y): # do something tuple = (6, 8) dir = {'x': 6, 'y': 8} draw_point(*tuple) draw_point(**

objective-c 新语法特性

2007年的时候,Objective-C在TIOBE编程语言排名里还排在可怜的第45位,而随着移动互联网的迅速发展和iPhone,iPad等iOS设备的广阔市场前景,Objective-C也迅速崛起,走进了开发者的视野.在最近的TIOBE排名中,Objective-C达到了惊人的第4名,可以说已经成为当今世界上一门非常重要的编程语言. 而Objective-C现在主要是由Apple在负责维护了.一直以来Apple为了适应开发的发展需要,不断在完善OC以及相应的cocoa库,2.0中引入的prop

【Objective-C基础知识-12】OC语法特性 -- 块语法

一.基本概念 Block:块语法,本质上是匿名函数(没有名称的函数),苹果推荐的类型,效率高,用来封装和保存代码,BLOCK可以在任何时候执行. 标准C里面没有Block,C语言的后期扩展版本,加入了匿名函数,C++.JS.Swift等语言,有类似语法,叫做闭包. Block语法和函数指针很相似. Block和函数的相似性:(1)可以保存代码(2)有返回值(3)有形参(4)调用方式一样. Block就是一个匿名函数,它是OC对于闭包的实现,在块状中我们可以持有或引用局部变量,同时利用Block你