css less_LESS CSS –入门指南

CSS预处理程序现已成为Web开发中的主要内容。 它附带具有编程特性(例如变量,函数或Mixin和操作)的普通CSS,这些特性使Web开发人员可以构建模块化,可扩展且更易管理CSS样式

在这篇文章中,我们将研究LESS,LESS是周围最受欢迎CSS预处理器之一,并且已经广泛部署在众多前端框架(如Bootstrap)中。 我们还将逐步介绍基本的实用程序,工具和设置,以帮助您入门和运行LESS

编译器

首先,我们需要设置一个编译器。 根据W3C规范,LESS语法是非标准的。 尽管继承了类似于CSS的特征,但浏览器将无法处理和呈现输出。

以下是LESS代码:

@color-base: #2d5e8b;
.class1 {
	background-color: @color-base;
	.class2 {
		background-color: #fff;
		color: @color-base;
	}
}

编译器将处理代码,并将LESS语法转换为与浏览器兼容CSS格式:

.class1 {
	background-color: #2d5e8b;
}
.class1 .class2 {
	background-color: #fff;
	color: #2d5e8b;
}

有许多用于编译CSS的工具:

使用JavaScript

LESS带有一个less.js文件,该文件确实很容易部署在您的网站中。 创建扩展名为.less的样式表,并使用rel="stylesheet/less"属性将其链接到文档中。

<link rel="stylesheet/less" type="text/css" href="main.less" />

您可以在此处获得JS文件 ,通过Bower软件包管理器下载它,否则直接链接到CDN,如下所示:

<link rel="stylesheet/less" type="text/css" href="main.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>

您已经准备.less ,可以在.less组成样式。 LESS语法将在页面加载时即时编译。 请记住, 在生产阶段不建议使用JavaScript 因为它会严重影响网站的性能

您应该始终事先编译LESS语法,而只提供常规CSS 。 您可以使用Terminal ,类似GruntGulp的Task Runner或图形应用程序来执行此操作。

使用CLI

LESS提供了本机命令行界面(CLI) lessc ,它不仅可以编译LESS语法,还可以处理多个任务。 使用CLI,我们可以对代码进行编码 ,压缩文件并创建源映射。 该命令基于Node.js,可有效地使该命令在Windows,OS X和Linux上运行。

确保已安装Node.js(否则请在此处获取安装程序 ),然后使用以下命令行通过NPM (节点程序包管理器)安装LESS CLI

npm install -g less

现在,您可以使用lessc命令将LESS编译为CSS:

lessc style.less style.css
使用任务运行器

任务运行器是使开发任务和工作流自动化的工具。 我们可以设置安装一个任务运行程序,并将其设置为监视LESS文件中的更改,然后立即将LESS编译为CSS,而不是每次我们都希望编译代码时都运行lessc命令。

如今,此类中的两个流行工具是GruntGulp 。 我们有一系列有关这些工具的文章。 检查您的帖子,以了解如何在工作流程中部署这些工具。

使用图形应用程序

对于那些可能不习惯使用终端和命令行的用户,他们可以选择图形界面。 如今,所有平台上都有大量的应用程序可以编译LESS —有些是免费的,有些是付费的

这是完整的列表:

应用程式 平台 成本
混合物 OS X / Windows 自由
考拉 OS X / Windows / Linux 自由
专业人士 OS X / Windows 免费增值(USD29)
温莱斯 视窗 自由
代码包 OS X 32美元

坦率地说,您选择使用哪种编译器(除JavaScript之外)并不重要,只要该工具能够工作并能补充您的工作流程,那就去做吧。

代码编辑器

您可以使用任何代码编辑器。 只需安装插件或扩展程序即可用适当的颜色突出显示LESS语法,该功能现在可用于几乎所有代码编辑器和IDE,包括SublimeTextNotepad ++VisualStudioTextMateEclipse等

现在我们已经完成了编译器和代码编辑器的设置,接下来可以开始使用LESS语法编写CSS样式了。

LESS语法

与我们所知道的常规CSS不同,LESS的工作方式更像是一种编程语言。 它是动态的,因此希望在此过程中找到一些术语,例如VariablesOperationScope

变数

首先,让我们看一下Variables

如果您使用CSS已经有一段时间了,那么您可能已经编写了这样的内容,其中我们在整个样式表的声明块中分配了重复的值。

.class1 {
	background-color: #2d5e8b;
}
.class2 {
	background-color: #fff;
	color: #2d5e8b;
}
.class3 {
	border: 1px solid #2d5e8b;
}

这种做法实际上很好–直到我们发现自己不得不筛选整个样式表中的一千或更多类似的片段 。 建立大型网站时可能会发生这种情况。 工作将变得乏味。

如果我们使用像LESS这样CSS预处理器,那么上面的实例将不是问题-我们可以使用Variables 。 变量将允许我们存储一个常量值,以后可以在整个样式表中重复使用。

@color-base: #2d5e8b;

.class1 {
	background-color: @color-base;
}
.class2 {
	background-color: #fff;
	color: @color-base;
}
.class3 {
	border: 1px solid @color-base;
}

在上面的示例中,我们将颜色#2d5e8b存储在@color-base变量中。 当您想要更改颜色时,我们只需要更改此变量中的值即可。

除了颜色,您还可以在变量中添加其他值,例如:

@font-family: Georgia
@dot-border: dotted
@transition: linear
@opacity: 0.5
混合蛋白

在LESS中,我们可以使用Mixins在另一个规则集中CSS规则集中重用整个声明。 这是一个例子:

.gradients {
	background: #eaeaea; 
	background: linear-gradient(top, #eaeaea, #cccccc);
	background: -o-linear-gradient(top, #eaeaea, #cccccc); 
	background: -ms-linear-gradient(top, #eaeaea, #cccccc); 
	background: -moz-linear-gradient(top, #eaeaea, #cccccc); 
	background: -webkit-linear-gradient(top, #eaeaea, #cccccc); 
}

在以上代码段中,我们在.gradients类中预设了默认的渐变颜色。 每当我们想要添加渐变时,我们只需以这种方式插入.gradients即可:

div {
	.gradients;
	border: 1px solid #555;
	border-radius: 3px;
}

.box将继承.gradients内部的所有声明块。 因此,以上CSS规则等于以下普通CSS:

div {
	background: #eaeaea; 
	background: linear-gradient(top, #eaeaea, #cccccc);
	background: -o-linear-gradient(top, #eaeaea, #cccccc); 
	background: -ms-linear-gradient(top, #eaeaea, #cccccc); 
	background: -moz-linear-gradient(top, #eaeaea, #cccccc); 
	background: -webkit-linear-gradient(top, #eaeaea, #cccccc); 
	border: 1px solid #555;
	border-radius: 3px;
}

此外,如果您在网站上大量使用CSS3,则可以使用LESS Elements来简化您的工作。 LESS Elements是常见的CSS3 Mixins的集合,我们经常在样式表中使用它们,例如border-radiusgradientsdrop-shadow等。

要使用LESS Elements,只需在您的LESS样式表中添加@import规则,但不要忘记先下载它并将其添加到您的工作目录中。

@import "elements.less";

现在,我们可以重用elements.less提供的所有 ,例如,向div添加3px边框半径,我们可以编写:

div {
	.rounded(3px);
}

有关更多用法,请参阅官方文档

嵌套规则

当用纯CSS编写样式时,您可能还经历了这些典型的代码结构。

nav {
	height: 40px;
	width: 100%;
	background: #455868;
	border-bottom: 2px solid #283744;
}
nav li {
	width: 600px;
	height: 40px;
}
nav li a {
	color: #fff;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
}

在普通CSS中,我们通过首先在每个规则集中定位父元素来选择子元素,如果遵循“最佳实践”原则 ,这将是多余的。

在LESS CSS中,我们可以通过将子元素嵌套在父元素中来简化规则集,如下所示;

nav {
	height: 40px;
	width: 100%;
	background: #455868;
	border-bottom: 2px solid #283744;
	li {
		width: 600px;
		height: 40px;
		a {
			color: #fff;
			line-height: 40px;
			text-shadow: 1px 1px 0px #283744;
		}
	}
}

您还可以使用&符号将伪类 (如:hover分配给选择器。

假设我们要将:hover添加到上面的anchor标签中,我们可以这样编写:

a {
	color: #fff;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
	&:hover {
		background-color: #000;
		color: #fff;
	}
}
操作方式

我们还可以在LESS中执行操作,例如对样式表中的数字,颜色和变量进行加,减,乘和除

假设我们希望元素B比元素A高两倍。在这种情况下,我们可以这样写:

@height: 100px

.element-A {
	height: @height;	
}
.element-B {
	height: @height * 2;
}

如上所示,我们首先将值存储在@height变量中,然后将该值分配给元素A。

在元素B中, 我们可以使用星号运算符(*) 将高度乘以2 ,而不是自己计算高度。 现在,每当我们更改@height变量中的值时, 元素B的高度总是两倍。

在我们之前的教程中查看更多高级操作示例: 设计平滑菜单导航栏

范围

LESS应用了作用域概念,其中变量将首先从本地作用域继承,而当变量在本地不可用时,它将在更大的作用域中进行搜索。

header {
	@color: black;
	background-color: @color;
	nav {
  		@color: blue;
			background-color: @color;
  		a {
				color: @color;
  		}
	}
}

在上面的示例中, header具有黑色背景色,但是nav的背景色将为蓝色,因为它在其本地范围内具有@color变量,而a还将具有从其较近父级nav继承的蓝色。

最终思想

最终,我们希望本文能使您对如何使用LESS以更好的方式编写CSS有一个基本的了解。 刚开始时您可能会觉得有些尴尬,但是随着尝试次数的增加,它肯定会变得容易得多。

我鼓励您参考以下两个教程,以获取更多提示和实践,以帮助您将LESS技能提高到一个新的水平。


翻译自: https://www.hongkiat.com/blog/less-basic/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值