Lohnt es sich, haml & sass zu lernen?

Question

In Ihrer beruflichen Erfahrung haben haml & sass erwies sich als nützlich? Auf welche Weise?

Answer 1

Haml ist nett, und ich benutze es sehr, aber Sass ist es allein wert, besonders wenn Sie komplexe Stylesheets erstellen müssen. Eines der schlimmsten Dinge an CSS ist beispielsweise, wie viel Redundanz Sie bei der Benennung von Selektoren vornehmen müssen. In CSS müssen Sie

#navbar ul 
#navbar ul li a 
#navbar ul li a:hover 

Mit Sass können Sie einfach diese Nachkommen natürlich verschachteln.

#navbar 

    ul 
    margin: 0 
    padding: 0 
    list-style: none 
    width: 100% 

    li 
     margin: 0 
     float: left 
     margin-right: 10px 
     border: 1px solid #000 

     a 
     text-decoration: none 

     &:hover 
      color: red 

Sie auch Variablen

!border_color = #333 

.box 
    border = 1px "solid" !border_color 

verwenden können und Sie mit ihnen Mathe

!measure = 18px 
!text_size = !measure/1.5 

body 
    font-size = !text_size 
    line-height = !measure 

h1 
    font-size = !measure 
    margin-bottom = !measure 

h2 
    font-size = !measure + 2 

#wrapper 
    width = !measure * 50 

Sie können auch

=rounded 
    -moz-border-radius: 4px 
    -webkit-border-radius: 4px 
    border-radius: 4px 
    border: 1px solid #000 

.box 
+rounded 

Es gibt so viel Macht in teilen Code verwenden können Das schuldest du dir selbst um es zu lernen. Außerdem ist das Endergebnis einfaches CSS, so dass es konvertiert werden kann.

Vergessen Sie nicht über css2sass, die Ihre vorhandenen CSS in Sass-Dateien konvertiert! Sie können mit einigen Beispielen unter http://rendera.heroku.com/ spielen, wenn Sie möchten. Es ist eine Site, die ich gebaut habe, um den Leuten zu helfen, HTML5 und CSS3 zu lernen, und ich habe dort sowohl Unterstützung für HAML als auch für SASS.

Werfen Sie einen Blick auf StaticMatic (staticmatic.rubyforge.org) für eine erstaunliche Möglichkeit, statische Website-Arbeit mit HAML und SASS zu tun. Es generiert Websites, die Sie auf statische Hosts hochladen können, und verfügt über ein Layout- und Vorlagensystem ähnlich wie Ruby on Rails.

Um die direkte Frage, die Sie gestellt haben, zu beantworten: "Ist es das wert?" Lautet die Antwort ja. Die Möglichkeit, Variablen zu verwenden, Dinge einfach per Selektor zu gruppieren und Code über Module zu teilen, macht komplexe Stylesheets viel einfacher. Die Erstellung der Stylesheets dauert nicht lange und Sie können das hervorragende Compass-Framework verwenden, um noch weiter zu gehen. Sie können beispielsweise die Frameworks 960.gs oder Blueprint in Ihre vorhandenen Stylesheets einfügen. Auf diese Weise müssen Sie das Markup Ihres Codes nicht ändern. Das Hinzufügen von 960.gs und seinen Klassen "grid_12" und "container_12" für alle Ihre Markups ist möglicherweise nicht möglich, aber mit Compass und Sass ist es ein Kinderspiel.

Sass macht es auch einfacher, mehrere Stylesheets für Entwicklungsmodus zu haben, und ein einzelnes Stylesheet für die Produktion erzeugen, wodurch die clientseitige Verbesserung der Leistung (weniger Anrufe an den Server beim Laden der Seite.)

HAML hat seine eigenen Vorteile obwohl sie nicht so auffallen wie Sass. HAML macht es zu nisten Elemente unglaublich einfach und DIVS erklärt ... mit sogar regelmäßig 960.gs zum Beispiel mit HAML leicht:

#header.container_12 
    .grid_12 
    %h1 Welcome! 
#middle.container_12 
    .grid_8 
    %h2 Main content 
    .grid_4 
    %h3 Sidebar 

Viel weniger tippen. Und wenn Sie sich entscheiden, dass Sie aus irgendeinem Grund einen Wrapper für all das hinzufügen müssen, fügen Sie das Ganze unter ein neues Tag ein.

Hoffe, dass hilft. I < 3 Sass.

Answer 2

Meine aktuelle Website hat über 800 Haml-Dateien und 150 Sass-Dateien, und ich kann Ihnen sagen, dass es meiner Entwicklung enorm geholfen hat.

Der größte Segen ist die schnelle Entwicklung: Die Erstellung von Haml/Sass-Dateien erfordert viel weniger Schreibaufwand, so dass Sie Ihre Präsentationslogik mit weitaus weniger Tastenanschlägen als mit einer Vorlage erstellen können.

Ich finde auch Haml-Dateien viel einfacher zu lesen, und weniger fehleranfällig.

YMMV, aber ich habe den Punkt erreicht, dass Haml nicht wie eine lästige Pflicht fühlt.

Answer 3

TL; DR - Obwohl ich populär bin, bevorzuge ich nicht, HAML oder SASS zu verwenden, aber ich mag SCSS.

Es scheint, dass der allgemeine Konsens über HAML überwältigend dafür ist, aber persönlich interessiert mich das nicht.

Wenn ich HTML generieren möchte, dann bevorzuge ich die Template-Sprache, um so HTML wie möglich zu sein. Dadurch wird vermieden, dass eine andere Indirektionsebene gelernt werden muss, was zu Verwirrung und Fehlern führt und kognitiven Overhead verursacht.

Ich finde die Einschränkungen, die HAML auf meine bevorzugte Verwendung von Leerzeichen für Lesbarkeit und Zeilenumbruch setzt, um lästig zu sein und führt oft zu einer Syntax, die schwer zu lesen sein kann.

Vor kurzem traf ich einen subtilen Fehler in einer HAML Vorlage, die sofort klar gewesen wäre, wenn die Vorlage ERB zum Beispiel ist:

.table 
    .thead 
    .tr 
    .tr 

Die Tabellenzeilen sind nicht im THEAD-Tag, das ist perfekt gültiges HAML, aber falsch in Bezug auf die beabsichtigte HTML-Struktur. Während die Seite korrekt gerendert wurde, ist ein CSS-Selektor fehlgeschlagen, was zu einem stillen Fehler von JavaScript-Code geführt hat.

Ich bin sicher, diese Art von Fehler wäre für die meisten HAML-Benutzer offensichtlich, wie isoliert gezeigt, aber im Kontext einer größeren Vorlage kann es schwer zu erkennen sein; vor allem für einen neuen Entwickler von HAML.

Auf der anderen Seite, wenn diese ERB oder HTML waren:

<table> 
    <thead> 
    <tr>...</tr> 
    <tr>...</tr> 

In meinen Augen

, in der Struktur der Fehler viel leichter ist, aufgrund der Art und Weise ERB und HTML zu erkennen sind fast immer eingerückt.

Nachdem ich fast zwei Jahrzehnte HTML geschrieben habe, muss ich zugeben, dass ich einen gewissen Stolz darin habe, wohlgeformtes HTML zu schreiben, und ich sehe keinen Grund, eine andere Art der Darstellung zu lernen und all die neuen visuellen Muster zu lernen Fehler.

Auf der anderen Seite mag ich SCSS (im Gegensatz zu SASS) sehr, weil SCSS im Wesentlichen eine Obermenge von CSS ist. Es fügt nicht eine völlig neue Ebene der Indirektion hinzu, die ich mental übersetzen muss. Es fügt nur eine bescheidene Änderung in der Syntax hinzu, die eine prägnantere (und trockenere) Darstellung von CSS bietet, die ich sehr leicht zu lesen und zu verstehen finde.

In der Tat, ich bevorzuge keine Sprache zu verwenden, die eine strenge Syntax in Bezug darauf, wie ich meinen Code wie Python einrücken oder Zeilenumbruch erzwingen sollte. Oder Sprachen, die nur als indirekte Schicht über einer zugrunde liegenden Sprache wie coffeescript dienen.

Ich sage nicht, dass ich glaube, dass Abstraktion und Indirektion in Programmiersprachen schlecht sind; nur, dass ich es vorziehe, sie nicht in Bezug auf die hier besprochenen Sprachen zu verwenden.