Lohnt es sich, haml & sass zu lernen?

Question

In Ihrer Berufserfahrung haben haml & sass als nützlich erwiesen? In welcher Art und Weise?

Answer 1

Haml ist schön, und ich benutze es viel, aber Sass lohnt sich allein, vor allem, wenn Sie komplexe Sheets zu bauen. Zum Beispiel, eine der schlimmsten Dinge über CSS ist, wie viel Redundanz Sie tun müssen, wenn Selektoren zu benennen. In CSS, müssen Sie tun

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

Mit Sass, können Sie einfach Nest dieser decendants natürlich.

#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 können auch Variablen verwenden

!border_color = #333

.box
  border = 1px "solid" !border_color

Und Sie können mit ihnen verwenden Mathematik

!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 Code teilen

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

.box
 +rounded

Es gibt so viel Energie in das, dass Sie schulden es sich selbst, es zu lernen. Plus, das Endergebnis ist klar, CSS, so kann es umgesetzt werden.

Vergessen Sie nicht, über css2sass, die sass Dateien Ihrer vorhandenen CSS konvertiert!

Sie können mit einigen Beispielen spielen unter http://rendera.heroku.com/ , wenn Sie würde mögen. Es ist eine Website, die ich zu den Menschen helfen, gebaut lernen HTML5 und CSS3, und ich habe die Unterstützung für beide HAML und SASS gibt.

Nehmen Sie auch, einen Blick auf StaticMatic (staticmatic.rubyforge.org) für eine erstaunliche Art und Weise mit HAML und SASS statische Web-Site zu tun. Es erzeugt Webseiten, die Sie auf statische Hosts hochladen und hat ein Layout und Template-System ähnlich wie Ruby on Rails.

die direkte Frage zu beantworten, würden wir Sie bitten, durch „es lohnt sich“, ist die Antwort ja ist. Die Möglichkeit, Variablen zu verwenden, leicht Gruppe Dinge durch den Wähler und Aktiencode über Module macht komplexe Sheets viel einfacher. die Stylesheets Der Aufbau dauert nicht lange überhaupt, und Sie können den ausgezeichneten Compass Rahmen gehen sogar noch weiter verwenden. Zum Beispiel können Sie die 960.gs oder Blueprint-Module verwenden, um diese Frameworks in Ihre bestehenden Sheets zu mischen. Auf diese Weise müssen Sie nicht das Markup des Codes ändern. Hinzufügen 960.gs und seine „grid_12“ und „container_12“ Klassen, um alle Ihre Markup vielleicht nicht möglich sein, aber mit Kompass und Sass es ist 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 (wenige Anrufe an den Server beim Laden der Seite.)

HAML hat seine eigenen Vorteile, obwohl sie als Sass nicht so stark bemerkbar sind. HAML tut es macht unglaublich einfach zu nisten Elemente und declare DIVS ... sogar regelmäßig 960.gs zum Beispiel verwendet, ist einfach, mit HAML:

#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, Sie brauchen einen Wrapper um all das aus irgendeinem Grunde hinzuzufügen, Einzug nur das Ganze unter einem neuen Tag.

Ich hoffe, das hilft. I <3 Sass.

Answer 2

Meine aktuelle Website verfügt über mehr als 800 Haml Dateien und 150 Sass-Dateien, und lassen Sie mich Ihnen sagen, es hat sich enorm meiner Entwicklung geholfen.

Der größte Segen ist im Hinblick auf die schnelle Entwicklung. Dateien Haml / Sass Schaffung weit weniger tippen erfordert, so dass Sie Ihre Präsentationslogik mit wesentlich weniger Tastenanschläge Nagel heraus kann, als wenn man eine erb-Vorlage taten

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

YMMV, aber ich habe den Punkt erreicht, der nicht mit Haml wie eine lästige Pflicht empfindet.

Answer 3

TL; DR - Während beliebt, ziehe ich es nicht HAML oder SASS verwenden, aber ich mag SCSS

.

Es scheint, dass der allgemeine Konsens über HAML ist überwältigend für sie, aber persönlich ist mir egal, denn es.

Wenn meine Absicht ist, HTML zu erzeugen, dann ziehe ich die Template-Sprache so nahe wie möglich HTML zu sein. Dadurch wird eine weitere Schicht von Dereferenzierung zu lernen, die auch für Verwirrung und Fehler Gelegenheit fügt als kognitive Aufwand entstehen.

ich die Einschränkungen feststellen, dass HAML Orte auf meine bevorzugte Verwendung von Leerzeichen zur besseren Lesbarkeit und Zeilenumbruch beschwerlich zu sein und führt oft zu einer Syntax, die schwierig sein kann, zu lesen.

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

 .table
   .thead
   .tr
   .tr

Die Tabellenzeilen sind nicht im THEAD-Tag, das absolut gültiges HAML ist, aber falsch in Bezug auf die HTML-Struktur bestimmt. Während die Seite richtig zu machen schien, ein CSS-Selektor ist fehlgeschlagen, was in einer stillen Ausfall einiger Javascript-Code zur Folge.

Ich bin sicher, dass diese Art von Fehlern, den meisten HAML Benutzer offensichtlich sein würde, wie es in Isolation gezeigt, sondern im Rahmen einer größeren Vorlage, kann es schwierig sein, zu erkennen; insbesondere an einen Entwickler neu zu HAML.

Auf der anderen Seite, wenn dies ERB oder HTML:

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

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

Nach fast zwei Jahrzehnten das Schreiben HTML ausgegeben, muss ich zugeben, dass ich einen gewissen Stolz haben gut gebildet HTML in schriftlicher Form, und ich sehe keinen Grund, eine andere Art und Weise zu lernen, sie zu vertreten und alle neuen visuellen Mustern Lernen benötigt Fehler zu erkennen .

Auf der anderen Seite habe ich sehr viel wie SCSS (im Gegensatz zu SASS gegen), weil SCSS im Wesentlichen eine Obermenge von CSS ist. Sie stellen keine völlig neue Ebene der Indirektheit hinzufügen, dass ich mental übersetzen müssen. Es fügt nur eine bescheidene Veränderung der Syntax, die eine knappe (und DRY) Darstellung von CSS bietet, die ich sehr leicht finden zu lesen und zu verstehen.

Ja, ziehe ich es nicht auf eine Sprache verwenden, die eine strenge Syntax erzwingt darüber, wie ich einrücken sollte oder Linie meinen Code wickeln wie Python. Oder Sprachen, die nur als indirection Schicht auf einer darunterliegenden Sprache wie Coffeescript dienen.

Ich sage nicht, dass ich glaube, Abstraktion und indirection schlecht sind Sprachen in der Programmierung; nur, dass ich es vorziehen, sie nicht in Bezug auf den spezifischen verwenden Sprachen hier diskutiert wird.