less 使用 :not_有效地使用LESS：提示和工具

最新推荐文章于 2024-07-21 22:27:18 发布

cune1359

最新推荐文章于 2024-07-21 22:27:18 发布

阅读量2k

点赞数

文章标签： python linux java 大数据编程语言

在之前的教程中，我们学习了如何通过利用ChrunchApp之类的应用程序来编译代码，从而以实际方式使用LESS 。这次，我们将介绍一些方便的技巧，这些技巧将在编译LESS语法时提高我们的性能和生产率。我们将通过为当前的编辑器启用语法高亮显示，使用自动编译器工具并利用预设的Mixins，然后将它们全部同步来设置桌面/工作环境。

好吧，如果您准备好了，那就开始吧。

免责声明：以下解释的技巧来自于我作为网页设计师的日常经验。因此，在进一步研究之前，我想概述一下这些技巧可能适合某些设计师而非其他设计师。就像您在网络上找到的其他任何提示一样。尽管如此，我希望您可以从以下提示中获得一些有用的信息。

1.代码荧光笔

如前所述，我们已经向您介绍了ChrunchApp。但是，此应用程序可能并非每个Web设计师都喜欢。因为每个设计师都有自己的工作环境，包括他们选择的代码编辑器。

实际上，您仍然可以使用当前的代码编辑器并启用其中的语法突出显示功能，而不是安装其他代码编辑器。因此，在本文中，我将分享一些技巧，以将LESS代码突出显示添加到2个著名的文本编辑器中： Sublime Text 2和Notepad ++ 。

崇高文字2

目前，我是首选此编辑器来帮助我编写代码。该应用程序可用于Windows，Linux和OSX，因此无论您使用哪种操作系统，您都仍然可以按照此提示操作。

现在，让我们从其官方网站下载它并尝试使用此编辑器。然后，阅读以下说明以在其中启用LESS颜色突出显示。

安装软件包控制台

首先，打开Sublime Text 2，然后从该菜单中显示控制台。

然后，将以下命令行复制并粘贴到控制台中，然后按Enter键以从wBond.net安装软件包控件：

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

该软件包控制台将帮助我们安装突出显示软件包。

安装LESS-highlighting程序包

重新启动Sublime Text 2并从此菜单工具>命令面板中显示命令面板 。等待直到软件包列表全部加载完毕。然后，键入Install Package来搜索和加载软件包系统信息库。

然后，从存储库列表中搜索LESS包，然后按Enter。

等待一分钟，让Sublime Text 2下载并安装软件包，直到状态栏中显示以下通知。

转到菜单视图>语法 ，您应该在列表上看到LESS。这意味着Sublime Text 2支持.less并且您的LESS语法现在也应该具有适当的颜色突出显示。

记事本++

Notepad ++是一个免费的开源代码编辑器，并且具有许多有用的插件来扩展其功能。它也被许多Web设计人员/开发人员广泛使用，尤其是那些使用Windows操作系统的开发人员。因此，我决定还包括为该提示添加LESS文本突出显示的提示。

在记事本++中安装LESS-highlight

在Notepad ++中启用LESS颜色突出显示非常容易。

首先从此链接（ userDefineLang_LESS.xml ）下载适用于Notepad ++的LESS软件包。然后，转到查看>用户定义的对话 。

将出现以下弹出框。单击导入...按钮，然后找到您下载的.xml文件。然后，重新启动记事本++。

打开您的.less文件，然后转到“语言”菜单。您现在应该看到包括LESS。选择它可以在LESS语法上应用颜色突出显示。

2. LESS编译器

与具有内置LESS编译器的ChrunchApp不同，其他编辑器默认情况下将不具有它。尽管有一些方法可以包含它，但是对于一般用户而言，它是相当技术性的。因此，我最好的解决方案是使用以下工具进行编译： WinLESS或LESS.app 。 WinLESS是为Windows设计的编译器，而LESS.app是为OSX构建的。

这些工具可以在保存文件时自动将LESS代码转换为静态CSS，并在代码错误时直接报告。好吧，让我向您展示该工具的实用性：

首先，我想下载并安装WinLESS。

单击添加文件夹按钮，然后找到放置.less文件的目录（我假设您已经创建了至少一个）。一旦添加一个； WinLESS将扫描并找到所有.less文件，并在列表中显示您。

进入菜单File> Setting ，并确保选中了这些选项；

保存时自动编译文件
在成功编译时显示消息

我们也可以设置输出文件夹，以防我们要将其保存到其他位置。但是，在此示例中，我们将保持此选项不变。这意味着输出文件将与.less文件保存在同一目录中。

从添加的目录中打开.less文件，进行一些更改并保存。

当文件已成功编译为.css或代码中有错误时，WinLESS会通知您。这样，您可以直接检查.css输出，而不必等待代码完成对其进行编译。

如果您使用的是Mac，你可以使用LESS.app具有相同functinality为胜绩。

预设混音

在当前的现代网页设计实践中，我们将使用CSS3属性，例如Gradient，Shadow或Border Radius，如下所示：

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

要么

background: -moz-linear-gradient(top, #f0f9ff 0%, #a1dbff 100%); 
background: -webkit-linear-gradient(top, #f0f9ff 0%,#a1dbff 100%); 
background: -o-linear-gradient(top, #f0f9ff 0%,#a1dbff 100%); 
background: -ms-linear-gradient(top, #f0f9ff 0%,#a1dbff 100%);
background: linear-gradient(top, #f0f9ff 0%,#a1dbff 100%);

在之前的教程中，我们做了一些Mixins来简化此语法。幸运的是，Web设计社区中的某些人确实很慷慨，可以抽出时间来编译这些有用的Mixins，因此我们不需要从头开始自己编译它。

而且，我最喜欢的元素之一是Less Elements ，它包含许多有用CSS3预设规则。因此，我们现在从繁琐的供应商前缀中编写更少的代码行。

好吧，现在，让我们看看以上所有这些技巧如何真正起作用。

将它们放在一起

在此示例中，我将创建一个简单的链接按钮。首先，我想创建一个新HTML文档并添加以下标记：

<head>
<title>LESS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a rel="external" href="#">Click Me</a>
</body>

创建一个styles.less作为我们的主要LESS样式表，将其保存在与HTML文档相同的文件夹中，然后将该文件夹添加到WinLESS。

导入使用以下语法之前下载的elements.less ：

@import "elements.less";

现在，我们可以使用从elements.less提供的任何.gradient ，例如.gradient ， .rounded和.bordered 。我确定Mixins的名称很容易解释。

接下来，在样式表中将LESS规则放在下面。并且，再次保存

a {
	display: inline-block;
	padding: 10px 20px;
	color: #555;
	text-decoration: none;
	.bw-gradient(#eee, 240, 255);
	.rounded;
	.bordered;
	&:hover {
		.bw-gradient(#eee, 255, 240);
	}
}

由于我们的.less文件已添加到WinLESS，因此它将自动编译为.css 。现在让我们看一下结果。

好吧，考虑到此按钮创建的行数少于需要的行数，不是很糟糕。并且，这是实际生成的静态CSS：

a {
  display: inline-block;
  padding: 10px 20px;
  color: #555;
  text-decoration: none;
  background: #eeeeee;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f0f0f0), color-stop(1, #ffffff));
  background: -ms-linear-gradient(bottom, #f0f0f0 0%, #f0f0f0 100%);
  background: -moz-linear-gradient(center bottom, #f0f0f0 0%, #ffffff 100%);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border-top: solid 1px #eeeeee;
  border-left: solid 1px #eeeeee;
  border-right: solid 1px #eeeeee;
  border-bottom: solid 1px #eeeeee;
}
a:hover {
  background: #eeeeee;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, #f0f0f0));
  background: -ms-linear-gradient(bottom, #ffffff 0%, #ffffff 100%);
  background: -moz-linear-gradient(center bottom, #ffffff 0%, #f0f0f0 100%);
}

综上所述

这是我们在本文中讨论的内容的快速摘要：

通过在当前编辑器中启用语法高亮显示，我们不需要仅安装其他编辑器来编写LESS语法。这样可以在磁盘上节省一些空间/内存。
我们也不再需要像在上一个教程中那样下载LESS.js库并将其链接到HTML头部分。这样，我们HTML文档将保持整洁。
使用WinLESS和LESS.app等编译器工具可以立即生成静态CSS输出。因此，如果语法有问题，我们可以立即进行检查。
像LESS Elements这样的预设Mixin是我们最好的朋友。编译冗长CSS3属性时，它确实可以节省我们的时间。

我们到了技巧的最后一部分。希望您会喜欢并发现它们对您当前或将来的Web项目有帮助。感谢您阅读提示。如果您有任何评论，请立即在下面的评论框中发布。

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

cune1359

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
less 使用 :not_有效地使用LESS：提示和工具

在之前的教程中，我们学习了如何通过利用ChrunchApp之类的应用程序来编译代码，从而以实际方式使用LESS 。这次，我们将介绍一些方便的技巧，这些技巧将在编译LESS语法时提高我们的性能和生产率。我们将通过为当前编辑器启用语法高亮显示，使用自动编译器工具并利用预设的Mixins，然后将它们全部同步来设置桌面/工作环境。好吧，如果您准备好了，那就开始吧。免责声明：以下解释...
复制链接

扫一扫