数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何创建LESS文件以及如何编译它
概述
LESS (Leaner Style Sheets) 是一种动态预处理器语言，其基础语言是层叠样式表 (CSS)。所有预处理器语言都是基础语言的升级版本，因此 LESS 也具有许多额外的功能。LESS 具有变量、父选择器、mixin、嵌套选择器等功能。在 Java 中，编译“.java”文件会生成“.class”文件作为输出，与 Java 相同，LESS 文件编译“.less”文件会生成“.css”文件作为输出。
方法
要创建和编译 LESS 文件，我们需要遵循以下步骤：
在桌面上打开终端或命令行 (cmd)。使用节点包管理器 (npm) 将 LESS 环境全局安装到您的计算机中。
npm install less –g
在桌面上创建一个文件夹。现在打开任何文本编辑器并在其中编写 LESS 代码。
将包含“.less”代码的文件保存为“style.less”。
现在打开命令行界面 (CLI)，使用命令 cd folderName 进入您创建“style.less”文件的子文件夹。“cd”表示更改目录。
到达 less 文件的文件夹后，键入以下命令来编译“style.less”，这将生成“style.css”文件。
lessc style.less > style.css
打开“style.css”文件，其中的代码将是“style.less”文件的转换后的 CSS 代码。
功能
LESS (Leaner Style Sheets) 的主要功能包括：
变量 - LESS 语言具有创建变量并存储 CSS 属性值的功能。在 LESS 文件中创建变量的常用前缀是“@”。例如：@width:10rem，@height:10rem，@background: green 等。
Mixin - 此功能可避免重复编写样式代码。我们可以将上面创建的样式重复用作其他元素的样式。
例如：
@width:10px; //variables created
@height:@width+10px; //variables created
.box{ //box class is styled using the above variable
width:@width;
height:@height;
}
.profile{
.box(); //.box() is used as mixins to inherit the property of box in profile
}
算法
步骤 1 - 在开始编写代码之前，请使用上述方法安装 less 编译器。如果您已经安装了“less”编译器，则可以使用以下命令在 CLI 上进行检查。
lessc –v
如果您的计算机上安装了“less”编译器，您将看到包含其版本的输出。
步骤 2 - 在桌面上创建一个名为“LESS”的文件夹。在任何文本编辑器中创建一个 HTML 文件，并在其中编写 HTML 基本代码。
步骤 3 - 在同一个文件夹中创建一个“style.less”文件，并编写用于设置网页样式的代码。
@textDecoration:underline;
@background:green;
@color:white;
@textAlign:center;
h1{
background-color: @background;
color: @color;
text-align: @textAlign;
padding: 1rem;
border-radius: 5px;
}
span{
text-decoration: @textDecoration;
}
步骤 4 - 现在使用 CLI 进入我们创建的桌面子文件夹。使用 cd desktop、cd less 命令到达目标位置。
步骤 5 - 现在使用命令编译“style.less”文件。
lessc style.less > style.css
步骤 6 - 编译文件后，“style.css”文件将成功创建。现在网页已准备好使用正确的样式在浏览器中加载。
示例
在这个例子中，我们将看到 LESS 文件未编译时以及编译后的网页外观。为此，我们将在文件夹中创建一个链接了 CSS 文件的网页和一个 LESS 文件。
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>LESS Example</title>
<style>
@textDecoration:underline;
@background:green;
@color:white;
@textAlign:center;
h1{
background-color: @background;
color: @color;
text-align: @textAlign;
padding: 1rem;
border-radius: 5px;
}
span{
text-decoration: @textDecoration;
}
h1 {
background-color: green;
color: white;
text-align: center;
padding: 1rem;
border-radius: 5px;
}
span {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>LESS</h1>
<h1>LESS stands for <span>(Leaner Style Sheets)</span></h1>
</body>
</html>
下图显示了编译“style.less”后的输出，当网页构建并链接到 CSS 时，它显示的页面仅显示未设置样式的 HTML 部分。编译“style.less”文件后，文件中编写的样式将被编译，并创建一个 style.css 文件，该文件显示以下带有正确样式的网页输出。
结论
当我们需要构建大型项目时，LESS (Leaner Style Sheets) 在代码中非常有用，因为大型项目需要维护大型 CSS 文件。“LESS”提供了变量功能，这不会使代码混乱。维护“LESS”代码比维护“CSS”代码更容易，例如，如果我们要更改网站上按钮的样式，假设我们必须更改按钮的边框半径和背景颜色，那么我们不必在 CSS 的每个元素中更改样式，而只需要在“LESS”文件变量中进行两次更改，这使得开发人员的工作更容易。
608 次浏览
