[SASS/SCSS-Tools] Prepros & Koala konfigurieren

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.1/3.2, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
Benutzeravatar
Melmac
Supporter
Supporter
Beiträge: 2055
Registriert: 15.10.2012 03:27

[SASS/SCSS-Tools] Prepros & Koala konfigurieren

Beitragvon Melmac » 12.08.2017 00:17

Beim Entwickeln bzw. dem späteren Einsatz von Styles, in denen die CSS-Erweiterung SASS zum Einsatz kommt, müssen nach Änderungen an den Stylesheets diese neu kompiliert werden, um wirksam zu werden.

Hierbei kommen sogenannte Präprozessoren zum Einsatz, die den SASS-Syntax wieder in "reguläres" CSS übersetzen und den so verarbeiteten Code der Stylessheets in einer Datei vereint wieder ausgeben, sodass nur noch diese bei einem Seitenaufruf ausgelesen werden muss.

Neben den kommerziellen Programmen kommen für den Anwender hierfür u.a. auch zwei infrage, die für den nicht-kommerziellen Einsatz kostenlos verwendet werden können: Prepros und Koala.
Beide funktionieren nach der Installation zwar in den meisten Fällen "out-of-the-box", allerdings ist ihre jeweilige Grundkonfiguration nicht immer ideal.
In diesem Beitrag will ichl daher die Konfigurationen beschreiben, die sich bei mir bisher am besten bewährt haben.

  1. Prepros:

    1. Das Konfigurationsmenü durch Klick auf das Menü-Icon links oben öffnen
      config_prepros_01.png
      config_prepros_01.png (5.1 KiB) 402 mal betrachtet

      Im ausklappenden Submenü gibt es drei Optionen: App Settings (=> Aussehen der Arbeitsoberfläche, Benachrichtigungsoptienen etc.), Activate Prepros (nicht erforderlich bei nicht-kommerziellem Einsatz) und Project Defaults.
      config_prepros_02.png
      config_prepros_02.png (8.44 KiB) 402 mal betrachtet

    2. Project Defaults öffnen
      Links befindet sich eine Spalte mit den verschiedenen Optionsgruppen, die, einmal angepasst, für alle neuen Projekte übernommen werden.
      (Jedes Projekt kann aber weiterhin auch hiervon abweichend individuell konfiguriert werden.)
      Diese der Reihe nach anklicken und die markierten Optionen wie folgt abändern


      • General:
        "Export Config" deaktivieren.
        config_prepros_03.png

      • Compiler Settings > SASS:
        Die Option "Source Map" deaktivieren.
        Alle anderen Optionen können wie original konfiguriert beiben (siehe Bild)
        config_prepros_04.png


      • Other Settings > Autoprefixer:
        Falls bei der Definition einer Eigenschaft keine Vendor-Präfixe gesetzt sind, die aber aus Kompatibilitätsgründen erforderlich wäre, dann werden diese beim Kompilieren automatisch erzeugt und eingefügt.
        Der hier einzugebende Wert entspricht der Anzahl der letzten Browserversionen, ausgehend von der aktuellen Version.
        config_prepros_05.png

      • Alle anderen hier nicht genannten Optinsgruppen können im ursprünglichen Setting erhalten bleiben.
      • Beim Schließen/Einklappen werden die geänderten Werte automatisch übernommen.

  2. Koala:
    Das Konfigurationsfester durch Klicken auf das Zahnradsymbol öffnen
    config_koala_01.png
  3. Die links gelisteten Optionsgruppen so wie in den folgenden Abbildungen konfigurieren:

    1. Allgemein:
      config_koala_02.png
    2. SASS:
      config_koala_03.png
    3. Alle anderen Optionsgruppen: auf den Vorgabewerten belassen
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)

Zurück zu „Styles, Templates und Grafiken“