关注
分享
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。Less 可以运行在 Node 或浏览器端。Less 可以让我们用更少的代码做更多的事情
ixygj197875
十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、Sass、Less、JavaScript、jQuery、JSON、Python、PHP、Bootstrap、Django等，著有《HTML宝典》、《揭秘CSS》、《Sass简明教程》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，多个开源项目托管在 GitHub。
展开
-
认识 Less
Less大大简化了 CSS 的编写，并且降低了 CSS 的维护成本。就像它的名称所说的那样，Less 可以让我们用更少的代码做更多的事情。原创 2017-11-19 22:26:04 · 348 阅读 · 0 评论 -
Less 原理
Less 原理Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。Less 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。先看一个简单的例子，Less 代码如下：@color: #4d926f;header { colo原创 2017-11-20 10:06:51 · 602 阅读 · 0 评论 -
Less 的用法
Less 用法Less 可以直接在浏览器端运行（支持IE6+、Webkit、Firefox），也可以借助Node.js或者Rhino在服务端运行。Less是一种动态语言，无论是在浏览器端，还是在服务器端运行，最终还是需要编译成 CSS，才会发挥其作用。浏览器端使用在浏览器端直接使用Less，浏览器会直接为页面应用编译后的CSS样式，而不是生成单独的CSS文件。在浏览器端直接使用原创 2017-11-20 10:10:42 · 543 阅读 · 0 评论 -
Less 编译工具
Less 编译工具虽然你可以选择在浏览器端使用Less，直接在页面中嵌入一个 Less.js 文件，你也可以选择在服务器端使用Less，使用命令行将Less文件编译成最终的CSS文件。然而，这两种方式都不够灵活，人们更喜欢使用图形界面工具进行编译。常见的工具有 winLess、simpLess、Koala 等，最值得推荐的编译工具，非 Koala 莫属。Koala是由国人开放的一款开源原创 2017-11-20 10:18:15 · 1118 阅读 · 0 评论 -
Less变量
Less变量定义变量Less 中的变量和其他编程语言一样，可以实现值的复用，同样它也有作用域（scope）。简单的讲，变量作用域就是局部变量和全局变量的概念。Less 中，变量作用域采用的是就近原则，换句话说，就是先查找自己有没有这个变量，如果有，就取自己的变量，如果没有，就查找父元素，依此类推。先看一个简单的例子，Less 文件如下：@width : 20px; #homeDiv原创 2017-11-20 10:30:47 · 1761 阅读 · 0 评论 -
什么是Mixin
什么是MixinLess中，允许你将一个类嵌入到另一个类中，被嵌入的类也可以看作变量。换句话说，你可以用一个类定义样式，然后把它当作变量，在另一个类中，只要引用变量的名字，就能使用它的所有属性，Less把这种特性称作 mixin，中文把翻译为“混入”或“混合”，其目的就是从现有的样式中添加属性。请看以下Less代码：.bordered { border-top: dotted 1原创 2017-11-20 10:38:44 · 16975 阅读 · 4 评论 -
带参数的mixin
带参数的mixin在Less中，还可以像函数一样定义一个带参数的mixin, 这种形式叫做 Parametric Mixin，即带参数的混入。如：// 定义一个样式选择器.borderRadius(@radius){ border-radius: @radius;}然后，在其他选择器中像这样调用它：// 使用已定义的样式选择器#header { .borderRadiu原创 2017-11-20 11:13:09 · 800 阅读 · 0 评论 -
作为函数的mixin
作为函数的mixin在一个 mixin 内部定义的变量或 mixin，都调用者可见，因此，它们可以作为它的返回值。如，以下Less代码：.count(@x, @y) { @sum:(@x + @y); @average: ((@x + @y) / 2);}上述代码在 .count 内部定义了两个变量 @sum 和 @average，则 .count 将拥有两个返回值。调用原创 2017-11-20 11:14:20 · 495 阅读 · 0 评论 -
Less的Mixin嵌套规则
Less的嵌套规则原创 2017-11-20 11:15:49 · 1220 阅读 · 0 评论 -
Less运算和函数
Less运算和函数Less运算在我们的 CSS 中，充斥着大量数值型的 value，比如 color、padding、margin 等。在某些情况下，这些数值之间是有着一定关系的，那么我们怎样利用 Less来组织这些数值之间的关系呢？请看以下Less代码：@init: #111111;@transition: @init*2;.switchColor { color: @tr原创 2017-11-20 21:04:45 · 4479 阅读 · 0 评论 -
Less转义字符
Less转义字符有时候，当需要引入无效的CSS语法或Less不能识别的字符，就需要使用转义字符。此时，就可以在字符串前面加一个 ~，并将需要转义的字符串放在 "" 中。格式为：~"anything"在编译时，任何包含在 ~"anything" 中的内容，将会原封不动的输出到编译后的CSS文件中。如，以下Less代码：.weird-element { content: ~"^/原创 2017-11-20 21:06:17 · 1829 阅读 · 0 评论 -
Less注释
适当的注释是保证代码可读性的必要手段，Less支持两种类型的注释：多行注释和单行注释。原创 2017-11-21 07:52:36 · 534 阅读 · 0 评论 -
Less中的命名空间
Less中的命名空间当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？如果你是 java 程序员或 C++ 程序员，我猜你肯定会想到命名空间 Namespaces。Less 也采用命名空间来对名字进行分组，来避免重名问题。如以下Less代码：#mynamespace { .home {...} .user {...}}这样我们就定义了一个名原创 2017-11-21 07:52:22 · 2544 阅读 · 0 评论 -
Less的@import指令
Less的@import指令Less中，可以通过 @import指令来导入外部文件。@import指令可以放在代码中的任何位置，导入文件时的处理方式取决于文件的扩展名：如果扩展名是 .css，文件内容将被原样输出。如果是任何其他扩展名，将作为LESS文件被导入。如果没有扩展名，将给他添加一个 .less 的扩展名，并作为LESS文件被导入。例如：@import "style原创 2017-11-21 08:59:34 · 22581 阅读 · 2 评论 -
Less的!important关键字
Less的!important关键字在调用 mixin 时，如果在后面追加 !important 关键字，就可以将 mixin 里面的所有属性都标记为 !important。如，以下Less代码：.mixin() { color: #900; background: #F7BE81;}h2 { .mixin() !important;}编译后的CSS代码为：h2 { c原创 2017-11-21 09:01:01 · 4555 阅读 · 0 评论 -
Less的模式匹配
Less的模式匹配Less提供了一种机制，允许根据参数的值来改变 mixin的行为。比如，以下代码就可以让 .mixin 根据不同的 @switch 值而表现各异：.mixin (dark, @color) { color: darken(@color, 10%);}.mixin (light, @color) { color: lighten(@color, 10%);}此时原创 2017-11-21 09:09:26 · 1552 阅读 · 0 评论 -
Less的条件表达式Guards
Less的条件表达式当需要根据表达式，而不是参数的值或数量进行匹配时，条件表达式（Guards）就显得非常有用。如果你熟悉函数式编程的话，对条件表达式也不会陌生。为了尽可能地接近CSS的语言结构，Less使用关键字 when 而不是 if/else来实现条件判断，因为 when 已经在CSS的 @media query 特性中被定义。表达式中可以使用比较运算符、逻辑运算符、或检查函原创 2017-11-21 16:55:24 · 2719 阅读 · 0 评论 -
Less中的循环
Less中的循环在Less中，mixin可以调用它自身。通过这种递归调用，再结合Guard表达式和模式匹配，就可以写出各种循环结构。如，使用循环来创建一个网格类：.generate-columns(4);.generate-columns(@n, @i: 1) when (@i = @n) { .column-@{i} { width: (@i * 100% / @n); }原创 2017-11-21 16:57:09 · 984 阅读 · 0 评论 -
Less中的合并
Less中的合并合并是LESS的一个特性，它允许通过指定的语法来为某个属性添加使用逗号或空格分隔的值的列表。对于文本阴影、盒阴影、背景、变换等允许使用值的列表的属性，合并非常有用。合并的语法，就是在属性名称和冒号之间，添加一个 “+” 或 “+_” 标志：1）当使用 “+” 标志时，列表间以逗号分隔。如：.mixin() { box-shadow +: inset 0 0 1原创 2017-11-21 17:03:35 · 1138 阅读 · 0 评论 -
Less中的Extend
Less中的ExtendExtend就相当于Java的继承，它允许一个选择器继承另一个选择器的样式。Extend有两种语法格式。一种是：:extend() { }另一种是： { &:extend();}假设有一个 .inline 的类：.inline { color: red;}现在希望 nav ul 选择器能够让继承 .inline类的 color 属原创 2017-11-21 17:07:38 · 1474 阅读 · 0 评论 -
Less的内置函数
Less的内置函数杂项函数color解析颜色，将代表颜色的字符串转换为颜色值.参数：string: 代表颜色值的字符串。返回值： color案例： color("#aaa");输出： #aaaconvert将数字从一种单位转换到另一种单位。第一个参数为带单位的数值，第二个参数为单位。如果两个参数的单位是兼容的，则数字的单位被转换。原创 2017-11-22 10:58:39 · 803 阅读 · 0 评论