前端工程化之:CSS工程化+Less

一、什么是Less?

Less官网

Less中文网

 Less 是一种更加简洁的样式代码,它非常像 CSS ,但又不太一样,它让编写样式变得更容易。 Less 代码虽好,但它无法被浏览器识别,因此需要一个工具将其转换为纯正的 CSS 代码。

由于 node 环境具有读写文件的能力,于是在 node 环境中可以轻松的完成文件的转换。 npm 上有一个包叫做 less ,它运行在 node 环境中,通过它可以完成对 Less 代码的转换。

下面是 CSS 代码和 Less 代码的对比,它们都表达了一样的含义。

 

可以看出, node 环境在前端工程化中,充当了一个辅助的角色,它并不直接运行前端代码,而是让我们编写前端代码更加舒适便利。
转换代码,称之为编译 (compile) ,转换代码的工具,称之为编译器 (compiler)

二、安装Less

1、使用 npm 下载 less 

 less 包提供了一个 cli 工具 lessc ,有两种方案使用它。

方案一:全局安装Less

这种方案可以在任何终端目录使用 lessc 命令,但不利于版本控制。

方案二:本地安装less

npm i -D less

这种方案会把 less 安装到工程目录的 node_modules 中,你无法全局使用 lessc 命令,但可以在当前工程目录中使用 npx lessc 运行该命令。

npx lessc -v // 查看lessc版本

 npx  npm 提供的一个小工具,它可以运行当前项目中安装到 node_modules  cli 命令。

如果配置 package.json 脚本,无须使用 npx

 如果可以,应该尽量使用本地安装,而非全局安装!

2、使用 lessc 命令,对编写的 less 文件进行编译

// 将index.less编译成为index.css
lessc index.less index.css

3、配置 package.json 脚本,使用 npm 命令将 less 文件转换为 css 文件

在终端运行命令会生成一个 index.css 文件。

// package.json
"scripts": {"c": "lessc index.less index.css"},// 终端
npm run c

4、新建一个页面,引用编译结果 index.css 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="./index.css" /></head><body><div class="list">123</div></body>
</html>

三、 Less 基本语法

1.变量

// less写法
@width: 10px;
@height: @width + 10px;
@gray:#ccc#header {width: @width;height: @height;color: @gray;
}// 编译后
#header {width: 10px;height: 20px;color: #ccc;
}

2.混合(Mixins

混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法。假设我们定义了一个类(class)如下: 

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

如果我们希望在其它规则集中使用这些属性呢?没问题,我们只需像下面这样输入所需属性的类(class)名称即可,如下所示:

#menu a {color: #111;.bordered();
}.post a {color: red;.bordered();
}

 .bordered 类所包含的属性就将同时出现在 #menu a  .post a 中了。(注意,你也可以使用 #ids 作为 mixin 使用。)

3.嵌套

 Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力。

Less 书写的代码更加简洁,并且模仿了 HTML 的组织结构。

// css代码
#header {color: black;
}
#header .navigation {font-size: 12px;
}
#header .logo {width: 300px;
}// Less代码
#header {color: black;.navigation {font-size: 12px;}.logo {width: 300px;}
}

你还可以使用此方法将伪选择器(pseudo-selectors)与混合(mixins)一同使用。下面是一个经典的 clearfix 技巧,重写为一个混合(mixin) (&表示当前选择器的父级): 

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

 4.注释

块注释和行注释都可以使用: 

行注释只存在于 less 代码中,不会被编译到 css 中。

块注释是普通的 css 注释,会生成到编译结果中。

/* 一个块注释* style comment! */
@var: red;// 这一行被注释掉了!
@var: white;

 5.导入

 “导入”的工作方式和你预期的一样。你可以导入一个 .less 文件,此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名,则可以将扩展名省略掉:

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

以上就是 less 的基本用法,更多用法请关注官网~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/650157.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Christmas Trees(ACabc334-b)

总结&#xff1a;遇到与X轴相关问题考虑三种情况&#xff1a;都是正的&#xff0c;都是负的&#xff0c;一正一负&#xff08;这种情况下比前两者多了一个0&#xff09;。

单片机设计_智能蓝牙电子秤(51单片机、HX711AD)

想要更多项目私wo!!! 一、电路设计 智能蓝牙电子称由51单片机、HX711AD称重模块、HC-05蓝牙模块、LCD1602等电路组成硬件部分,然后上传至APP。 二、运行结果 三、部分代码 #include "main.h" #include "HX711.h" #include "uart.h" #include …

【QT+QGIS跨平台编译】之十一:【libzip+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

文章目录 一、libzip介绍二、文件下载三、文件分析四、pro文件五、编译实践一、libzip介绍 libzip是一个开源C库,用于读取,创建和修改zip文件。 libzip可以从数据缓冲区,文件或直接从其他zip归档文件直接复制的压缩数据中添加文件。在不关闭存档的情况下所做的更改可以还原…

Redis客户端之Jedis(一)介绍

目录 一、Jedis介绍&#xff1a; 1、背景&#xff1a; 2、Jedis连接池介绍&#xff1a; 二、Jedis API&#xff1a; 1、连接池API 2、其他常用API&#xff1a; 三、SpringBoot集成Jedis&#xff1a; 1、Redis集群模式&#xff1a; &#xff08;1&#xff09;配置文件…

vue3项目中typescript如何export引入(imported)的interface

引入接口后&#xff0c;不能原封不动地直接export出去。 typescript支持面向对象语言中常见的接口&#xff08;interface&#xff09;、类&#xff08;class&#xff09;等。但我近几天发现&#xff0c;一个interface&#xff0c;通过import引入后&#xff0c;如果直接再expor…

【HarmonyOS应用开发】TypeScript快速入门(二)

内容比较长&#xff0c;干货满满&#xff0c;全是实战操作内容&#xff0c;希望耐心观看&#xff0c;如果对你有所帮助&#xff0c;请点个赞&#xff01; ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript&#xff08;简称TS&#xff09;的基础上&#xff0c;匹配ArkUI…

桌球室台球房计费系统的安装方法,台球厅计时计费管理系统软件试用版教程

桌球室台球房计费系统的安装方法&#xff0c;台球厅计时计费管理系统软件试用版教程 一、前言 1、软件的安装方法&#xff1a; 如图&#xff0c;我们以 佳易王桌球计时计费软件V18.0版本为例说明。软件下载后的文件是压缩包文件&#xff0c;将文件解压后&#xff0c;将文件夹…

Blender教程-视图分割与3D游标-05

一、简介 Blender试图分割的作用主要有以下几点&#xff1a; 多角度查看模型&#xff1a;通过视图分割&#xff0c;用户可以从多个角度查看和比较模型&#xff0c;更好地理解和评估模型的细节和比例。多模型处理&#xff1a;当你在Blender中同时处理多个模型时&#xff0c;视…

AWS 专题学习 P11 (Machine Learning)

文章目录 专题总览机器学习服务1. Amazon Rekognition2. Amazon Rekognition - Content Moderation3. Amazon Transcribe4. Amazon Polly5. Amazon Polly - Lexicon & SSML6. Amazon TranscribeAmazon Translate7. Amazon Lex & Connect8. Amazon Comprehend9. Amazon …

k8s实例

k8s实例举例 &#xff08;1&#xff09;Kubernetes 区域可采用 Kubeadm 方式进行安装。 &#xff08;2&#xff09;要求在 Kubernetes 环境中&#xff0c;通过yaml文件的方式&#xff0c;创建2个Nginx Pod分别放置在两个不同的节点上&#xff0c;Pod使用动态PV类型的存储卷挂载…

DolphinDB学习(2):增删改查数据表(分布式表的基本操作)

文章目录 创建数据表1. 创建数据表全流程2. 核心&#xff1a;创建table3. 在已有的数据表中追加新的数据 数据表自身的操作1. 查询有哪些数据表2. 删除某张数据表3. 修改数据表的名称 博客里只介绍最常见的分区表&#xff08;createPartitionedTable&#xff09;的创建方法&…

机器学习笔记:地理加权回归(GWR)

1 传统的线性回归 机器学习笔记&#xff1a;线性回归_线性回归的读书笔记-CSDN博客 最优的β为&#xff1a; 2 地理加权回归&#xff08;GWR&#xff09; 2.1 模型概述 地理加权回归&#xff08;Geographically Weighted Regression&#xff0c;GWR&#xff09;是传统回归分…

详解矩阵的LDU分解

目录 一. 矩阵分解 二. 解方程 三. 例题说明 四. 矩阵的LDU分解 五. 矩阵三角分解的唯一性 一. 矩阵分解 其实我们可以把一个线性系统&#xff08;Linear System&#xff09;看成两个三角系统&#xff08;Triangular Systems&#xff09;&#xff0c;本文章将解释为什么可…

《PCI Express体系结构导读》随记 —— 第I篇 第3章 PCI总线的数据交换(5)

接前一篇文章&#xff1a;《PCI Express体系结构导读》随记 —— 第I篇 第3章 PCI总线的数据交换&#xff08;4&#xff09; 3.2 PCI设备的数据传递 PCI设备的数据传递使用地址译码方式&#xff0c;当一个存储器读写总线事务到达PCI总线时&#xff0c;在这条总线上的所有PCI设…

【陈工笔记-Transformer】Transformer的基础认识

对Transformer生动形象的比喻 Transformer包括了Encoder和Decoder&#xff0c;在知乎上看到了对两个部分关系的一种理解&#xff0c;非常有趣。即&#xff0c;“一个人学习跳舞&#xff0c;Encoder是看别人是如何跳舞的&#xff0c;Decoder是将学习到的经验和记忆&#xff0c;…

旷视low-level系列(一):Bayer Pattern Unification and Bayer Preserving Au

文章目录 1. Motivation2. Contribution3. Methods3.1 BayerUnify3.2 BayerAug 4. CommentsReference 1. Motivation 对于RAW域去噪&#xff0c;通常会将单通道bayer格式的RAW图打包成4通道&#xff0c;然后送入神经网络。不同厂家生产的sensor出的RAW图可能具有不同的bayer模…

SpringBoot中阿里云OSS的使用

目录 1 登录/注册阿里云并进入控制台 2 进入OSS控制台 3 创建bucket 4 查看bucket 5 获取AccessKey 6 查看帮助文档 7 添加Maven依赖 8 获取示例代码并改造成工具类 9 测试 1 登录/注册阿里云并进入控制台 2 进入OSS控制台 3 创建bucket 4 查看bucket 5 获取AccessKe…

最优化基础 - (最优化问题分类、凸集)

系统学习最优化理论 什么是最优化问题&#xff1f; 决策问题&#xff1a; &#xff08;1&#xff09;决策变量 &#xff08;2&#xff09;目标函数&#xff08;一个或多个&#xff09; &#xff08;3&#xff09;一个可由可行策略组成的集合&#xff08;等式约束或者不等式约束…

Ubuntu使用Docker部署Redis并实现远程访问本地数据库

文章目录 前言1. 安装Docker步骤2. 使用docker拉取redis镜像3. 启动redis容器4. 本地连接测试4.1 安装redis图形化界面工具4.2 使用RDM连接测试 5. 公网远程访问本地redis5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定TCP地址远程访问 前言 本文主要介绍如何在Ub…

Windows10系统任务栏变小怎么处理

首先&#xff0c;邮件任务栏&#xff0c;点击任务栏设置&#xff1b; 然后&#xff0c;将小任务栏 使能关闭&#xff08;图中为打开状态&#xff09;&#xff1b; 或者&#xff0c;你也可以取消锁定任务栏&#xff0c;然后在任务栏的边缘&#xff0c;进行上下拉拖动&#xff…