7分钟阅读时间 (1315 字)

在 Joomla 中使用 Less

八月

星期四，01 八月 2013

9852 点击

0 评论

随着网络的发展，开发者的应用程序也取得了巨大的进步。在网站设计领域，最重要的部分之一是样式或 CSS 文件。已经提供了用于开发样式的强大工具，但 CSS 的语法并没有发生根本性的变化，直到 Sass 和 Less 的出现。Less 不是一个新语言，而是一个添加了额外功能的工具，这些功能增加了您已经习惯的样式的能力。这些额外功能使得开发更快、更简单、更易读。在本文中，我们将介绍 Less 的基础知识以及如何在 Joomla 中使用它。

LESS是什么？

LESS是在 Sass 的启发下创建的。简单来说，LESS与 CSS 相同，但增加了额外的功能。这些额外功能使您能够更简单、更快速地创建 CSS。使用 LESS 可以减少您 CSS 代码的复杂性，并防止许多重复。 LESS 的优点之一是您可以在几小时内学会它。您可以通过在页面上放置一个 js 文件、在服务器上安装它或通过 PHP 文件编译 LESS 来使用它，或者通过不同的软件将代码编译成 CSS 文件并将其包含在您的网站上。

LESS 的主要功能

1 – 变量

您肯定也遇到过这样的情况：为多个类添加了颜色，后来又想改变颜色，但改变所有颜色可能有些困难。LESS 使用变量简化了这个过程，您只需要修改一次颜色代码。例如：

/* 正常CSS */

/* 改变所有颜色可能很困难 */

div { color : #eee; }

span { border-color : 1px solid #eee; }

h2 { color : #eee;}

/* LESS */

@color : #eee;

Div { color : @color; }

Span { border-color : 1px solid @color; }

H2 { color : #eee; }

如果您决定将颜色 #eee 更改为 #ddd，只需更改 @color 的定义即可。LESS 会自动更改所有使用 @color 的地方。

@color : #fff;

变量的计算

在 LESS 中，可以对变量进行简单计算。最常见的计算是使用数字，例如 width 或 margin。

@margin : 20px;

.left { margin : @margin * 2; }

.right [ margin : @margin; }

类的复用

LESS 提供了很好的复用类的能力。这实际上是简化的 Mixin。复用类可以使代码更简洁，并且当对一个类进行更改时，也会影响其他类。

.right {

float: right;

text-align : right;

}

.box {

                Border : 1px solid #ddd;

                Border-radius : 5px;

Color : red;

Background : #fff;

}

.anotherbox {

.box;   /* box class will be inserted here */

Color : blue;

.right;

}

使用 Mixin

Mixin 可以像函数一样使用。当您需要在多个地方使用一组属性时，它们非常有用。例如，考虑以下示例：

#links a

{

-webkit-transition:all 0.3s ease-in-out;

-moz-transition:all 0.3s ease-in-out;

-o-transition:all 0.3s ease-in-out;

transition:all 0.3s ease-in-out;

}

.mybuttons

{

-webkit-transition:all 0.2s ease-in-out;

-moz-transition:all 0.2s ease-in-out;

-o-transition:all 0.2s ease-in-out;

transition:all 0.2s ease-in-out;

}

使用 Mixin 可以使这些代码更简洁、更易读、更易写：

.transition(@transition) {

-webkit-transition: @transition;

     -moz-transition: @transition;

       -o-transition: @transition;

         transition: @transition;

}

#links a {

                .transition(all 0.3s ease-in-out);

}

.mybutton {

                .transition(all 0.3s ease-in-out);

}

嵌套代码或 Nested

在编写 CSS 时，您肯定遇到过多次重复使用 id 和 class 的情况。LESS 通过允许您将这些代码嵌套来消除这种重复，以下示例更好地说明了这一点：

/* 正常CSS */

#main ul li { color : red; }

#main ul li a { font-size : 12px;}

#main ul li a span { color : white; }

#main ul li div { font-size : 15px;}

/* LESS 代码 */

#main ul li {

                Color : red;

                A {

font-size : 12px;

                                span { color : white;}

)

                Div { font-size : 15px; }

}

在块内部引用自身类时，应使用 &。

A {

                Color : blue;

                &:hover { color : red; }

                &:active { color : white; }

}

嵌套块的另一个重要用法是使用 media query。

/* LESS 源代码 */

Div {

                Float : left;

@media only screen and (max-width: 580px)

           {

                Float : none;

                Clear : both;

           }

}

颜色函数

LESS 具有多种函数，但其中最常用的是颜色函数。使用这些函数可以轻松地将颜色变亮或变暗，或更改颜色的透明度。为此，可以使用 lighten, darken, fade, saturate 等函数。有关更多信息，请参阅官方文档LESS。

@color : #eee;

Img { box-shadow : 0px 0px 6px fade(@color , 40%) ;}

Img:hover { box-shadow : 0px 0px 6px @color; }

用于 LESS

CrunchApp

您可以使用 CrunchApp 创建和编译 LESS 文件。该软件的重要功能之一是错误检测。

SimpleLess

软件 SimpleLess 在 Windows 和 Mac 上运行。此程序会监视 LESS 文件，并在文件发生变化时对其进行编译。

使用 Less.js

您可以通过将以下文件此文件添加到网站上来动态和动态地编译和执行 LESS 文件。使用此文件的优势包括可以动态更改变量以及无需使用编译器。其缺点包括速度降低以及在禁用 JavaScript 的情况下无法使用。

如何在 Joomla 中使用 LESS

正如 David Hurley 在标题为 Do LESS in Joomla 的文章中所提到的，Joomla 3 版本包含 JUI 库，位于媒体文件夹中的 media/jui/less 路径下。此文件夹包含所有核心和主要 LESS 文件。您可以将这些文件中的任何一个导入（import），然后创建自己的 LESS 文件以更改网站模板。最后，所有文件都会被编译并转换为单个 template.css 文件，这样您的网站就不会有大量的样式文件。

以下是一些主要的 LESS 文件示例：