Less
关注
分享
扫一扫
大前小白
哪有什么天才！
坚持做自己喜欢做的事情，这本身就是一种天赋。
展开
-
Less 循环
本节我们学习 Less 中的循环 （Loop），循环在编程语言中应该是很常见的，一般编程语言中都有循环，例如在 JavaScript 中有 for 循环、while 循环等，但是在 Less 中没有这两种语法，而是通过自身调用来实现循环。循环的使用在 Less 中，混合可以调用它自身，当一个混合递归调用自身，再结合 guard 表达式和模式匹配这两个特性，就可以写出循环结构。示例：例如循环输出四个 padding 属性：.loop(@i) when (@i > 0) { .loop((原创 2020-11-09 11:40:30 · 818 阅读 · 0 评论 -
Less CSS 守卫
本节我们学习 CSS守卫（CSS Guards），在上一节中，我们学习了混合守卫，如何对 Mixins 进行条件判断。但是某些时候我们不止需要对 Mixins 进行条件判断， 也需要对 CSS 的样式类进行条件判断。所以这就需要用到 CSS 守卫啦。CSS 守卫是在 v1.5.0 版本才添加的，而在 v1.5.0 版本之前，如果我们要定义一个 CSS 守卫：.xkd() when (@choice = true) { p{ color: @color; }}.xkd();现在我原创 2020-11-09 10:54:18 · 118 阅读 · 0 评论 -
Less之混合守卫
示例：我们来看下面这个例子，定义了两个混合：：.common (@w; @h) when ( @w >= 100px) { font-size: 18px;}.common (@w; @h) { color: red;}第一个混合带有条件判断，第二个混合不带有条件判断，下面我们在两个样式类中引用上述的两个混合：.one{ .common(150px, 50px); }.two{ .common(70px, 20px);}编译成 CSS 代码：.one {原创 2020-11-04 11:39:24 · 129 阅读 · 0 评论 -
Less 混合函数
混合范围如果我们在一个混合中定义了变量，那么这个变量只能在这个混合或者引用了这个混合的区域中使用。但是有一个例外，就是如果调用者包含一个具有相同名称的变量，则该变量不会复制到调用者的作用域中，仅存在于调用者本地范围内的变量受到保护，而从父范围继承的变量将会被覆盖。示例：.xkd() { @w: 10px; @h: 20px;}.p1{ .xkd(); @w: 100px; width: @w; height: @h;}编译成 CSS 代码：.p1 { wi原创 2020-11-02 11:23:49 · 194 阅读 · 0 评论 -
Less 带参混合
混合可以带一个或多个参数，多个参数之间通过逗号或分号分隔。一般我们使用分号分隔参数，因为在 Less 中逗号有两种意思，可以表示 Mixins 参数分隔符或 CSS 列表分隔符。带参Mixins在声明 Mixins 时，参数需要加一个 @ 前缀。示例：例如声明了一个混合 .xkd ，这个混合带一个 @num 参数：.xkd(@num){ border-radius: @num; border-top: @num;}.good{ .xkd(10px);}编译成 CSS 代码：原创 2020-10-29 11:33:53 · 316 阅读 · 0 评论 -
Less的混合
混合是一种将一组属性从一个规则集包含或混入到另一个规则集的方法。简单一点来说，其实混合就有点类似编程语言中的函数，通过这种方式，可以在代码中实现复用。如果还不懂，下面我们通过实际例子来看一下混合的使用。普通Mixins我们先来看下面这段 Less 代码：.xkd{ font-size: 14px; color: #ccc;}.good{ font-size: 14px; color: #ccc; padding: 10px;}可以很明显的看到，.xkd 样式类中的代码，原创 2020-10-26 10:53:33 · 583 阅读 · 0 评论 -
Less的转义字符
本节我们学习 Less 语言中的转义（Escaping），什么是转义呢？某些时候，当需要引入无效的 CSS 语法或 Less 不能识别的字符，就需要使用转义字符。Less 中的转义字符就是在字符串前面加上一个 ~ 符号，并将需要转义的字符串放在 "" 或 '' 中，例如 ~"xkd"。转义允许你使用任意字符串作为属性或变量值。转义的使用一般情况下我们是不需要用到转义的，只有在代码不能被正常编译的情况下，才需要使用转义。下面我们来举一个例子说明一下。示例：例如 border-radius 属性，在原创 2020-10-22 11:14:44 · 803 阅读 · 0 评论 -
Less 运算
Less 语言中支持运算，我们可以给变量进行一些运算操作，例如加 +、 减 -、乘 *、除 / 四个运算符，这四个运算符可以对任何数字、颜色或变量进行运算。一般运算符在进行加、减计算之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。运算的使用运算的使用其实很简单，就是对属性值或变量进行一些加减乘除运算。示例：我们来看下面这段 HTML代码：<!DOCTYPE html><html> <head>原创 2020-10-20 10:55:38 · 1484 阅读 · 2 评论 -
Less 作用域
本节我们学习 Less 中的作用域，作用域其实可以理解为可以被访问的区域。Less 语言中变量的作用域和其他编程语言中的很类似，首先会先从本地范围查找，如果没有找到，编译器会从父范围查找，向上一层一层找，直到找到为止。变量的作用域我们来看一下关于变量的作用域，下面是用于测试的 HTML 代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title原创 2020-10-16 11:37:58 · 639 阅读 · 1 评论 -
Less 变量
本节我们来学习 Less 中的变量，很多编程语言中都有变量这个概念，而不同的语言中定义变量的方式也不一样。例如在 JavaScript 中可以通过 var 关键字定义变量。变量表示可以改变的值， Less 中的变量可以帮助我们为重复定义的样式类或者属性值起一个别名。这是什么意思呢，看下面这个例子。示例：例如在 CSS 代码中，某个颜色值 #f93d66 在多个地方被使用：.xkd{ border: 1px solid #f93d66;}.xkd h3{ background-color:原创 2020-10-12 11:46:50 · 165 阅读 · 0 评论 -
Less 嵌套
本节我们学习 Less 中的嵌套，嵌套应该很容易理解，HTML 语言中就支持标签的嵌套。我们在使用 CSS 时，如果想要为多层嵌套的元素设置样式，要么给元素加上一个类选择器或ID选择器，要么使用后代选择器。例如：.xkd{ font-size: 14px;}.xkd p{ line-height: 25px;}.xkd p span{ color: #ccc;}这样写虽然也好理解，但是没有那么直观，维护起来也不方便。而 Less 中的嵌套规则正好可以解决这样问题，嵌套规则允许在原创 2020-10-09 12:10:04 · 511 阅读 · 0 评论 -
父选择器
使用引用父选择器 &，运算符表示嵌套规则的父选择器，最常用于将修改类或伪类应用于现有选择器时。 a { background: green; // 如果没有&,将生成一个：hover规则（与<a>标记内的悬停元素匹配的子代选择器） &:hover { background: red; } ...原创 2019-10-28 09:45:42 · 1410 阅读 · 0 评论 -
循环和合并
循环Loops语句允许我们多次执行一个语句或一组语句。在Less中，mixin可以自称，与 Guard表达式和模式匹配组合使用时，这个递归mixin可以创建各种迭代/循环结构。 .loop(@count) when (@count > 0) { // 下一次迭代 .loop((@count - 1)); // 每次迭代的代码 ...原创 2019-10-25 11:31:40 · 255 阅读 · 0 评论 -
Mixin 和 CSS Guards
当我们想在表达式上进行匹配简单的值或者是参数数量时，我们可以使用Guards；它与mixin声明相关联，并包括附加到mixin的条件。每个mixin将有一个或多个由逗号分隔的防护，并且guard必须括在括号中。为了尽量接近CSS的声明性，Less选择了使用通过受保护的Guards的mixins而不是if / else语句执行，并执行计算以指定匹配的mixin。Guard 比较运算符Guard...原创 2019-10-24 09:42:29 · 188 阅读 · 0 评论 -
Less导入选项
Less 提供了CSS @import CSS规则的几个扩展，以提供更多的灵活性来处理外部文件。语法： @import (keyword) "filename";以下是导入指令的相关详情：reference，使用较少的文件但不输出。inline，在输出中包含源文件，但不对其进行处理。less，无论文件扩展名为什么，都将其视为less文件。css，无论文件扩展名为什么，都将其视为CSS...原创 2019-10-22 13:07:27 · 760 阅读 · 0 评论 -
将规则集传递给mixin
允许包装在mixin中定义的css块。分离的规则集是一组CSS属性、嵌套规则集、媒体声明或者是存储在变量中的任何其他内容，我们可以将它包含在规则集中或其他结构中，并且所有属性都将复制到那里；我们还可以将它用作mixin参数，并将它作为其他任何变量传递。 // 声明分离的规则 @rule_set: { color: green; }; // 使用分离的规则集 .xk...原创 2019-10-22 09:40:03 · 119 阅读 · 0 评论 -
作为函数混合
混合中定义的变量和混合是可见的，可以在调用者的作用域中使用，只有一个例外，那就是如果调用方包含一个具有相同名称的变量（其中包括由另一个mixin调用定义的变量），则不会复制变量，仅存在于调用者本地范围内的变量受到保护，而从父范围继承的变量将会被覆盖。Mixin范围由变量和混合组成的混合可以在调用者的作用域中使用，并且是可见的。Mixin和返回值mixin类似于函数，在mixin中定义的变...原创 2019-10-21 09:52:02 · 110 阅读 · 0 评论 -
参数混合
Mixins 具有多个参数参数可以使用逗号或分号分隔。 （建议使用分号，因为逗号具有双重含义：可以将其解释为mixin参数分隔符或者是css列表分隔符）；使用逗号作为mixin分隔符使不可能创建逗号分隔的列表作为参数。参数mixin使用一个或多个参数，通过参数和它的属性来扩展Less的功能，以达到在混合到另一个块时自定义mixin输出的效果。如果编译器在mixin调用中或者是声明中看到至少...原创 2019-10-18 13:33:45 · 435 阅读 · 0 评论 -
Less混入
混合类似于编程语言中的函数。Mixins 是一组CSS属性，允许我们将一个类的属性嵌套于另一个类，被嵌入的类可以看作是变量，并且包含类名作为其属性，也就是说我们可以用一个类定义样式然后把它当作变量，在另一个类中，只要引用变量的名字，就能够使用它的所有属性。在Less中，可以使用类或者是id选择器以与CSS样式相同的方式声明mixin，它可以存储多个值，并且可以在必要的时候在代码中重复使用。注...原创 2019-10-17 13:48:45 · 3057 阅读 · 0 评论 -
Less延伸
extend 是一个 Less 伪类，它通过使用 :extend 选择器在一个选择器中扩展其他选择器样式。扩展语法扩展可以是附加到选择器，也可以是集中放置在规则，看上去像是带有选择器参数的可选伪类，然后紧跟关键字 all 。 // 第一个块和第二个块做同样的事 .x:extend(.y) {} .x{ &:extend(.y);} // 扩展 ...原创 2019-10-16 14:34:59 · 784 阅读 · 0 评论 -
Less 变量
概念使用 @ 符号定义变量，变量分配使用 : 完成。声明格式：@变量名：变量值 。通常看到很多重复的相同的值，我们可以通过使用变量来避免。Less中的变量和其他编程语言一样，可以实现值的复用，同样的它也有作用域，简单的来说就是变量的作用域就是局部变量和全局变量的概念；变量作用域采用的是就近原则，也就是说我们需要先查找自己本身是否有这个变量，如果有就使用自身变量，没有的话就查找上一级父元素，...原创 2019-10-15 13:40:49 · 182 阅读 · 0 评论 -
Less简介
概念Less 是 css 预编译器，可以扩展 css 语言，添加功能，比如变量、混合、函数和许多其他的技术，让 css 更具维护性、主体性和扩展性。Less官方网址：http://www.lesscss.org注释：// ，不会被便有到 css 文件中/**/ ，会编译到 css 文件中变量（variables）普通变量作为选择器和属性名的变量（属性名必须是可用的才可以）作...原创 2019-10-14 13:47:45 · 240 阅读 · 0 评论