共计 4679 个字符,预计需要花费 12 分钟才能阅读完成。
Less(Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩大语言 。,它扩大了 CSS(层叠样式表)的性能并提供了更灵便、更弱小的款式定义和管理机制。通过应用 Less,开发人员能够编写可保护、可重用的款式代码,并以简洁的语法实现简单的款式成果。本文将介绍 Less 的基本概念和个性,以及如何应用它来简化 CSS 开发过程。想要学习更多的常识,可拜访 犀牛书 的 Less 中文文档。
装置
要装置 Less,首先须要确保本地已装置 Node.js 环境,而后运行如下命令,将 Less 装置到零碎的全局环境中:
npm install less -g
装置结束,可在控制台运行命令lessc -v
,如果呈现相干的版本信息,阐明曾经装置胜利。
编译运行
在 IED 编辑器如 Vscode 中,新建一个以 .less
为后缀的文件,文件内容可放入如下 Less 格局的款式元素。
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
.less
文件建设结束并填写内容后,下一步可用命令 lessc [option option=parameter ...] <source> [destination]
将其编译为以 .css
为后缀的文件。例如,要将 index.less 编译为 index.css,可用如下命令:
lessc index.less index.css
编译实现后,即可生成 .css
文件,详情如下图所示:
根本用法
变量(Variables)
用 @
申明变量并应用:
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
输入:
#header {
width: 10px;
height: 20px;
}
理解更多对于变量的信息 …
混合(Mixins)
混合(Mixins)是一种将一个规定集中的一堆属性蕴含(或混入)到另一个规定集中的办法。因而,假如咱们有以下类:
.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
作为 mixins。)
理解更多对于 Mixins 的信息 ……
嵌套(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 的构造。
你还能够应用此办法将伪选择器(pseudo-selectors)与混合(Mixins)捆绑在一起。上面是经典的 clearfix hack(革除浮动技巧),重写为混合(Mixins)(&
示意以后选择器父级):
.clearfix {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
理解更多对于父级选择器的信息 ……
嵌套规定和冒泡
能够像选择器一样嵌套 @media
或 @supports
等 @ 规定(at-rule)
。At-rule 放在顶部,绝对于同一 规定集
中的其它元素的绝对程序放弃不变,这称为冒泡(bubbling)。
.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;}
}
运算(Operations)
算术运算符 +
、-
、*
、/
能够对任何数字、色彩或变量进行运算。如果可能,算术运算符在加、减或比拟之前会进行单位换算。计算的后果以 最左侧操作数 的单位类型为准。如果单位换算有效或失去意义,则疏忽单位。有效的单位换算例如:px 到 cm 或 rad 到 % 的转换。
// 数字转换为雷同的单位
@convert: 5cm + 10mm; // returns 6cm
@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 后果是 4px
// 带变量的示例
@base: 5%;
@filler: @base * 2; // returns 10%
@other: @base + @filler; // 后果是 15%
乘法和除法不会转换数字。在大多数状况下这是没有意义的,一个长度乘以一个长度就失去一个区域,而 CSS 是不反对指定区域的。Less 会依照数字的原样进行操作,并将明确申明的单位类型调配给后果。
@base: 2cm * 3mm; // 后果是 6cm
你还能够对色彩进行算术运算:
@color: (#224488 / 2); // 后果是 #112244
background-color: #112244 + #111; // 后果是 #223355
当然,你可能会发现 Less 的 色调函数 更有用。
calc() 特例
_公布于 [[v3.0.0]](https://github.com/less/less.js/blob/master/CHANGELOG.md) _
为了与 CSS 兼容,calc()
不会计算 Math 表达式,但会计算变量和嵌套函数中的 Math 表达式。
@var: 50vh/2;
width: calc(50% + (@var - 20px)); // 后果是 calc(50% + (25vh - 20px))
本义(Escaping)
本义(Escaping)容许你将任何任意字符串用作属性或变量值。~"anything"
或 ~'anything'
中的任何内容都会原样应用,除了 插值。
@min768: ~"(min-width: 768px)";
.element {
@media @min768 {font-size: 1.2rem;}
}
后果为:
@media (min-width: 768px) {
.element {font-size: 1.2rem;}
}
留神,从 Less 3.5 开始,你能够简略地编写为:
@min768: (min-width: 768px);
.element {
@media @min768 {font-size: 1.2rem;}
}
在 Less 3.5+ 版本中,许多以前须要“引号本义”的状况不再须要。
函数(Functions)
Less 提供了各种函数,能够转换色彩、操作字符串和进行 Math 计算。它们在 Less 函数手册 中有残缺的文档。
应用它们非常简单。以下示例应用 percentage 函数(百分比)将 0.5 转换为 50%,将色彩的饱和度减少 5%,而后将背景色彩设置为亮度减少 25%并旋转 8 度:
@base: #f04615;
@width: 0.5;
.class {width: percentage(@width); // 返回 `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
参见:函数参考
命名空间和拜访器
不要与 CSS
@namespace
或 命名空间选择器(namespace selectors 混同。
有时,出于组织构造或仅仅是为了提供一些封装的目标,你心愿对混合(mixins)进行分组。你能够用 Less 更直观地实现这一需要。假如你想要在 #bundle
下捆绑一些混合(mixins)和变量,以供当前重用或散发:
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {background-color: white;}
}
.tab {...;}
.citation {...;}
}
当初,如果咱们想在 #header a
中混入 .button
类,咱们能够这样做:
#header a {
color: orange;
#bundle.button(); // 也能够写成 #bundle > .button}
留神:如果你不心愿命名空间(例如 #bundle()
)呈现在 CSS 输入中,能够将 ()
增加到命名空间开端,即 #bundle .tab
。
映射(Maps)
从 Less 3.5 开始,你还能够应用混合(mixins)和规定集(rulesets)作为值映射。
#colors() {
primary: blue;
secondary: green;
}
.button {color: #colors[primary];
border: 1px solid #colors[secondary];
}
这将输入预期后果:
.button {
color: blue;
border: 1px solid green;
}
参见:映射(Maps)
作用域(Scope)
Less 中的作用域与 CSS 十分类似。变量和混合(mixins)首先在本地查找,如果找不到,则从“父”作用域继承。
@var: red;
#page {
@var: white;
#header {color: @var; // white}
}
与 CSS 自定义属性一样,混合(mixin)和变量定义不用搁置在援用它们的行之前。因而,以下 Less 代码与后面的示例雷同:
@var: red;
#page {
#header {color: @var; // white}
@var: white;
}
参见:懒加载
正文(Comments)
能够应用块款式和行内正文:
/* 一个块正文 s
* 款式正文!*/
@var: red;
// 单行正文
@var: white;
导入(Importing)
导入的工作形式与预期基本相同。你能够导入 .less
文件,并且其中的所有变量都将可用。对于 .less
文件,扩展名是可选的。
@import "library"; // library.less
@import "typo.css";
理解更多对于导入的信息 ……
总结
以上介绍了 Less 的根本应用,在我的项目的构建过程中,基本上都能用得上,如果想要更深刻的学习,可拜访 犀牛书 的 Less 中文文档。
常识扩大:
- ChatGPT 插件利用场景有哪些?
- OpenAI 服务在所在国家不可应用问题解决方案