Less知识

原创 青春正当时 教程 css 90阅读 2019-03-01 17:08:52 举报

前言

CSS的短板

​ 作为前端学习者的我们 或多或少都要学些 CSS ,它作为前端开发的三大基石之一,时刻引领着 Web 的发展潮向。 而 CSS 作为一门标记性语言,可能 给初学者第一印象 就是简单易懂,毫无逻辑,不像编程该有的样子。在语法更新时,每当新属性提出,浏览器的兼容又会马上变成绊脚石,可以说 CSS 短板不容忽视。

​ 问题的诞生往往伴随着技术的兴起, 在 Web 发展的这几年, 为了让 CSS 富有逻辑性,短板不那么严重,涌现出了 一些神奇的预处理语言。 它们让 CSS 彻底变成一门 可以使用 变量 、循环 、继承 、自定义方法等多种特性的标记语言,逻辑性得以大大增强。

预处理语言的诞生

其中 就我所知的有三门语言:Sass、Less 、Stylus 。

  1. Sass 诞生于 2007 年,Ruby 编写,其语法功能都十分全面,可以说 它完全把 CSS 变成了一门编程语言。另外 在国内外都很受欢迎,并且它的项目团队很是强大 ,是一款十分优秀的预处理语言。
  2. Stylus 诞生于 2010 年,来自 Node.js 社区,语法功能也和 Sass 不相伯仲,是一门十分独特的创新型语言。
  3. Less 诞生于 2009 年,受Sass的影响创建的一个开源项目。 它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充(引用于官网)。

选择预处理语言

这是一个十分纠结的问题。

在网上讨论看来,Sass 与 Stylus 相比于 Less 功能更为丰富,但对于学习成本以及适应时间 ,Less 稍胜一筹,这也是我选择 Less 的原因。

Less 没有去掉任何 CSS 的功能,而是在现有的语法上,增添了许多额外的功能特性,所以学习 Less 是一件非常舒服的事情。

如果你之前没有接触过预处理语言,纠结应该学哪一个,不如先看看 下面 Less 的介绍,我相信你会爱上它的。

使用 Less 的前奏

使用 Less 有两种方式

  1. 在页面中 引入 Less.js
    可在官网下载或使用CDN

需要注意的是,link 标签一定要在 Less.js 之前引入,并且 link 标签的 rel 属性要设置为stylesheet/less。

​ 2.在命令行 使用npm安装

具体使用命令

假如还有问题,官网已经有了明确的步骤。

如果你也是 Webpack 的使用者,还需要配合 less-loader 进行处理,具体可见我的这篇文章:Webpack飞行手册,里面详细说明了 less 的处理方式。

如果你在本地环境,可以使用第一种方式,非常简单;但在生产环境中,性能非常重要,最好使用第二种方式。

正文

下面我将简介 Less 的功能特性。

变量

我们常常在 CSS 中 看到同一个值重复多次,这样难易于代码维护。
理想状态,应是下面这样:

只要我们修改 bgColor这一个变量, 整个页面的背景颜色都会随之改变。

而 Less 中的变量十分强大,可化万物,值得一提的是,其变量是常量 ,所以只能定义一次,不能重复使用。

值变量

@ 开头 定义变量,并且使用时 直接 键入 @名称。仅仅将 @变量名 看成是一个字符串。

在平时工作中,我们就可以把 常用的变量 封装到一个文件中,这样利于代码组织维护。

选择器变量

让 选择器 变成 动态

属性变量

可减少代码书写量

url 变量

项目结构改变时,修改其变量即可。

声明变量

有点类似于 下面的 混合方法

变量运算

不得不提的是,Less 的变量运算完全超出我的期望,十分强大。

变量作用域

一句话理解就是:就近原则,不要跟我提闭包。

借助官网的Demo

用变量去定义变量

嵌套

& 的妙用

& :代表的上一层选择器的名字,此例便是header

媒体查询

在以往的工作中,我们使用 媒体查询,都要把一个元素 分开写

Less 提供了一个十分便捷的方式

唯一的缺点就是 每一个元素都会编译出自己 @media 声明,并不会合并。

实战技巧

可以借助 Less 在元素中,去定义自己的私有样式。

结果:

混合方法

无参数方法

方法犹如 声明的集合,使用时 直接键入名称即可。

其中 .card.card() 是等价的。
个人建议,为了避免 代码混淆,应写成 :

默认参数方法

Less 可以使用默认参数,如果 没有传参数,那么将使用默认参数。

@arguments 犹如 JS 中的 arguments 指代的是 全部参数。

传的参数中 必须带着单位。

方法的匹配模式

与 面向对象中的多态 很相似

要点

方法的命名空间

让方法更加规范

要点

方法的条件筛选

Less 没有 if else,可是它有 when

要点

数量不定的参数

如果你希望你的方法接受数量不定的参数,你可以使用... ,犹如 ES6 的扩展运算符。

方法使用important!

使用方法 非常简单,在方法名后 加上关键字即可。

循环方法

Less 并没有提供 for 循环功能,但这也难不倒 聪明的程序员,使用递归去实现。

下面是官网中的一个 Demo,模拟了生成栅格系统。

  1. 属性拼接方法

+_ 代表的是 空格;+ 代表的是 逗号。

  1. 实战技巧

    下面是官网中的一个非常赞的 Demo

可以说 Less 是一门优雅编程语言。

继承

extend 是 Less 的一个伪类。它可继承 所匹配声明中的全部样式。

extend 关键字的使用

all 全局搜索替换

减少代码的重复性

从表面 看来,extend 与 方法 最大的差别,就是 extend 是同个选择器共用同一个声明,而 方法 是使用自己的声明,这无疑 增加了代码的重复性。

方法示例 与上面的 extend 进行对比:

要点

翻译官网

  • 选择器和扩展之间 是允许有空格的:pre:hover :extend(div pre).
  • 可以有多个扩展: pre:hover:extend(div pre):extend(.bucket tr) - 注意这与 pre:hover:extend(div pre, .bucket tr)一样。
  • 这是不可以的,扩展必须在最后 : pre:hover:extend(div pre).nth-child(odd)。
  • 如果一个规则集包含多个选择器,所有选择器都可以使用extend关键字。

导入

  1. 导入 less 文件 可省略后缀
  2. @import 的位置可随意放置

reference

Less 中 最强大的特性
使用 引入的 Less 文件,但不会 编译它。

once

@import语句的默认行为。这表明相同的文件只会被导入一次,而随后的导入文件的重复代码都不会解析。

multiple

使用@import (multiple)允许导入多个同名文件。

函数

判断类型

  • isnumber

判断给定的值 是否 是一个数字。

  • iscolor
  • isurl

颜色操作

  • saturate

    > 增加一定数值的颜色饱和度。

  • lighten

    > 增加一定数值的颜色亮度。

  • darken

    > 降低一定数值的颜色亮度。

  • fade

    > 给颜色设定一定数值的透明度。

  • mix

    > 根据比例混合两种颜色。

数学函数

  • ceil
  • floor
  • percentage
  • round
  • sqrt
  • abs
  • pow

由于 文章 篇幅有限,所以 只能介绍一些 使用效率高的函数。

如果你想了解更多,可以去官网的函数链接

其他

  1. 注释
    • / / CSS原生注释,会被编译在 CSS 文件中。
    • / / Less提供的一种注释,不会被编译在 CSS 文件中。
  2. 避免编译
  1. 使用 JS

    因为 Less 是由 JS 编写,所以 Less 有一得天独厚的特性:代码中使用 Javascript 。

​ 前几个月 , 有个 CSS in JS 的概念非常火,现在 看来 JS in CSS 也未曾不可。
我觉得完全可以根据 Less 这个特性来造个轮子,JS来控制 CSS ,形成 动态属性,如果成功 很可能会改变 现在前端的打开姿势。

结束语

​ 从我学习 Web 以来,无数前辈告诉我,Web 有三大基石,JS 控制行为,HTML 控制结构,CSS 控制样式。我一直再想 为什么要分为 3 个语言?为什么不能合成一个语言?或者说 就没有更合适的吗?在这几年的 Web 发展中,页面从 MVC 到 现在的 MVVC,结构正在发生着改变,但 其根本 不过是造了一个又一个 完美的轮子。我们为什么就不能打破传统呢?让 前端的 三大基石 变成一座大山呢 ?

参考文档

官网地址<http://lesscss.org/>;

less手册www.lesscss.net/

bootstrap官网less介绍 <http://www.bootcss.com/p/lesscss/>;

Less.js 中文文档

less在线编译

less 学习笔记

关于sass、scss、less的概念性知识汇总

谈谈CSS预处理器

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复