Grundfunktionen und Unterschiede zwischen ESS und Sass

Kürzlich bin ich mit Bootstrap in Kontakt gekommen. Die am weitesten verbreiteten CSS-Präprozessoren sind LESS und Sass. Sie alle versuchen, CSS in eine Entwicklungssprache zu integrieren Machen Sie es von einer einfachen Beschreibungssprache zu einer Sprache mit prozeduralen Funktionen. Die Hauptfunktionen sind: Variablen, Mixins, Verschachtelung, Vererbung usw. Wie im Tutorial erwähnt: Der CSS-Präprozessor soll CSS von einem Designer-Tool in ein Entwickler-Tool umwandeln. Aber nachdem ich es gelesen habe, habe ich das Gefühl, dass ich als Front-End-Student, der keine gründliche CSS-Recherche hat, besser nicht zu hoch klettern sollte. Außerdem fühlt es sich übertrieben an, WENIGER zum Schreiben von CSS zu verwenden. Aber rückblickend geht es nicht um Können. . . bulabulabula~~Okay, kommen wir zum Punkt. Ich habe einen sehr guten Artikel ausgewählt und mit Ihnen geteilt: eine sehr klare Einführung in die Grundfunktionen und Unterschiede zwischen LESS und Sass.

Es stellt sich heraus, dass LESS – und Sass – noch viel mehr Möglichkeiten hat. LESS und Sass haben einige Syntax gemeinsam, wie zum Beispiel die folgende:

● Mixins – Klasse innerhalb der Klasse; Parametermischung

– Klassen, die Parameter übergeben können, genau wie Funktionen

● Verschachtelungsregeln

– verschachtelte Klassen innerhalb von Klassen, wodurch wiederholter Code reduziert wird; >

● Operation – in CSS verwendete Mathematik

● Farbfunktion – Sie können bearbeiten Farben;

● Namespace (Namespace) – Gruppenstile, damit sie aufgerufen werden können;

● Geltungsbereich——Lokale Änderung des Stils;

● JavaScript-Zuweisung——Verwendung in der CSS-JavaScript-Ausdruckszuweisung.

Der Hauptunterschied zwischen LESS und Sass besteht darin, dass ihre Implementierung auf JavaScript basiert und daher auf der Clientseite verarbeitet wird. Sass hingegen basiert auf Ruby und wird dann serverseitig verarbeitet. Viele Entwickler entscheiden sich nicht für LESS, da die JavaScript-Engine zusätzliche Zeit benötigt, um den Code zu verarbeiten und das geänderte CSS an den Browser auszugeben. Es gibt viele Möglichkeiten, dies zu tun. Ich habe mich dafür entschieden, während der Entwicklungsphase nur LESS zu verwenden. Nachdem ich mit der Entwicklung fertig war, habe ich die LESS-Ausgabe kopiert und in einen Kompressor und dann in eine separate CSS-Datei eingefügt, um die LESS-Datei zu ersetzen. Eine weitere Möglichkeit besteht darin, Koala zum Kompilieren und Komprimieren Ihrer LESS-Dateien zu verwenden. Beide Optionen minimieren die Ausgabe Ihres Stils und vermeiden so Probleme, die dadurch entstehen könnten, dass der Browser des Benutzers kein JavaScript unterstützt.

WENIGER ist mehr

Einführung

WENIGER in Ihr Projekt einzuführen ist einfach:

1. Laden Sie less.js; herunter.2. Erstellen Sie eine Datei, um Ihre Stile einzufügen, z. B. style.less;

3. Fügen Sie den folgenden Code zum

hinzu 🎜>

Achten Sie auf das rel-Attribut des Links. Sie müssen /less am Ende des Attributwerts verwenden, damit LESS funktioniert. Dann ist es auch notwendig, nach dem Link Scipt einzuführen. Wenn Sie

HTML5-Syntax

verwenden – warum nicht? ——Sie können type="text/css" und type="text/javascript" weglassen.

Variablen

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Wenn Sie Entwickler sind, sollten Variablen Ihre besten Freunde sein. Wenn Sie eine Information (in diesem Fall die Farbe) wiederverwenden möchten, legen Sie sie einfach als Variable fest. Auf diese Weise können Sie Ihre Konsistenz sicherstellen und möglicherweise die mühsame Arbeit des Scrollens durch den Code, um Farbwerte zu finden, des Kopierens, Einfügens usw. reduzieren. Sie können sogar einige HEX-Werte, die Sie zum Rendern dieser Farben benötigen, addieren oder subtrahieren. Schauen Sie sich das Beispiel an:

Der einzige Unterschied zwischen Variablen in LESS und Sass besteht darin, dass LESS @ und Sass $ verwendet. Es gibt auch einige Unterschiede im Umfang, auf die ich später noch eingehen werde.

Mixin

 @blue: #00c;
 @light_blue: @blue + #333;
 @dark_blue: @blue - #333;

Gelegentlich erstellen wir Stilregeln, die in Stylesheets wiederverwendet werden. Niemand hindert Sie daran, mehrere Klassen in einem HTML-Element zu verwenden, aber Sie können dies in einem Stylesheet mit LESS tun. Um dies zu veranschaulichen, habe ich ein kleines Beispiel geschrieben:

In Sass fügen Sie eine @mixin-Deklaration vor der Stilregel hinzu, um anzugeben, dass sie verschachtelt ist. Rufen Sie es dann über @include auf:

.border {
    border-top: 1px dotted #333;
}
article.post {
    background: #eee;
    .border;
}
ul.menu {
    background: #ccc;
    .border;
}

parameter mixin

就像在CSS中有函数功能一样，这些对于那些在现在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我们正在经历的从CSS2到CSS3过渡过程中的很多浏览器私有前缀。Nettuts+有一篇Jeffrey Way写的很赞的视频和文章，内容是包含着由有用的参数组成的文件，他们涵盖了大部分使用各个浏览器私有前缀的CSS3属性。例如，在他们的格式中，一个简单的处理圆角的mixin是这样的：

.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

 在这个例子中，.border-radius有个默认的3px的圆角，但是你可以使用你需要的任何值。.border-radius(10px)将会生成半径为10px的圆角。

Sass中的语法很像LESS，只是使用$声明变量，然后使用前面提到的@mixin和@include来调用。

选择器继承

这个东西LESS并没有提供。通过这个功能，你可以将一个选择器附加到已经预先定义的选择器上，而无需再使用逗号将两者分开的写法了：

.menu {
    border: 1px solid #ddd;
}
.footer {
    @extend .menu;
} 

/* 上面的写法规则和下面的效果是一样的： */
.menu, .footer {
    border: 1px solid #ddd;
}

嵌套规则

在css中嵌套class和ID是避免你的样式干扰或者被别的样式干扰的唯一方法了。但是这可能会很凌乱。使用一个类似于#site-body .post .post-header h2 的选择器毫无吸引力而且会占用大量不必要的空格。使用LESS，你可以嵌套id、class以及标签。对于前面提到的例子，你可以这样写：

#site-body { …
    .post { …
        .post-header { …
            h2 { … }
            a { …
                &:visited { … }
                &:hover { … }
            }
        }
    }
}

上面的代码最终和上面的例子（那一长串的选择器）的效果一样，但是要更容易阅读和理解的多，而且它占用很少的空间。你也可以通过&来引用元素样式到他们的伪元素上，该功能类似于JavaScript中的this。

运算

这可能是你所期望的：使用数字或者变量在你的样式表中实现数学运算！

@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;

声明下，我也意识到我可以除以4来获得@quarter_page变量，但是这里我只是想要演示下圆括号组成“运算顺序”在这里也是可以用的。在使用简写的规则中，小括号也是必须的，比如 border: (@width / 2) solid #000。

Sass在数字上比LESS更专业。它已经可以换算单位了。Sass可以处理无法识别的度量单位并将其输出。这个特性很明显是一个对未来的尝试——证明W3C作出的一些改变。

/* Sass */
2in + 3cm + 2pc = 3.514in
/* LESS */
2in + 3cm + 2pc = Error

Color函数

在文章开头，我提到了LESS如何帮我在编码过程中处理围绕着一个调色板。对此贡献最大的一部分就是颜色函数。加入你用一个标准的蓝色贯穿到你的样式中，然后你想要在表单中用这个蓝色来做一个渐变的按钮。你可以打开Photoshop或者其它的编辑器来获取一个比蓝色较浅的或者较暗的HEX色值来作为渐变色。或者，你可以只是使用LESS中的颜色函数。

@blue: #369;

.submit {
    padding: 5px 10px;
    border: 1px solid @blue;
    background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/
    background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue,10%)), color-stop(100%, @blue)); /*Webkit*/
    background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%);/*Opera*/
    background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/
    background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
}

lighten函数很明显就是用百分比值来减轻颜色，在这个例子中，它将减轻这个基础的蓝色的10%。这种方法可以让我们变化的元素或者其它任何元素的颜色值——只是简单的改变基础颜色而已。这对于主题(模板)来说非常有用。而且，如果你使用参数功能，像上面提到的，你还可以更简单的应用到一些浏览器私有前缀的声明中，比如：.linear-gradient(lighten(@blue), @blue, 100%);。

嗯，最终的效果的确很赞：

很赞的渐变的、基于变量的”Submit”按钮

还有很多其它的色彩函数，比如变暗或者调整颜色的饱和度，甚至你可以旋转色盘来使用其它颜色。我建议亲自尝试下你能想出的（用法）。

Sass貌似有更多的选项——但我并不需要这么多。我个人最常用的还是lighten和darken。如果你想了解更多，可以看一下这篇很详细的介绍。

条件语句与控制

这是一个的确很赞的东东，也是另一个LESS不支持的功能。使用 Sass，你可以使用if { } else { } 条件语句，以及for { }循环。它甚至支持 and、 or和 not，以及 、 = 和 == 等操作符。

/* Sample Sass "if" statement */
@if lightness($color) > 30% {
    background-color: #000;
} @else {
    background-color: #fff;
}
/* Sample Sass "for" loop */

@for $i from 1px to 10px {
    .border-#{i} {
    border: $i solid blue;
    }
}

 名字空间(Namespaces)

名字空间可以用于组织我们的CSS到另一个档次，我们可以将一些公用的样式分组，然后在用的时候直接使用。例如，如果我们创建了一个名为default的样式分组，我们就可以在用到的时候直接从该组中调用。

#defaults {
    .nav_list () {
        list-style: none;
        margin: 0; padding: 0;
    }
    .button () { … }
    .quote () { … }
}

然后，在我们的代码中，如果我们正好在一个nav元素中使用了ul元素，我们就会想到我们需要default样式。那么我们就可以简单的调用它，它也会被直接应用。

   nav ul {
    #defaults > .nav_list;
      }

作用域

作用域是编程中的标配，LESS中也是。如果你在你样式表的root级声明一个变量，它在整个文档中都是可以用的。然而，如果你在一个选择器，比如id或者class中，重新定义了这个变量，那么，它就只能在这个选择器中可用了——当然是重新定义后的新值。

@color: #00c; /* 蓝色 */
#header {
    @color: #c00; /* red */
    border: 1px solid @color; /* 红色边框 */
}
#footer {
    border: 1px solid @color; /* 蓝色边框 */
}

因为我们在#header中重新定义了color变量，变量的值将会是不同的而且只会在该选择器中有效。它之前或者之后的所有地方，如果没有被重新定义，都会保持那个原始的值。

作用域在Sass中稍有不同。在上面的代码中，当@color变量变为红色后，代码中，此处之后的该变量的值，将会被重写（成为红色）。

注释

这一部分比较基础。LESS中允许两种注释写法。标准的CSS注释，/* comment */，是有效的，而且能够通过处理并正确输出。当行注释，// comment，同样可以用但是不能够通过处理也不能被输出，然后，结果是，“无声的”。

导入

导入也相当符合标准。标准的 @import: ‘classes.less’; 处理的很好。然而，如果你想要导入其它的LESS文件，那么文件的扩展名是可选的，所以 @import ‘classes’; 也是可行的。如果你想要导入一些无需LESS处理的内容，你可以使用 .css 扩展 (比如， @import: ‘reset.css’;)。

字符串插入

字符串也是可以用于变量中的，然后通过@{name}来调用。

@base_url : 'www.qianduan.net';

background-image: url("@{base_url}/images/background.png");

转义(Escaping)

可能偶尔会需要引入一个CSS中非法或者LESS无法识别的值。通常是一些IE的hack。要避免抛出异常并破坏LESS，你将需要避开它们。

.class {
    filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";

}
/*实际上将会输出下面的代码: */
.class {
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);

}

 JavaScript 赋值

  这是LESS中我最中意的部分：在样式表中使用Javascript——相当精彩。你可以使用表达式，也可以参考环境方向来使用反单引号。

@string: `'howdy'.toUpperCase()`; /* @string 变成 'HOWDY' */
/* 你也可以使用前面提到的插值： */
@string: 'howdy';
@var: ~`'@{string}'.topUpperCase()`; /* 变为 'HOWDY' */
/* 获取文档的信息 */
@height = `document.body.clientHeight`;

 输出格式

  然而LESS并没有输出设置，而Sass提供4中输出选项：nested, compact, compressed 和 expanded。

结束语

   这两个方法有很多共同点。对写代码的设计师来说，它们都是很酷的工具，它们也可以帮助开发者更有效和快速的工作。如果你是koala或HTML的粉丝，那么Sass会是你的好助手。对我来说，一个PHP和JavaScript极客，我倾向于LESS，因为它便于引入和能够使用JavaScript的表达式以及文档属性。我怀疑我甚至接近真正理解在样式表中编程的可能行了，但是我仍坚持尝试。如果你在工作中有用到它们中的一个，或者两个都用，我很乐意听到关于它的更多内容，并看到你的成果。当然，技巧、诀窍、更正一直是很欢迎的。

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

Das obige ist der detaillierte Inhalt vonGrundfunktionen und Unterschiede zwischen ESS und Sass. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!