Less
关注
分享
扫一扫
书和咖啡
学习python的小侠客
展开
-
Less 循环
本节我们学习 Less 中的循环 （Loop），循环在编程语言中应该是很常见的，一般编程语言中都有循环，例如在 JavaScript 中有 for 循环、while 循环等，但是在 Less 中没有这两种语法，而是通过自身调用来实现循环。循环的使用在 Less 中，混合可以调用它自身，当一个混合递归调用自身，再结合 guard 表达式和模式匹配这两个特性，就可以写出循环结构。示例：例如循环输出四个 padding 属性：.loop(@i) when (@i > 0) { .loop((原创 2020-08-21 09:40:52 · 1045 阅读 · 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-08-19 09:46:43 · 137 阅读 · 0 评论 -
Less 混合守卫
本节我们学习混合守卫（Mixins Guards），当我们想在表达式上匹配简单值或参数数量时，Guards 将会很有用。为了尽可能地保持 CSS 的声明性质，在 @media 查询特性规则中，Less 选择 Guards 函数的形式而不是 if/ else 语句来实现条件执行。示例：我们来看下面这个例子，定义了两个混合：：.common (@w; @h) when ( @w >= 100px) { font-size: 18px;}.common (@w; @h) { color:原创 2020-08-14 09:57:09 · 179 阅读 · 0 评论 -
Less 混合函数
上一节我们学习了带参混合，当混合作为一个函数时是如何传入参数的。本节我们来学习混合函数，混合可以支持嵌套，接受参数和返回值。混合范围如果我们在一个混合中定义了变量，那么这个变量只能在这个混合或者引用了这个混合的区域中使用。但是有一个例外，就是如果调用者包含一个具有相同名称的变量，则该变量不会复制到调用者的作用域中，仅存在于调用者本地范围内的变量受到保护，而从父范围继承的变量将会被覆盖。示例：.xkd() { @w: 10px; @h: 20px;}.p1{ .xkd(); @原创 2020-08-12 11:01:39 · 628 阅读 · 0 评论 -
Less 带参混合
上一节我们学习了 Less 中的混合，混合使用起来也很简单方便。本节我们来学习带参混合，混合可以带一个或多个参数，多个参数之间通过逗号或分号分隔。一般我们使用分号分隔参数，因为在 Less 中逗号有两种意思，可以表示 Mixins 参数分隔符或 CSS 列表分隔符。带参Mixins在声明 Mixins 时，参数需要加一个 @ 前缀。示例：例如声明了一个混合 .xkd ，这个混合带一个 @num 参数：.xkd(@num){ border-radius: @num; border-top:原创 2020-08-10 09:36:17 · 362 阅读 · 0 评论 -
Less 混合
本节我们学习 Less 中的混合（Mixin），混合是一种将一组属性从一个规则集包含或混入到另一个规则集的方法。简单一点来说，其实混合就有点类似编程语言中的函数，通过这种方式，可以在代码中实现复用。如果还不懂，下面我们通过实际例子来看一下混合的使用。普通Mixins我们先来看下面这段 Less 代码：.xkd{ font-size: 14px; color: #ccc;}.good{ font-size: 14px; color: #ccc; padding: 10px;}原创 2020-08-05 13:57:51 · 306 阅读 · 0 评论 -
Less 转义
本节我们学习 Less 语言中的转义（Escaping），什么是转义呢？某些时候，当需要引入无效的 CSS 语法或 Less 不能识别的字符，就需要使用转义字符。Less 中的转义字符就是在字符串前面加上一个 ~ 符号，并将需要转义的字符串放在 "" 或 '' 中，例如 ~"xkd"。转义允许你使用任意字符串作为属性或变量值。转义的使用一般情况下我们是不需要用到转义的，只有在代码不能被正常编译的情况下，才需要使用转义。下面我们来举一个例子说明一下。示例：例如 border-radius 属性，在原创 2020-07-27 09:58:56 · 658 阅读 · 1 评论 -
Less 运算
Less 语言中支持运算，我们可以给变量进行一些运算操作，例如加 +、 减 -、乘 *、除 / 四个运算符，这四个运算符可以对任何数字、颜色或变量进行运算。一般运算符在进行加、减计算之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。运算的使用运算的使用其实很简单，就是对属性值或变量进行一些加减乘除运算。示例：我们来看下面这段 HTML代码：<!DOCTYPE html><html> <head>原创 2020-07-23 09:46:15 · 654 阅读 · 0 评论 -
Less 作用域
本节我们学习 Less 中的作用域，作用域其实可以理解为可以被访问的区域。Less 语言中变量的作用域和其他编程语言中的很类似，首先会先从本地范围查找，如果没有找到，编译器会从父范围查找，向上一层一层找，直到找到为止。变量的作用域我们来看一下关于变量的作用域，下面是用于测试的 HTML 代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title原创 2020-07-20 09:45:23 · 810 阅读 · 0 评论 -
Less 变量
本节我们来学习 Less 中的变量，很多编程语言中都有变量这个概念，而不同的语言中定义变量的方式也不一样。例如在 JavaScript 中可以通过 var 关键字定义变量。变量表示可以改变的值， Less 中的变量可以帮助我们为重复定义的样式类或者属性值起一个别名。这是什么意思呢，看下面这个例子。示例：例如在 CSS 代码中，某个颜色值 #f93d66 在多个地方被使用：.xkd{ border: 1px solid #f93d66;}.xkd h3{ background-color:原创 2020-07-17 09:57:18 · 444 阅读 · 0 评论 -
Less 嵌套
本节我们学习 Less 中的嵌套，嵌套应该很容易理解，HTML 语言中就支持标签的嵌套。我们在使用 CSS 时，如果想要为多层嵌套的元素设置样式，要么给元素加上一个类选择器或ID选择器，要么使用后代选择器。例如：.xkd{ font-size: 14px;}.xkd p{ line-height: 25px;}.xkd p span{ color: #ccc;}这样写虽然也好理解，但是没有那么直观，维护起来也不方便。而 Less 中的嵌套规则正好可以解决这样问题，嵌套规则允许在原创 2020-07-15 09:47:41 · 716 阅读 · 0 评论 -
Less 安装
本节我们学习 Less 的安装，Less 的官方地址为：<http://lesscss.org/。在官网首页，有告诉我们 Less 的两种安装方式，如下所示：直接引用通过 NPM 安装直接引用我们先来看直接引用，这个很简单，就是直接在 HTML 页面引入创建好的 Less 文件即可。在引入之前，我们需要创建一个 Less 文件，Less 文件的后缀名为 .less，所以我们可以将文件命名为 index.less。然后我们就可以通过 <link> 标签向 H原创 2020-07-13 10:01:49 · 1787 阅读 · 2 评论