Less基础

随记123

于 2024-06-18 20:39:33 发布

阅读量740

点赞数 23

分类专栏：前端文章标签： less 前端 css

本文链接：https://blog.csdn.net/weixin_55702682/article/details/139782852

版权

前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

1. Less入门

1.1 有了 CSS，为什么还需要 Less

CSS基本上是设计师的工具，不是程序员的工具。在程序员的眼里，CSS是很头痛的事情，它并不像其它程序语言，比如说PHP、Javascript等等，有自己的变量、常量、条件语句以及一些编程语法，只是一行行单纯的属性描述，写起来相当的费事，而且代码难易组织和维护。

很自然的，有人就开始在想，能不能给CSS像其他程序语言一样，加入一些编程元素，让CSS能像其他程序语言一样可以做一些预定的处理。这样一来，就有了“CSS预处语言（CSS Preprocessor）”。

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
CSS预处理器技术已经非常的成熟，而且也涌现出了很多种不同的CSS预处理器语言，比如说：Sass（SCSS）、Less、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。如此之多的CSS预处理器，那么“我应该选择哪种CSS预处理器？”也相应成了最近网上的一大热门话题，在Linkedin、Twitter、CSS-Trick、知呼以及各大技术论坛上，很多人为此争论不休。相比过计我们对是否应该使用CSS预处理器的话题而言，这已经是很大的进步了。

到目前为止，在众多优秀的CSS预处理器语言中就属Sass、Less和Stylus最优秀，讨论的也多，对比的也多。相信前端开发工程师会做出自己的选择——我要选择哪款CSS预处理器语言。

1.2 什么是 Less

LESS CSS 是一种动态样式语言，属于 CSS 预处理语言的一种，它使用类似 CSS的语法，为 CSS 的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS 的编写和维护。

LESS CSS 可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。说明：本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

1.3 如何使用Less

1.3.1 命令行

安装Less

$ npm install -g less

编译Less文件，输出到指定文件：

$ lessc styles.less styles.css

1.3.2 使用编辑器插件自动编译less文件

vscode中less插件的安装：

扩展中直接搜索easy less安装即可。

1.3.3 在浏览器环境中使用 Less

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4"></script>

2. Less 初体验

Less 快速入门 | Less.js 中文文档 - Less 中文网

从官网下载一份 less.js (less.min.js )，将 less.js(less.min.js)放到 js 目录中
自己写一个简单的示例 less 文件，命名为：style.less，内容如下：
```
@color:red;
#header {
    color: @color;
}
h2 {
    color: @color;
}
```

index.html 内容如下：

<html>
  <head>
    <link rel="stylesheet/less" type="text/css" href="less/style.less">
    <script src="js/less.min.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="header">
        这是网页的头部
    </div>
    <h2>
        这是标题部分
    </h2>
  </body>
</html>

3. Less基础语法

Less（Leaner Style Sheets）一种 CSS 扩展，不仅向后兼容 CSS语法，它还为现有的 CSS 语法新增了额外的特性。下面我们就来讲述如何使用Less的基础语法。

3.1 注释（Comments）

行注释和块注释：

/* 多行注释-快捷键:shift+alt+a
@var: white;
@var: red;*/


// 单行注释
// @var: white;
// @var: red;
多行注释会被解释到css文件中,单行注释则不会

3.2 变量（Variables）

3.2.1 变量

变量基本上是每个语言脚本上都会涉及的一个小小知识点，是学好语言脚本的必经之路。LESS 中也可以设置变量，然后通过变量可以改变整个网站的设计风格。良好的掌握 LESS 中变量的用法，是 LESS 的基础。

3.2.2 变量语法

使用方法就是在“@”后添加变量名称然后变量值用冒号“:”链接。

@nice-blue: #5B83AD;

#header {
    color: @light-blue;
}

输出结果：

#header {
    color: #6c94be;
}

3.2.3 变量的作用域

如果对同一个变量定义两次的话，在当前作用域中最后一次定义的将被使用。这与 CSS 的机制类似，最后一次定义的值会成为这个属性的值。

若定义在嵌套之中，那么这个变量就只能服务于这个嵌套之内的属性了。变量也是没有顺序可言的，只要页面里有，都会按顺序覆盖，按顺序加载。

3.2.4 字符串插值

变量可以用像 @{name} 这样的结构，以类似 ruby 和 php 的方式嵌入到字符串中。

3.3 混合（Mixins）

混合是一种将一组属性从一个规则集引入（混入）到另一个规则集中的方式。假设我们有以下样式:

.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

我们希望在其他规则集内部使用上面这些属性，那么，我们只需要访问我们想要的属性所在类的名称即可，就像下面这样：

#menu a {
    color: #111;
    .bordered;
}

.post a {
    color: red;
    .bordered;
}

编译后，.bordered规则集中的属性就会同时出现在#menu a和.post a规则集中了（注意，也可以将ID选择器作为混入对象）。

#menu a {
    color: #111;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

.post a {
    color: red;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

3.4 嵌套（Nesting）

Less给我们提供了嵌套的功能，用来代替级联选择器。假设我们有以下CSS：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

在 Less 中，我们可以使用下面这种方式编写:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

这样的代码更简洁, 它模仿了 HTML 的结构。

使用这种方法照样可以在 mixins 中包含伪类(pseudo-selectors)。下面是一个经典的 clearfix 代码，在这里使用 mixins 重写了（& 表示当前选择器的父选择器）：

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

嵌套指令和冒泡

像@media或@supports这样的指令可以像选择器一样嵌套。最终指令会被提升到外部，与同一个规则集中的其他元素的相对顺序保持不变。这被称为冒泡。

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

编译输出：

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

3.5 运算（Operations）

算术运算符可以操作任何数字，颜色，或变量。在进行加、减或比较之前会先将它们的转换成相同的单位。计算结果的单位和左边操作数保持一致。如果单位之间不能转换，或没有意义，则单位会被忽略。不能转换的例子如：px转换成cm或rad转换成%。

// 数字被传换成相同的单位
@conversion-1: 5cm + 10mm; // 6cm
@conversion-2: 2 - 3cm - 5mm; // -1.5cm

// 不能转换
@incompatible-units: 2 + 5px - 3cm; // result is 4px

// 变量参与运算
@base: 5%;
@filler: @base * 2; // 10%
@other: @base + @filler; // 15%

* 和 / 操作不会进行单位转换。大多数情况下没有意义，比如，长度乘以长度得面积，而CSS不支持指定面积。

@base: 2cm * 3mm; // result is 6cm

你也可以计算颜色值：

@color: #224488 / 2;  // #112244
background-color: #112244 + #111;  // #223355

然而，你可能会发现Less的颜色函数（专门处理颜色的函数）会更有用。

3.6 转义（Escaping）

转义允许您使用任何任意字符串作为属性或变量值。在~"anything"中的任何东西都是按照原样使用的，除了插值以外没有任何变化。

@min768: ~"(min-width: 768px)";  // 或者 ~'(min-width: 768px)'

.element {
  @media @min768 {
    font-size: 18px;
  }
}

编译输出：

@media (min-width: 768px) {
  .element {
     font-size: 18px;
  }
}

3.7 函数（Functions）

Less 提供了许多用于转换颜色，处理字符串和进行算术运算的函数。他们在函数参考一节有详细的的介绍。

这些函数使用起来非常简单。在下面的例子中我们使用 percentage 将 0.5 转换为 50%，然后将基础颜色值的饱和度增加了 5%，最后将背景颜色的亮度增加了 25% 之后又将色相值增加 8:

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // 返回 `50%`
  color: saturate(@base, 5%);
}

3.8 命名空间和访问器(namespace selectors)

有时候，为了更好地组织代码，你可能会想要将 mixins 进行分组，或包裹起来。在 Less 中做到这一点非常直观，假设你想在 #bundle 下捆绑一些 mixins 和变量，以便稍候复用或者编译输出：

#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white
    }
  }
  .tab { ... }
  .citation { ... }
}

现在，如果我们想把.button规则集中的属性混和到#header a规则集中，我们可以这样做：

#header a {
  color: orange;
  #bundle > .button;  // 也可以写成 #bundle.button
}

注意：如果你不想让命名空间中的代码编译输出到你的CSS中，比如，#bundle .tab，那么在命名空间之后添加一个括号()就可以了。

命名空间中声明的变量，在空间外部是不可用的。但是你可以使用上面的语法引用空间中的 mixins（#bundle > .mixin-name）。因此，你不能这么做：#bundle > @variable-name。

3.9 映射（Maps）

从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

输出符合预期：

.button {
  color: blue;
  border: 1px solid green;
}

3.10 作用域（Scope）

Less 中的作用域与编程语言中的作用域概念非常相似。首先会在局部查找变量和 mixins，如果没找到，编译器就会在父作用域中查找，依次类推。

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

变量和 mixins 在使用之前不必先定义。因此下面的代码与前面的例子等价：

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

3.11 导入（Importing）

导入工作和预想的一样。你可以导入一个.less文件，然后这个文件中的所有变量都可以使用了。如果导入的是.less文件，则文件的扩展名是可选的。

@import "library"; // library.less
@import "typo.css";

随记123

关注

23
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
Less基础

LESS CSS 是一种动态样式语言，属于 CSS 预处理语言的一种，它使用类似 CSS的语法，为 CSS 的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS 的编写和维护。LESS CSS 可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。说明：本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。
复制链接

扫一扫