less ist eine auf CSS basierende Erweiterungstechnologie
.less konvertiert das Dateiformat über einen Parser (z. B. Koala) in CSS.
@Variablennamenswert
Syntax
Variable
LESS ermöglicht Entwicklung Oder passen Sie Variablen an. Variablen können in globalen Stilen verwendet werden. Variablen erleichtern das Ändern des Stils.
Wir können die Verwendung und Funktion von Variablen anhand des folgenden Codes verstehen:
Liste 3 LESS-Datei
@border-color: #b5bcc7
.mythemes tableBorder{
border : 1px solid @border-color;
}
Die kompilierte CSS-Datei lautet wie folgt:
Listing 4. CSS-Datei
.mythemes tableBorder {
border: 1px solid #b5bcc7;
}
Aus dem obigen Code können wir ersehen, dass Variablen auf der VALUE-Ebene (Wert) wiederverwendet werden und derselbe Wert als Variable für eine einheitliche Verwaltung definiert werden kann.
Diese Funktion eignet sich zum Definieren von Themen, z. B. Hintergrundfarbe, Schriftfarbe und Rahmenattribute, sodass für verschiedene Themen nur unterschiedliche Variablendateien definiert werden müssen. Natürlich gilt diese Funktion auch für CSS RESET (Reset Style Sheet). In der Webentwicklung müssen wir häufig das Standardstilverhalten des Browsers abschirmen und das Stylesheet neu definieren, um das Standardverhalten des Browsers zu überschreiben Merkmale, sodass Stylesheets zwischen verschiedenen Projekten wiederverwendet werden können. Wir müssen lediglich Variablen in verschiedenen Projekt-Stylesheets entsprechend den Anforderungen neu zuweisen.
Variablen in LESS können wie andere Programmiersprachen auch einen Lebenszyklus haben, der Scope ist (Variablenbereich, Entwickler nennen ihn normalerweise Scope). Die Reihenfolge der Suche nach Variablen besteht darin, zuerst in der lokalen Definition zu suchen. Wenn sie nicht gefunden werden kann, durchsuchen Sie die übergeordnete Definition bis zur globalen Definition. Im Folgenden erklären wir Scope anhand eines einfachen Beispiels.
Listing 5. LESS-Datei
@width : 20px;// Dies sollte übernommen werden Der Wert der kürzlich definierten Variablenbreite beträgt 30px
}
}
#leftDiv {
width : @width; // Der Wert der oben definierten Variablenbreite sollte 20px
sein
}
Die kompilierte CSS-Datei lautet wie folgt:
Listing 6. CSS-Datei
#homeDiv #centerDiv {
width: 30px;
}
#leftDiv {
width: 20px;
}
Mixins (Mixin)
Die Funktion Mixins (Mixin) ist für Entwickler nicht unbekannt. In LESS bedeutet Mischen das Einfügen einer anderen definierten KLASSE in eine KLASSE, genau wie das Hinzufügen eines Attributs zur aktuellen KLASSE.
Lassen Sie uns einen kurzen Blick auf die Verwendung von Mixins in LESS werfen:
Listing 7. LESS-Datei
// Definieren Sie einen Stilselektor
.roundedCorners(@radius:5px) {
-moz -border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius; }
// Verwenden Sie #header {
.roundedCorners;
}
#footer {
.roundedCorners(10px);
}
Die kompilierte CSS-Datei lautet wie folgt:
Listing 8. CSS-Datei
#header {
-moz-border-radius:5px;
border-radius:5px
#footer { -moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px; Art der Verschachtelung, die es ermöglicht, eine Klasse in eine andere Klasse einzubetten. Die eingebettete Klasse kann auch als Variable bezeichnet werden. Vereinfacht ausgedrückt handelt es sich bei Mixins tatsächlich um eine Wiederverwendung auf Regelebene.
Mixins haben auch eine Form namens Parametric Mixins (Mischparameter), LESS unterstützt auch diese Funktion:
Listing 9. LESS-Datei
// Definiere einen Stilselektor
.borderRadius(@radius) {
-moz-border-radius: @radius;
border-radius: @radius;
// Den definierten Stilselektor verwenden
#header {
.borderRadius(10px); // 10px als Parameter an den Stilselektor übergeben
}
.btn {
.borderRadius(3px);// // 3px übergeben als Parameter für den Stilselektor
}
经过编译生成的 CSS 文件如下：
清单 10. CSS 文件
#header {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.btn {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
我们还可以给 Mixins 的参数定义一人默认值，如
清单 11. LESS 文件
.borderRadius(@radius:5px){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
.btn {
.borderRadius;
}
经过编译生成的 CSS 文件如下：
清单 12. CSS 文件
.btn {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
像 JavaScript 中 arguments一样，Mixins 也有这样一个变量：@arguments。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。
清单 13. LESS 文件
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
#header {
.boxShadow(2px,2px,3px,#f36);
}
经过编译生成的 CSS 文件如下：
清单 14. CSS 文件
#header {
-moz-box-shadow: 2px 2px 3px #FF36;
-webkit-box-shadow: 2px 2px 3px #FF36;
box-shadow: 2px 2px 3px #FF36;
}
Mixins 是 LESS 中很重要的特性之一，这里也写了很多例子，看到这些例子你是否会有这样的疑问：当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？如果你是 java 程序员或 C++ 程序员，我猜你肯定会想到命名空间 Namespaces，LESS 也采用了命名空间的方法来避免重名问题，于是乎 LESS 在 mixins 的基础上扩展了一下，看下面这样一段代码：
清单 15. LESS 文件
#mynamespace {
.home {...}
.user {...}
}
这样我们就定义了一个名为 mynamespace 的命名空间，如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user。
嵌套的规则
在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写：
清单 16. HTML 片段
清单 17. WENIGER 文件
#home{
Farbe : blau;
Breite: 600 Pixel;
Höhe: 500px;
border:outset;
#top{
border:outset;
Breite: 90 %;
}
#center{
border:outset;
Höhe: 300px;
Breite: 90 %;
#left{
border:outset;
float: links;
Breite: 40 %;
}
#right{
border:outset;
float: links;
Breite: 40 %;
}
Breite: 600px;
Höhe: 500px;
Grenze: Anfang;
}
#home #top {
border: outset;
Breite: 90 %;
}
#home #center {
border: outset;
Höhe: 300px;
Breite: 90 %;
}
#home #center #left {
border: outset;
float: links;
Breite: 40 %;
}
#home #center #right {
border: outset;
float: links;
Breite: 40 %;
我们的样式表书写更加简洁和更好的可读性
清单 19. WENIGER 文件
a {
Farbe: rot;
Textdekoration: keine;
&:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
Farbe: schwarz;
Textdekoration: unterstrichen;
}
}
经过编译生成的 CSS-Standard:
清单 20. CSS-Standard
a {
color: red;
Textdekoration: keine;
}
a:hover {
Farbe: schwarz;
Textdekoration: unterstrichen;
运算及函数
在我们的 CSS 中充斥着大量的数值型的Wert, Farbe, Polsterung, Rand某些情况下是有着一定关系的,那么我们怎样利用 WENIGER 来组织我们这些数值之间的关系呢？我们来看这段代码:
清单 21 . WENIGER 文件
@init: #111111;
@transition: @init*2;
.switchColor {
color: @transition;
}
经过编译生成的 CSS 文件如下:
清单 22. CSS 文件
.switchColor {
color: #222222;
}
上面的例子中使用 LESS 的 operation 是 特性，其实简单的讲，就是对数值型的 value（数字、颜色、变量等）进行加减乘除四则运算.同时 WENIGER 还有一个专门针对 Farbe 的操作提供一组函数.下面是 WENIGER 提供的针对颜色操作的函数列表:
Aufhellen(@Farbe, 10 %); // eine Farbe zurückgeben, die 10 % *heller* als @color ist
dunkler(@color, 10 %); // eine Farbe zurückgeben, die 10 % *dunkler* als @color ist
saturate(@color, 10 %); // eine Farbe zurückgeben, die 10 % *mehr* gesättigt ist als @color
desaturate(@color, 10 %);// eine Farbe zurückgeben, die 10 % *weniger* gesättigt ist als @color
fadein(@color, 10 % ); // eine Farbe zurückgeben, die 10 % *weniger* transparent ist als @color
fadeout(@color, 10 %); // eine Farbe zurückgeben, die 10 % *transparenter* ist als @color
spin(@color, 10); // eine Farbe mit einem um 10 Grad größeren Farbton als @color zurückgeben
spin(@color, -10); // eine Farbe mit einem um 10 Grad kleineren Farbton als @color zurückgeben和 JavaScript 中使用函数一样.
清单 23 LESS 文件
init: #f04615;
#body {
Hintergrundfarbe: fadein(@init, 10 %);
}
经过编译生成的 CSS 文件如下:
清单 24. CSS 文件
#body {
background-color: #f04615;
这些函数的主要作用是提供颜色变换的功能,先把颜色转换成 HSL 色,然后在此基础上进行操作,LESS WENIGER 提供的运算及函数特性适用于实现页面组件特性,比如组件切换时的渐入渐出.
Kommentare (注释）)了支持,主要有两种方式:单行注释和多行注释JavaScript-Code: 中的注释方法一样.是不能显示在编译后的 CSS 中, 所以如果你的注释是针对样式说明的请使用多行注释.
LESS VS SASS
Zu den ähnlichen Frameworks gehören SASS und LESS. Beide verwenden eine ähnliche Programmiersprache zum Schreiben von CSS und verfügen über Funktionen wie Variablen, Mischen, Verschachteln und Vererbung zum Schreiben und Pflegen von CSS.
LESS und SASS fördern und beeinflussen sich gegenseitig. Im Vergleich dazu ist LESS näher an der CSS-Syntax
