Ein Tool oder IDE-Plugin, um die Entwicklung von .less-Dateien (Lean CSS) und den CSS-Export zu nutzen

Wenn Sie WENIGER Unterstützung für Visual Studio 2010 benötigen (nützlich, wenn Sie damit Webprojekte entwickeln), können Sie ein Add-In verwenden. Eine mögliche Lösung wurde bereits in Stack Overflow diskutiert .

CSSIsLess

Diese Erweiterung bietet die integrierte Syntaxhervorhebung und automatische Vervollständigung, die bereits in Visual Studio für CSS-Dateien über .less-Dateien verfügbar sind. Eigentlich tut es nur das, keine Kompilierung oder andere weniger spezifische Unterstützung, aber es ist immer noch etwas.

Ich finde das bisher ausreichend für die Entwicklung in Visual Studio 2010, wenn ich es mit meinen anderen etablierten Praktiken kombiniere, die ich in meiner Frage erwähnt habe:

Derzeit verwende ich das Modul Node.js LESS (Lean CSS) ohne das Grunt-Plugin, um CSS-Dateien zu erstellen. Ich habe Shell-Skripte, die den LESS-zu-CSS-Export ausführen, den ich manuell ausführe.

Eine zusätzliche Wendung zum oben Gesagten ist, dass ich meine Shell-Skripte so erstellt habe, dass sie vor dem Projektaufbau ausgeführt werden. Dies erfordert ein gewisses manuelles Einrichten des Projekts und ist ein kleiner Nachteil, aber das Visual Studio -Projekteinstellungsdialogfeld ermöglicht es Ihnen, diesen Einzeiler einfach zu jedem Projekt hinzuzufügen . Das Ergebnis ist, dass die .less-Dateien als CSS an der gewünschten Stelle kompiliert werden, bevor das Projekt erstellt (und möglicherweise bereitgestellt) wird, sodass alle erforderlichen Dateien vorhanden sind.

Dies ist meine Konfiguration, falls es jemanden interessiert:

• Gehen Sie in den Eigenschaften des Webprojekts in Visual Studio zum Build EventsAbschnitt und fügen Sie diesen in das Textfeld Pre-Build ein:

  $(ProjectDir)App_Less\export.$(ConfigurationName).bat &

  Diese Praxis impliziert einige Konventionen, die ich für mich aufgestellt habe:

  • Das Webprojekt hat einen App_LessOrdner (ich habe ihn so benannt, das können Sie nach Belieben ändern), der einige bat-Dateien enthält.
  • Ich verwende einen Ordner pro Thema, und jeder dieser Ordner enthält eine Stammdatei theme.less, die auf alle anderen Less-Dateien verweist. Eine beispielhafte Ordnerstruktur sieht folgendermaßen aus:
    {ApplicationRoot} App_Less Default// default theme theme.less export.Debug.bat exprot.Release.bat

  Derzeit verwende ich 2 bat-Dateien, die ich umschalte, je nachdem, ob ich lokal (im DEBUG-Modus) oder für die Produktion (im RELEASE-Modus) baue. Ich benötige sie im bereits erwähnten Ordner App_Less. Die Skripte sind wie folgt:

  export.Debug.bat :

  lessc %~dp0Default\theme.less > %~dp0..\Styles\Default.css

  export.Release.bat :

  lessc %~dp0Default\theme.less > %~dp0..\Styles\Default.css -x

  Beide Skripte geben das CSS im folgenden Verzeichnis aus:
  {ApplicationRoot} Styles Default.css Abhängig von der Build-Konfiguration rendert der DebugModus das CSS im „vom Menschen lesbaren“ Modus, sodass ich Probleme damit leicht beheben kann. Der ReleaseModus rendert das CSS minimiert, bereit für die Produktion.

• Jedes Mal, wenn ich das Projekt erstelle, werden meine weniger Dateien automatisch in die gewünschte CSS-Datei kompiliert.

Es gibt auch einige Nachteile, die ich mit diesem Ansatz erlebe. Ein Nachteil besteht darin, dass einige gültige CSS3-Konstrukte, die von der standardmäßigen CSS-Syntaxprüfung von Visual Studio nicht erkannt werden, auch in den Less-Dateien unterstrichen werden. Es hat jedoch keine sichtbaren Probleme mit den verschachtelten Deklarationen, die nur in less verfügbar sind, außer wo das >Token verwendet wird.

IntelliJ IDEA unterstützt LESS

CSS

Das neue Refactoring zum Extrahieren von Inline-CSS hilft beim automatischen Extrahieren von Inline-Stilen.

Die Refactorings „Bildvorschau“ und „Bild extrahieren“ sind für die data:uri-Attribute verfügbar.

WENIGER, SASS & SCSS

Breadcrumbs und unterdrückbare Inspektionsunterstützung für LESS-, Sass- und SCSS-Sprachen.

Mehr Informationen:

• http://www.jetbrains.com/editors/html_xhtml_css_editor.jsp?ide=idea
• https://stackoverflow.com/questions/8844342/intellij-idea-11-how-can-i-compile-css-from-less

Dies ist eine weniger erfahrungsbasierte Empfehlung als ich es normalerweise tue, aber trotzdem </warning>.

Ich mag SublimeText wirklich als großartigen Texteditor (der beste , den ich meiner Meinung nach verwendet habe, obwohl ich sicher bin, dass dies ganz leicht zu einem Meinungsstreit führen könnte). Ich habe LESS nicht verwendet - ich wollte es immer wieder ausprobieren, bin aber noch nicht dazu gekommen. Trotzdem habe ich ein paar WENIGER fokussierte Plugins für ST installiert; zwei oder drei davon sollten zusammen alle Ihre Anforderungen erfüllen. Die beiden Plugins sind:

• Less2Css : baut die Less-Dateien direkt aus SublimeText in CSS. (Hat ein paar Optionen, einschließlich automatischer Ausführung beim Speichern)
• LESS : Syntaxhervorhebung und etwas Autovervollständigung.
• CSS Extended Completions : Unterstützt LESS sowie CSS. Dies ist eine hervorragende Option zur automatischen Vervollständigung. Sie werden es wahrscheinlich wollen.

Um Ihre Anforderungen durchzugehen:

• Automatische Codevervollständigung, die die LESS-Konstrukte unterstützt. Idealerweise würde es importierte Dateien erkennen und ihre Definitionen in die Autocomplete-Vorschläge aufnehmen : CSS Extended Completions macht das.
• Syntaxhervorhebung, die das LESS-Format unterstützt: LESS macht das.
• Möglichkeit, die LESS-Dateien über Menü, Schaltfläche oder auf andere einfache Weise in ein kompiliertes CSS zu exportieren. Mit anderen Worten - Build-ähnliches Verhalten: Less2Css tut das.
• Vorzugsweise ein kostenloses Tool (nicht notwendig): Hauptsächlich Alle drei Plugins sind kostenlos. Sublime hat eine kostenlose, zeitlich unbegrenzte Testversion.
• Vorzugsweise eigenständig (kein Node.js mit vorinstalliertem npm oder andere Software von Drittanbietern erforderlich, die vorinstalliert werden muss). Für ein IDE-Plugin bin ich in Ordnung, wenn die IDE mit node.js oder einer anderen Middleware geliefert wird. Der Zweck dieses Punktes ist es, die manuelle Verwaltung von Voraussetzungen zu vermeiden: Außer dem Less2Css - Build-Plugin gibt es keine externen Anforderungen. Für das Less2Css- Plugin müssen Sie nur eine Anforderung (lesscs) installieren und es gibt Anweisungen auf der Less2Css- Seite unter Installation.