ottogal: LESS oder SASS oder was?

Hallo in die Runde,

für meine kleinen Websites mache ich die CSS von Hand, verwende insbesondere keinen Preprocessor (womit ich auch keine Erfahrung habe). Was ich freilich gern hätte, wären Variablen, z.B. für Farben.

Was empfehlt ihr mir, um lediglich diese Möglichkeit zu haben, ohne unnötigen Ballast?

Viele Grüße

ottogal

  1. PHP. Den Output am Ende einfach in eine Datei umleiten. Aber damit wirst du warscheinlich langfristig nicht glücklich, wenn du erstmal mehr Flexibilität kennengelernt hast. SCSS gibt's auch noch.

    1. Hallo,

      da rate ich von ab. Ich habe das auch eine Zeitlang gemacht - einfach meine CSSe über getcss.php?file=xxx geholt, in dem PHP Script vorher ein paar Variablen gesetzt und das File included. Natürlich mit Sicherung gegen Injections.

      Hat funktioniert, aber meiner IDE (Netbeans) gar nicht gefallen, es war immer alles rot wo Variablen standen.

      Da Netbeans die Syntax von LESS kennt und den entsprechenden Toolstack unterstützt, habe ich dann LESS verwendet. Ist nicht ganz einfach, man muss eine node.js Instanz zum laufen bringen. Aber irgendwann ging's dann.

      LESS kann auch deutlich mehr als Variablen - geschachtelte Regeln und Mixins sind schon eine feine Sache.

      Das ist kein Plädoyer für LESS oder gegen Sass - es hat sich einfach so ergeben bei mir.

      Rolf

      -- sumpsi - posui - clusi
      1. @@Rolf B

        … LESS verwendet. Ist nicht ganz einfach, man muss eine node.js Instanz zum laufen bringen.

        Bei Sass muss man gar nichts zum Laufen bringen. Jedenfalls nicht, wenn man einen vernünftigen™ Rechner hat. Bei macOS ist Ruby gleich mit am Start, sodass Sass out of the box läuft.

        LESS kann auch deutlich mehr als Variablen - geschachtelte Regeln und Mixins sind schon eine feine Sache.

        Und Sass kann deutlich mehr als LESS – war jedenfalls so, als ich beide mal verglichen hatte. Möglich, dass LESS etwas aufgeholt hat. Ich sehe aber keinen Anlass, dass nochmal zu eruieren.

        LLAP 🖖

        -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      2. Hat funktioniert, aber meiner IDE (Netbeans) gar nicht gefallen, es war immer alles rot wo Variablen standen.

        Das kann ich nicht nachvollziehen. Welche Meldung wird denn im Tooltip angezeigt? Das funktioniert bei mir (PHPStorm) einfach, ist ja schliesslich nur eine PHP-Datei. Da kann man ja auch wunderbar einen Cache vorschalten.

        1. Hallo chorn,

          in der PHP Datei hatte ich keine Fehleranzeige, die hat ja auch nicht viel getan als Variablen zu setzen und das CSS zu includen.

          Aber die includete Styles-Datei habe ich natürlich .css genannt, weil ich dort das Code-Highlighting für CSS haben wollte. Deshalb hat sich Netbeans an den PHP-Variablen gestört. Einen Dateityp "pcss" - CSS mit PHP Variablen - gibt's ja nicht. Mit etwas grübeln hätte ich Netbeans sowas vielleicht beibringen können. Aber mit less (oder sass oder scss) ist ja schon alles da.

          Ich hatte anfangs keine Lust, einen CSS Preprozessor ans Laufen zu bringen, und der Kollege, von dem der Code stammte und der ihn theoretisch auch noch warten können sollte, hatte überhaupt keine Lust auf Toolstack, deswegen hatte ich zuerst die handgemachte Lösung.

          Rolf

          -- sumpsi - posui - clusi
  2. @@ottogal

    für meine kleinen Websites mache ich die CSS von Hand, verwende insbesondere keinen Preprocessor (womit ich auch keine Erfahrung habe). Was ich freilich gern hätte, wären Variablen, z.B. für Farben.

    Das kriegst du mit CSS hin: mit custom properties. ☞ Beispiel

    Achte auch drauf, wie einfach es ist, sämtliche Farben für eine Box (warning) zu ändern.

    Funktioniert in allen modernen Browsern. Wenn es in alten IEs nicht genauso farbig sein muss (muss es nicht, wirklich nicht), sollte das der Weg sein.

    Falls doch, ließe sich der CSS-Code auch durch einen Postprozessor jagen, der dann die custom properties überall durch die entsprechenden Werte ersetzt. Das geht in diesem Fall; aber Achtung: es gibt Einsatzmöglichkeiten für custom properties, die sich nicht mit einem Postprozessor für alte Browser hinbiegen lassen.

    Ansonsten bliebe die Möglichkeit, einen Präprozessor einzusetzen. Ich empfehle Sass1; gar nicht erst LESS in Erwägung ziehen.

    Oder halt – wie schon erwähnt – das Stylesheet serverseitig generieren, z.B. mit PHP.

    LLAP 🖖

    1. Es ist Sass, nicht SASS.

    -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. (muss es nicht, wirklich nicht)

      Puh, für mein Umfeld, konkret für gewerbliche Kunden, ist das eine gewagte Herangehensweise, zumal laut caiuse auch IE11 dann einfach wegfällt - und das ist immerhin der Standardbrowser unter Windows 7. Ich will mich da nicht in Statistiken wälzen, aber so rein aus der Erfahrung begegnet mir das - egal wie schlimm ich das persönlich finde - immer noch am häufigsten auf Kundenkisten. Kommt dann halt auf's Publikum an, mit CSS Grids habe ich da schlechte Erfahrungen gemacht, und das läuft ja unter IE11 wenigstens so halb.

      1. @@chorn

        (muss es nicht, wirklich nicht)

        Puh, für mein Umfeld, konkret für gewerbliche Kunden, ist das eine gewagte Herangehensweise

        Nein.

        Du hast falsch zitiert. Richtig ist:

        Wenn es in alten IEs nicht genauso farbig sein muss (muss es nicht, wirklich nicht)

        Dann liest sich das schon ganz anders.

        zumal laut caiuse auch IE11 dann einfach wegfällt

        Und was genau fällt dann weg? Eventuell etwas Farbe. Ja, und?

        Geht dadurch Funktionalität verloren? Nein. Und falls doch, wurde grundlegend etwas falsch gemacht: nämlich Farbe als alleiniges Unterscheidungsmekmal einzusetzen.

        LLAP 🖖

        -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    2. Das kriegst du mit CSS hin: mit custom properties. ☞ Beispiel

      ...

      Funktioniert in allen modernen Browsern. Wenn es in alten IEs nicht genauso farbig sein muss (muss es nicht, wirklich nicht), sollte das der Weg sein.

      Leider funktioniert es (entgegen caniuse.com) nicht im Edge (auch nicht im aktuellen 41.16299.15.0).

      1. @@ottogal

        Leider funktioniert es (entgegen caniuse.com) nicht im Edge (auch nicht im aktuellen 41.16299.15.0).

        Kann ich nicht nachvollziehen. Bei mir funktioniert es im 15er.

        Screenshot

        LLAP 🖖

        -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  3. Was empfehlt ihr mir, um lediglich diese Möglichkeit zu haben, ohne unnötigen Ballast?

    Ich schmeiß einfach mal styled-components in den Raum. Das ist CSS mit JavaScript Superkräften, aber keine Angst das JavaScript muss nicht vom Browser ausgeführt werden können, der Server kann das machen und ein schmale Stylesheets generieren. Das würde ich vor allem empfehlen, wenn du mit einem Komponenten-basierten Framework wie React oder Vue arbeitest.

  4. Vielen Dank für die aufschlussreichen Hinweise!

    Die custom properties kannte ich noch gar nicht - die werde ich ausprobieren. Mir gefällt, dass man damit ohne externe Mittel wie JS oder Ruby auskommt. (Rücksicht auf Kunden mit älteren Browsern muss ich nicht nehmen.)

    1. Works like a charm!