2017-12-14 4 views
2

Ich habe in einige der Square Template-Design-Ressourcen suchen, um besser eine vorhandene Vorlage zu verstehen .. Das hat mich bei Less suchen, und ich bin nicht sicher, ich sehe, wo es passt in Die Dokumentation erwähnt Node.js und kompiliert Less, es scheint, als ob es im Grunde JavaScript-ähnliches Zeug in CSS ist.Squarespace-Vorlagen und weniger CSS

Ich bin nicht sicher, ich sehe, was weniger ist fügt hinzu, dass nicht auch mit irgendeiner Form von JavaScript erreicht werden, und da es scheint, wie es braucht sowieso JavaScript. Ich bin mir nicht sicher, ob ich nur den Sinn von Less verpasse oder dass etwas, was es tut, in JavaScript nicht funktioniert, das ich nicht sehe.

+0

Weniger ist definitiv mehr. Mach weiter. Der entscheidende Punkt hinter Less ist, dass Sie weniger CSS verwenden, Ihre Stylesheets kompakter und lesbarer halten und nützliche Funktionen wie Variablendefinitionen (für Farbe oder Größe) usw. einführen. – Paul

Antwort

2

Alles Weniger ist mit Javascript erreicht werden, aber es wäre es nicht praktisch, mit dem Stylesheet in jedem Fall zu manipulieren.

in weniger, etwa wie folgt:

@link-color: #428bca; 

a { 
    color: @link-color; 
} 

wie dies im Klar JS aussehen:

const linkColor = '#428bca'; 
document.getElementsByTagName('a').forEach(link => { 
    link.style.color = linkColor; 
}); 

Sie sind der Browser weit mehr Arbeit zu interpretieren Javascript geben und einen Stil Einstellung als dien Es ist eine generierte CSS-Datei, die Less ausgibt.

Es ist auch eine Trennung von Bedenken. In der Regel verwenden Sie HTML für das Layout, CSS für das Styling und JavaScript für die Interaktion und das Aufnehmen von Teilen, bei denen CSS nicht ausreicht.

Für die beste Leistung verwenden Sie diese in der gewünschten Reihenfolge.

Weniger muss zunächst CSS konvertiert werden, damit der Browser es interpretieren kann und Javascript nicht erforderlich zu arbeiten. Wenn Sie in Ihrer Vorlage in Squarespace eine Less-Datei einfügen, die automatisch konvertiert wird, erhalten Sie keinen zusätzlichen Overhead in den Zeichenstilen auf der Seite, wodurch die Seite schneller wird.