css CSS 预处理器| LESS

CSS 预处理器| LESS

原文:https://www.geeksforgeeks.org/css-preprocessor-less/

LESS 代表 Leaner 样式表。它是 CSS 向后兼容的语言扩展。它允许我们使用变量、嵌套、混合等特性，所有这些都在一个 CSS 兼容的语法中。LESS 受到了 SASS 的影响，并影响了 SASS 较新的“SCSS”语法。Bootstrap 3 中使用了 LESS，但在 Bootstrap 4 中被 SASS 取代。

先决条件:

超文本标记语言
CSS

系统要求
- 操作系统:跨平台
- 浏览器支持: IE (Internet Explorer 8+)，火狐，谷歌 Chrome，Safari。
文件类型:所有 LESS 文件必须有。少了文件扩展名。

工作:网络浏览器不理解 LESS 代码本身。这就是为什么你需要一个 LESS 预处理器来把 LESS 代码变成简单的标准 CSS 代码。

工作步骤:
- 在文件中编写 LESS 代码。
- 使用命令将 LESS 代码编译成 CSS 代码。
- 在 html 文件中包含编译后的 CSS 文件。
特征:
- 变量:变量可以用来存储可以重用的 CSS 值。它们用 @ 初始化。
  
  html @lt-gray: #ddd; @background-dark: #512DA8; @carousel-item-height: 300px;
- **混合:T2 混合是一种将一组属性从一个规则集包含到另一个规则集的方式。
  
```html zero-margin {     margin:0px auto;     background:@white; }

.row-header {     .zero-margin;     padding:0px auto; }

.row-content {     .zero-margin;     border-bottom: 1px ridge;     min-height:400px;     padding: 50px 0px 50px 0px; } ``` * 筑巢:** LESS 给你使用筑巢的能力。

```html .carousel {     background:@background-dark;
  
  .carousel-item {         height: @carousel-item-height;         img {             position: absolute;             top: 0;             left: 0;             min-height: 300px;         }     } } ```
- 数学运算:算术运算+、-、*、/可以对任意数字、颜色或变量进行运算。
  
```html .carousel-item { height: @carousel-item-height; }

.carousel-item .item-large { height: @carousel-item-height *2; } ```
- 功能: LESS 提供数学、列表、字符串、颜色运算、颜色混合等多种功能。
  
```html @width: 0.8;

.class { width: percentage(@width); // Returns 80% color: saturate(@base, 5%); background-color: spin(lighten(@base, 25%), 8); } ```
示例:文件名gfg.html

```html <!DOCTYPE html>

LESS
Welcome to GeeksforGeeks.
- Algo
- DS
- Languages
- Interviews
- CS subjects
                                                   ```
文件名无样式

```html @color-primary: #009900; @font-pri: Sans-Serif; @font-sec: Helvetica;

body{     color: @color-primary;     font-size: 40px; }

.list{     font-family: @font-pri;     font-size: 20px;     .a{         font-family: @font-sec;         font-size: 10px;     } } ```

文件名 style.css 我们在传送 style.less 后得到

html body {   color: #009900;   font-size: 40px; } .list {   font-family: Sans-Serif;   font-size: 20px; } .list .a {   font-family: Helvetica;   font-size: 10px; }

输出:

优势:
- LESS 兼容跨浏览器。
- LESS 提供了一个操作符列表，方便用户进行编码。
- 由于变量的使用，维护很容易。
缺点:
- 与 SASS 相比，LESS 提供的框架更少。
- 对于刚接触 CSS 的人来说，这可能很棘手。