CINXE.COM
phpBB.de • [SASS/SCSS-Tools] Prepros & Koala konfigurieren
<!DOCTYPE html> <html dir="ltr" lang="de"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="robots" content="noindex" /> <title>phpBB.de • [SASS/SCSS-Tools] Prepros & Koala konfigurieren</title> <link href="./styles/phpBBdev1/theme/print.css" rel="stylesheet"> </head> <body id="phpbb" class="ltr"> <div id="wrap" class="wrap"> <a id="top" class="top-anchor" accesskey="t"></a> <div id="page-header"> <h1>phpBB.de</h1> <p>phpBB.de - Die deutsche phpBB-Community<br /><a href="https://www.phpbb.de/community/">https://www.phpbb.de/community/</a></p> <h2>[SASS/SCSS-Tools] Prepros & Koala konfigurieren</h2> <p><a href="https://www.phpbb.de/community/viewtopic.php?t=240078">https://www.phpbb.de/community/viewtopic.php?t=240078</a></p> </div> <div id="page-body" class="page-body"> <div class="page-number">Seite <strong>1</strong> von <strong>1</strong></div> <div class="post"> <h3>[SASS/SCSS-Tools] Prepros & Koala konfigurieren</h3> <div class="date">Verfasst: <strong>12.08.2017 00:17</strong></div> <div class="author">von <strong>Melmac</strong></div> <div class="content">Beim Entwickeln bzw. dem sp盲teren Einsatz von Styles, in denen die CSS-Erweiterung <a href="http://sass-lang.com/" class="postlink">SASS</a> zum Einsatz kommt, m眉ssen nach 脛nderungen an den Stylesheets diese neu kompiliert werden, um wirksam zu werden.<br> <br> 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.<br> <br> 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: <a href="https://prepros.io/" class="postlink">Prepros</a> und <a href="http://koala-app.com/" class="postlink">Koala</a>.<br> Beide funktionieren nach der Installation zwar in den meisten F盲llen "out-of-the-box", allerdings ist ihre jeweilige Grundkonfiguration nicht immer ideal. <br> In diesem Beitrag will ichl daher die Konfigurationen beschreiben, die sich bei mir bisher am besten bew盲hrt haben.<br> <ol style="list-style-type:decimal"> <li><strong class="text-strong"><span style="text-decoration:underline">Prepros:</span></strong><br> <ol style="list-style-type:lower-alpha"> <li>Das Konfigurationsmen眉 durch Klick auf das Men眉-Icon links oben 枚ffnen <div class="inline-attachment"> <dl class="file"> <dt class="attach-image"><img src="./download/file.php?id=686&sid=eaf3593b34cd5a0a05d34be055f40594" class="postimage" alt="config_prepros_01.png" onclick="viewableArea(this);" /></dt> <dd>config_prepros_01.png (5.1 KiB) 7222 mal betrachtet</dd> </dl> </div> 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. <div class="inline-attachment"> <dl class="file"> <dt class="attach-image"><img src="./download/file.php?id=687&sid=eaf3593b34cd5a0a05d34be055f40594" class="postimage" alt="config_prepros_02.png" onclick="viewableArea(this);" /></dt> <dd>config_prepros_02.png (8.44 KiB) 7222 mal betrachtet</dd> </dl> </div></li> <li>Project Defaults 枚ffnen<br> Links befindet sich eine Spalte mit den verschiedenen Optionsgruppen, die, einmal angepasst, f眉r alle neuen Projekte 眉bernommen werden.<br> (Jedes Projekt kann aber weiterhin auch hiervon abweichend individuell konfiguriert werden.)<br> Diese der Reihe nach anklicken und die markierten Optionen wie folgt ab盲ndern<br> <ul> <li>General:<br> "Export Config" deaktivieren. <div class="inline-attachment"> <dl class="thumbnail"> <dt><a href="./download/file.php?id=688&sid=eaf3593b34cd5a0a05d34be055f40594&mode=view"><img src="./download/file.php?id=688&t=1&sid=eaf3593b34cd5a0a05d34be055f40594" class="postimage" alt="config_prepros_03.png" title="config_prepros_03.png (29.5 KiB) 7222 mal betrachtet" /></a></dt> </dl> </div></li> <li>Compiler Settings > SASS:<br> Die Option "Source Map" deaktivieren.<br> Alle anderen Optionen k枚nnen wie original konfiguriert beiben (siehe Bild) <div class="inline-attachment"> <dl class="thumbnail"> <dt><a href="./download/file.php?id=689&sid=eaf3593b34cd5a0a05d34be055f40594&mode=view"><img src="./download/file.php?id=689&t=1&sid=eaf3593b34cd5a0a05d34be055f40594" class="postimage" alt="config_prepros_04.png" title="config_prepros_04.png (60.65 KiB) 7222 mal betrachtet" /></a></dt> </dl> </div></li> <li>Other Settings > Autoprefixer:<br> 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.<br> Der hier einzugebende Wert entspricht der Anzahl der letzten Browserversionen, ausgehend von der aktuellen Version. <div class="inline-attachment"> <dl class="thumbnail"> <dt><a href="./download/file.php?id=690&sid=eaf3593b34cd5a0a05d34be055f40594&mode=view"><img src="./download/file.php?id=690&t=1&sid=eaf3593b34cd5a0a05d34be055f40594" class="postimage" alt="config_prepros_05.png" title="config_prepros_05.png (21.18 KiB) 7222 mal betrachtet" /></a></dt> </dl> </div></li> <li>Alle anderen hier nicht genannten Optinsgruppen k枚nnen im urspr眉nglichen Setting erhalten bleiben.</li> <li>Beim Schlie脽en/Einklappen werden die ge盲nderten Werte automatisch 眉bernommen.</li></ul></li></ol></li> <li><strong class="text-strong"><span style="text-decoration:underline">Koala:</span></strong><br> Das Konfigurationsfester durch Klicken auf das Zahnradsymbol 枚ffnen <div class="inline-attachment"> <dl class="thumbnail"> <dt><a href="./download/file.php?id=691&sid=eaf3593b34cd5a0a05d34be055f40594&mode=view"><img src="./download/file.php?id=691&t=1&sid=eaf3593b34cd5a0a05d34be055f40594" class="postimage" alt="config_koala_01.png" title="config_koala_01.png (45.91 KiB) 7222 mal betrachtet" /></a></dt> </dl> </div></li> <li>Die links gelisteten Optionsgruppen so wie in den folgenden Abbildungen konfigurieren:<br> <ol style="list-style-type:lower-alpha"> <li>Allgemein: <div class="inline-attachment"> <dl class="thumbnail"> <dt><a href="./download/file.php?id=692&sid=eaf3593b34cd5a0a05d34be055f40594&mode=view"><img src="./download/file.php?id=692&t=1&sid=eaf3593b34cd5a0a05d34be055f40594" class="postimage" alt="config_koala_02.png" title="config_koala_02.png (34.15 KiB) 7222 mal betrachtet" /></a></dt> </dl> </div></li> <li>SASS: <div class="inline-attachment"> <dl class="thumbnail"> <dt><a href="./download/file.php?id=693&sid=eaf3593b34cd5a0a05d34be055f40594&mode=view"><img src="./download/file.php?id=693&t=1&sid=eaf3593b34cd5a0a05d34be055f40594" class="postimage" alt="config_koala_03.png" title="config_koala_03.png (42.35 KiB) 7222 mal betrachtet" /></a></dt> </dl> </div></li> <li>Alle anderen Optionsgruppen: auf den Vorgabewerten belassen</li></ol></li></ol></div> </div> <hr /> </div> <div id="page-footer" class="page-footer"> <div class="page-number">Alle Zeiten sind <span title="Europa/Berlin">UTC+01:00</span><br />Seite <strong>1</strong> von <strong>1</strong></div> <div class="copyright"> <p>Powered by <a href="https://www.phpbb.com/">phpBB</a>® Forum Software © phpBB Limited </p> <p>Deutsche 脺bersetzung durch <a href="https://www.phpbb.de/">phpBB.de</a> </p> </div> </div> </div> </body> </html>