{"id":3704,"date":"2017-12-29T09:00:54","date_gmt":"2017-12-29T08:00:54","guid":{"rendered":"https:\/\/pb.lochbronner.com\/uncategorized\/css-entwicklung-sass\/"},"modified":"2017-12-29T09:00:54","modified_gmt":"2017-12-29T08:00:54","slug":"css-entwicklung-sass","status":"publish","type":"post","link":"https:\/\/www.lochbronner.com\/en\/thema-webdesign\/css-entwicklung-sass\/","title":{"rendered":"CSS development with Sass: more efficient &amp; faster"},"content":{"rendered":"<p>Je umfangreicher ein Website-Projekt ist, desto l\u00e4nger und un\u00fcbersichtlicher werden auch die CSS Dateien. Bevor man also mal eben etwas am Aussehen \u00e4ndern m\u00f6chte, muss man sich erst durch unz\u00e4hlige Zeilen Code k\u00e4mpfen, um die richtige Stelle zu finden. Fehler schleichen sich ein, Werte k\u00f6nnen nicht wiederverwendet werden, Passagen wiederholen sich. Als CSS-Anwender wirft man wehm\u00fctig einen Blick zu anderen (Programmier-) Sprachen, welche \u00fcber n\u00fctzliche Funktionen wie Variablen und Co. verf\u00fcgen.<\/p>\n<h2>CSS Pr\u00e4prozessoren<\/h2>\n<p>Zum Gl\u00fcck gibt es f\u00fcr dieses Problem eine L\u00f6sung in Form von CSS Pr\u00e4prozessoren. Der Name verr\u00e4t bereits, dass diese am Anfang des Workflows zum Einsatz kommen. Aus schlanken Dateien, in denen \u201eVariablen\u201c, \u201eFunktionen\u201c und \u201eMixins\u201c verwendet werden k\u00f6nnen, entstehen so die fertigen CSS-Dateien. Die bekanntesten Vertreter sind derzeit Sass, LESS und Stylus. Welcher dieser Pr\u00e4prozessoren zum Einsatz kommt, h\u00e4ngt unter anderem vom jeweiligen Projekt sowie den eigenen Vorlieben ab. In diesem Beitrag m\u00f6chten wir uns Sass genauer ansehen, welches wir auch selbst f\u00fcr die Erstellung von (WordPress) Websites nutzen.<\/p>\n<h2>Sass (Syntactically Awesome Stylesheets)<\/h2>\n<p>Nach eigenen Angaben ist Sass \u201cthe most mature, stable, and powerful professional grade CSS extension language in the world.\u201d Es ist im Jahr 2007 erschienen und wurde von Hampton Catlin entwickelt. Auf der offiziellen Website finden sich viele Beispiele sowie eine ausf\u00fchrliche Dokumentation: <a href=\"http:\/\/sass-lang.com\/\">sass-lang.com<\/a><\/p>\n<p>Die Kernfunktionen und damit Basis von Sass sind:<\/p>\n<ul>\n<li><a href=\"#Variablen\">Variables (Variablen)<\/a><\/li>\n<li><a href=\"#Nesting\">Nesting (Verschachtelung)<\/a><\/li>\n<li><a href=\"#Import\">Import<\/a><\/li>\n<li><a href=\"#Mixins\">Mixins (wiederkehrende Funktionen bzw. Vorlagen)<\/a><\/li>\n<li><a href=\"#Extend\">Extend \/ Inheritance (Erweiterung \/ Vererbung)<\/a><\/li>\n<li><a href=\"#Operators\">Operators (Operatoren)<\/a><\/li>\n<\/ul>\n<p>Mehr zu den einzelnen Funktionen erfahrt ihr im Folgenden.<\/p>\n<h2><a id=\"Variablen\"><\/a>Variablen<\/h2>\n<p>Wer kennt das nicht: bestimmte Werte wie HEX-Codes werden seiten\u00fcbergreifend eingesetzt, m\u00fcssen aber jedes Mal wieder neu getippt werden. Sind viele verschiedene Farben im Einsatz, ist es zudem oftmals nicht sofort ersichtlich, welches Snippet man jetzt kopieren soll. Abhilfe schaffen da Variablen, welchen man einfach die gew\u00fcnschten Werte zuteilt. Diese kann man dann an jeder Stelle wiederverwenden.<\/p>\n<h3>Beispiel f\u00fcr Variablen (SCSS)<\/h3>\n<pre><code>$font-family: 'Roboto', sans-serif;\n$font-color: #111;\n\nbody {\n   font: $font-family;\n   color: $font-color;\n}<\/code><\/pre>\n<p>Dieser Code wird umgewandelt in:<\/p>\n<pre><code>body {\n   font: 'Roboto', sans-serif;\n   color: #111;\n}<\/code><\/pre>\n<h2><a id=\"Nesting\"><\/a>Nesting<\/h2>\n<p>Anders wie bei HTML verf\u00fcgt CSS \u00fcber keine M\u00f6glichkeit der Verschachtelung. Sass dagegen schon, und dies erspart nicht nur Arbeit, sondern f\u00f6rdert auch die \u00dcbersichtlichkeit.<\/p>\n<h3>Beispiel f\u00fcr Nesting (SCSS)<\/h3>\n<pre><code>.highlight {\n   h1 {\n      color: yellow;\n   }\n\n   a {\n      text-decoration: underline;\n   }\n\n   p {\n      font-weight: bold;\n      font-size: 1.5rem;\n   }\n}<\/code><\/pre>\n<p>Dieser Code wird umgewandelt in:<\/p>\n<pre><code>.highlight h1 {\n   color: yellow;\n}\n\n.highlight a {\n   text-decoration: underline;\n}\n\n.highlight p {\n   font-weight: bold;\n   font-size: 1.5rem;\n}<\/code><\/pre>\n<h2>Import<\/h2>\n<p>Zwar bietet CSS bereits eine Import Funktion, jedoch wird dabei lediglich per HTTP eine weitere CSS Datei angefordert. Bei Sass k\u00f6nnen dagegen mehrere Dateien zu einer einzigen zusammengef\u00fcgt werden.<\/p>\n<h3>Beispiel f\u00fcr Import anhand von style.scss und _font.scss (SCSS)<\/h3>\n<pre><code>\/\/ style.scss\n\nbody {\n   background-color: #eee;\n}\n\n@import \u2018font\u2019;\n\nfooter {\n   display: block;\n}<\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre><code>\/\/ _font.scss\n\nh1 {\n   font-size: 2rem;\n   color: #aaa;\n}<\/code><\/pre>\n<p>Diese beiden getrennten SCSS Dateien werden kombiniert und man erh\u00e4lt folgenden Code:<\/p>\n<pre><code>body {\n   background-color: #eee;\n}\n\nh1 {\n   font-size: 2rem;\n   color: #aaa;\n}\n\nfooter {\n   display: block;\n}<\/code><\/pre>\n<p>Es empfiehlt sich bei gr\u00f6\u00dferen Projekten mit einer sinnvollen Anzahl solcher Importdateien zu arbeiten, damit die \u00dcbersicht erhalten werden kann. Ein weiterer Vorteil ist, dass so einzelne Module auch in einem anderen Projekt verwendet werden k\u00f6nnen. Es ist zu beachten, dass die Namen der zu importierenden SCSS Dateien mit einem Unterstrich beginnen m\u00fcssen.<\/p>\n<h2><a id=\"Mixins\"><\/a>Mixins<\/h2>\n<p>Wiederkehrende Funktionen und Vorlagen, Mixins genannt, sind eine weitere n\u00fctzliche Erweiterung, die euch das Arbeiten mit CSS Dateien erleichtert. Eine einmal erstellte Vorlage l\u00e4sst sich beliebig oft im gesamten Projekt verwenden.<\/p>\n<h3>Beispiel f\u00fcr Mixins (SCSS)<\/h3>\n<pre><code>@mixin border-radius($radius) {\n   -webkit-border-radius: $radius;\n   -moz-border-radius: $radius;\n   -ms-border-radius: $radius;\n   border-radius: $radius;\n}\n\n.button {\n   @include border-radius(20px);\n}<\/code><\/pre>\n<p>Dieser Code wird folgenderma\u00dfen interpretiert:<\/p>\n<pre><code>.button {\n   -webkit-border-radius: 20px;\n   -moz-border-radius: 20px;\n   -ms-border-radius: 20px;\n   border-radius: 20px;\n}<\/code><\/pre>\n<h2><a id=\"Extend\"><\/a>Extend \/ Inheritance<\/h2>\n<p>Eine weitere M\u00f6glichkeit, \u00fcberfl\u00fcssigen Code einzusparen. Bestehende CSS Selektoren werden einfach durch Platzhalter erweitert.<\/p>\n<h3>Beispiel f\u00fcr Extend \/ Inheritance (SCSS)<\/h3>\n<pre><code>%meldung {\n   border: 2px dotted #000;\n   padding: 5px 10px;\n   font-weight: 800;\n}\n\n.nachricht {\n   @extend %meldung;\n}\n\n.erfolg {\n   @extend %meldung;\n   color: green;\n}\n\n.error {\n   @extend %meldung;\n   color: red;\n}\n\n.warnung {\n   @extend %meldung;\n   color: yellow;\n}<\/code><\/pre>\n<p>Dieser Code wird umgewandelt zu:<\/p>\n<pre><code>.nachricht, .erfolg, .error, .warnung {\n   border: 2px dotted #000;\n   padding: 5px 10px;\n   font-weight: 800;\n}\n\n.erfolg {\n   color: green;\n}\n\n.error {\n   color: red;\n}\n\n.warnung {\n   color: yellow;\n}<\/code><\/pre>\n<h2><a id=\"Operators\"><\/a>Operators<\/h2>\n<p>Hin und wieder ist es in CSS n\u00f6tig, mathematische Berechnungen anzustellen. Sass bringt daf\u00fcr die n\u00f6tigen Operatoren mit.<\/p>\n<h3>Beispiel f\u00fcr Operators (SCSS)<\/h3>\n<pre><code>.main {\n   width: 800px \/ 960px * 100%;\n}<\/code><\/pre>\n<p>Daraus wird dann:<\/p>\n<pre><code>.main {\n   width: 83.33333%;\n}<\/code><\/pre>\n<h2>Wie erhalte ich nun meine fertige CSS-Datei?<\/h2>\n<p>Hierf\u00fcr ben\u00f6tigt ihr einen passenden Compiler. Wir verwenden aktuell <a title=\"Prepros\" href=\"https:\/\/prepros.io\/\">Prepros<\/a> f\u00fcr Windows, es gibt allerdings auch noch zahlreiche andere Vertreter wie beispielsweise <a href=\"https:\/\/codekitapp.com\/\">CodeKit<\/a> (Mac) und <a href=\"http:\/\/compass-style.org\/\">Compass<\/a> (Windows + Mac).<\/p>\n<p>[Update: seit 2017 gibt es jetzt auch ohne Pr\u00e4prozessor die M\u00f6glichkeit Variablen einzusetzen, siehe dazu <a title=\"CSS Custom Properties\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_variables\">CSS Custom Properties<\/a>; wir empfehlen trotzdem weiterhin den Einsatz von Pr\u00e4prozessoren wie Sass oder LESS, da Variablen ja nicht das einzige Feature ist.]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Je umfangreicher ein Website-Projekt ist, desto l\u00e4nger und un\u00fcbersichtlicher werden auch die CSS Dateien. Bevor man also mal eben etwas am Aussehen \u00e4ndern m\u00f6chte, muss man sich erst durch unz\u00e4hlige Zeilen Code k\u00e4mpfen, um die richtige Stelle zu finden. Fehler schleichen sich ein, Werte k\u00f6nnen nicht wiederverwendet werden, Passagen wiederholen sich. Als CSS-Anwender wirft man [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":3705,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[19],"tags":[20,21,22,23,24,25],"class_list":["post-3704","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-thema-webdesign","tag-code","tag-css","tag-praeprozessor","tag-sass","tag-scss","tag-webdesign"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Warum CSS-Entwicklung mit Sass effizienter ist - Webdesign Blog<\/title>\n<meta name=\"description\" content=\"Die CSS Entwicklung mit dem Pr\u00e4prozessor Sass erm\u00f6glicht den effizienten Einsatz von Variablen, Funktionen, Vorlagen, Mixins uvm. Gro\u00dfe Projekte profitieren dadurch enorm und bleiben stets \u00fcbersichtlich. Einzelne Teile (Partials) k\u00f6nnen ausgelagert und f\u00fcr andere Projekte weiterverwendet werden.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.lochbronner.com\/en\/thema-webdesign\/css-entwicklung-sass\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Warum CSS-Entwicklung mit Sass effizienter ist - Webdesign Blog\" \/>\n<meta property=\"og:description\" content=\"Die CSS Entwicklung mit dem Pr\u00e4prozessor Sass erm\u00f6glicht den effizienten Einsatz von Variablen, Funktionen, Vorlagen, Mixins uvm. Gro\u00dfe Projekte profitieren dadurch enorm und bleiben stets \u00fcbersichtlich. Einzelne Teile (Partials) k\u00f6nnen ausgelagert und f\u00fcr andere Projekte weiterverwendet werden.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.lochbronner.com\/en\/thema-webdesign\/css-entwicklung-sass\/\" \/>\n<meta property=\"og:site_name\" content=\"Sebastian Lochbronner\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-29T08:00:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.lochbronner.com\/wp-content\/uploads\/2022\/05\/css-sass.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sebastian Lochbronner\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sebastian Lochbronner\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.lochbronner.com\\\/thema-webdesign\\\/css-entwicklung-sass\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.lochbronner.com\\\/thema-webdesign\\\/css-entwicklung-sass\\\/\"},\"author\":{\"name\":\"Sebastian Lochbronner\",\"@id\":\"https:\\\/\\\/www.lochbronner.com\\\/#\\\/schema\\\/person\\\/3064163d41408dc5ab9a392b77f9979b\"},\"headline\":\"CSS-Entwicklung mit Sass: effizienter &#038; schneller\",\"datePublished\":\"2017-12-29T08:00:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.lochbronner.com\\\/thema-webdesign\\\/css-entwicklung-sass\\\/\"},\"wordCount\":676,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.lochbronner.com\\\/thema-webdesign\\\/css-entwicklung-sass\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.lochbronner.com\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/css-sass.jpg\",\"keywords\":[\"Code\",\"CSS\",\"Pr\u00e4prozessor\",\"Sass\",\"SCSS\",\"Webdesign\"],\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.lochbronner.com\\\/thema-webdesign\\\/css-entwicklung-sass\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.lochbronner.com\\\/thema-webdesign\\\/css-entwicklung-sass\\\/\",\"url\":\"https:\\\/\\\/www.lochbronner.com\\\/thema-webdesign\\\/css-entwicklung-sass\\\/\",\"name\":\"Warum CSS-Entwicklung mit Sass effizienter ist - Webdesign Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.lochbronner.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.lochbronner.com\\\/thema-webdesign\\\/css-entwicklung-sass\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.lochbronner.com\\\/thema-webdesign\\\/css-entwicklung-sass\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.lochbronner.com\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/css-sass.jpg\",\"datePublished\":\"2017-12-29T08:00:54+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.lochbronner.com\\\/#\\\/schema\\\/person\\\/3064163d41408dc5ab9a392b77f9979b\"},\"description\":\"Die CSS Entwicklung mit dem Pr\u00e4prozessor Sass erm\u00f6glicht den effizienten Einsatz von Variablen, Funktionen, Vorlagen, Mixins uvm. Gro\u00dfe Projekte profitieren dadurch enorm und bleiben stets \u00fcbersichtlich. Einzelne Teile (Partials) k\u00f6nnen ausgelagert und f\u00fcr andere Projekte weiterverwendet werden.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.lochbronner.com\\\/thema-webdesign\\\/css-entwicklung-sass\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.lochbronner.com\\\/thema-webdesign\\\/css-entwicklung-sass\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.lochbronner.com\\\/thema-webdesign\\\/css-entwicklung-sass\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.lochbronner.com\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/css-sass.jpg\",\"contentUrl\":\"https:\\\/\\\/www.lochbronner.com\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/css-sass.jpg\",\"width\":1100,\"height\":300,\"caption\":\"CSS Entwicklung Sass\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.lochbronner.com\\\/thema-webdesign\\\/css-entwicklung-sass\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/www.lochbronner.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS-Entwicklung mit Sass: effizienter &#038; schneller\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.lochbronner.com\\\/#website\",\"url\":\"https:\\\/\\\/www.lochbronner.com\\\/\",\"name\":\"Sebastian Lochbronner\",\"description\":\"Designer, Unternehmer, Espressoliebhaber\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.lochbronner.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.lochbronner.com\\\/#\\\/schema\\\/person\\\/3064163d41408dc5ab9a392b77f9979b\",\"name\":\"Sebastian Lochbronner\",\"sameAs\":[\"https:\\\/\\\/www.lochbronner.com\"],\"url\":\"https:\\\/\\\/www.lochbronner.com\\\/en\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Why CSS development with Sass is more efficient - Webdesign Blog","description":"CSS development with the Sass preprocessor enables the efficient use of variables, functions, templates, mixins and much more. Large projects benefit enormously from this and always remain clear. Individual parts (partials) can be outsourced and reused for other projects.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.lochbronner.com\/en\/thema-webdesign\/css-entwicklung-sass\/","og_locale":"en_US","og_type":"article","og_title":"Warum CSS-Entwicklung mit Sass effizienter ist - Webdesign Blog","og_description":"Die CSS Entwicklung mit dem Pr\u00e4prozessor Sass erm\u00f6glicht den effizienten Einsatz von Variablen, Funktionen, Vorlagen, Mixins uvm. Gro\u00dfe Projekte profitieren dadurch enorm und bleiben stets \u00fcbersichtlich. Einzelne Teile (Partials) k\u00f6nnen ausgelagert und f\u00fcr andere Projekte weiterverwendet werden.","og_url":"https:\/\/www.lochbronner.com\/en\/thema-webdesign\/css-entwicklung-sass\/","og_site_name":"Sebastian Lochbronner","article_published_time":"2017-12-29T08:00:54+00:00","og_image":[{"width":1100,"height":300,"url":"https:\/\/www.lochbronner.com\/wp-content\/uploads\/2022\/05\/css-sass.jpg","type":"image\/jpeg"}],"author":"Sebastian Lochbronner","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Sebastian Lochbronner","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.lochbronner.com\/thema-webdesign\/css-entwicklung-sass\/#article","isPartOf":{"@id":"https:\/\/www.lochbronner.com\/thema-webdesign\/css-entwicklung-sass\/"},"author":{"name":"Sebastian Lochbronner","@id":"https:\/\/www.lochbronner.com\/#\/schema\/person\/3064163d41408dc5ab9a392b77f9979b"},"headline":"CSS-Entwicklung mit Sass: effizienter &#038; schneller","datePublished":"2017-12-29T08:00:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.lochbronner.com\/thema-webdesign\/css-entwicklung-sass\/"},"wordCount":676,"commentCount":0,"image":{"@id":"https:\/\/www.lochbronner.com\/thema-webdesign\/css-entwicklung-sass\/#primaryimage"},"thumbnailUrl":"https:\/\/www.lochbronner.com\/wp-content\/uploads\/2022\/05\/css-sass.jpg","keywords":["Code","CSS","Pr\u00e4prozessor","Sass","SCSS","Webdesign"],"articleSection":["Webdesign"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.lochbronner.com\/thema-webdesign\/css-entwicklung-sass\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.lochbronner.com\/thema-webdesign\/css-entwicklung-sass\/","url":"https:\/\/www.lochbronner.com\/thema-webdesign\/css-entwicklung-sass\/","name":"Why CSS development with Sass is more efficient - Webdesign Blog","isPartOf":{"@id":"https:\/\/www.lochbronner.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.lochbronner.com\/thema-webdesign\/css-entwicklung-sass\/#primaryimage"},"image":{"@id":"https:\/\/www.lochbronner.com\/thema-webdesign\/css-entwicklung-sass\/#primaryimage"},"thumbnailUrl":"https:\/\/www.lochbronner.com\/wp-content\/uploads\/2022\/05\/css-sass.jpg","datePublished":"2017-12-29T08:00:54+00:00","author":{"@id":"https:\/\/www.lochbronner.com\/#\/schema\/person\/3064163d41408dc5ab9a392b77f9979b"},"description":"CSS development with the Sass preprocessor enables the efficient use of variables, functions, templates, mixins and much more. Large projects benefit enormously from this and always remain clear. Individual parts (partials) can be outsourced and reused for other projects.","breadcrumb":{"@id":"https:\/\/www.lochbronner.com\/thema-webdesign\/css-entwicklung-sass\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.lochbronner.com\/thema-webdesign\/css-entwicklung-sass\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.lochbronner.com\/thema-webdesign\/css-entwicklung-sass\/#primaryimage","url":"https:\/\/www.lochbronner.com\/wp-content\/uploads\/2022\/05\/css-sass.jpg","contentUrl":"https:\/\/www.lochbronner.com\/wp-content\/uploads\/2022\/05\/css-sass.jpg","width":1100,"height":300,"caption":"CSS Entwicklung Sass"},{"@type":"BreadcrumbList","@id":"https:\/\/www.lochbronner.com\/thema-webdesign\/css-entwicklung-sass\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/www.lochbronner.com\/"},{"@type":"ListItem","position":2,"name":"CSS-Entwicklung mit Sass: effizienter &#038; schneller"}]},{"@type":"WebSite","@id":"https:\/\/www.lochbronner.com\/#website","url":"https:\/\/www.lochbronner.com\/","name":"Sebastian Lochbronner","description":"Designer, entrepreneur, espresso lover","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.lochbronner.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.lochbronner.com\/#\/schema\/person\/3064163d41408dc5ab9a392b77f9979b","name":"Sebastian Lochbronner","sameAs":["https:\/\/www.lochbronner.com"],"url":"https:\/\/www.lochbronner.com\/en"}]}},"_links":{"self":[{"href":"https:\/\/www.lochbronner.com\/en\/wp-json\/wp\/v2\/posts\/3704","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lochbronner.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lochbronner.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lochbronner.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lochbronner.com\/en\/wp-json\/wp\/v2\/comments?post=3704"}],"version-history":[{"count":0,"href":"https:\/\/www.lochbronner.com\/en\/wp-json\/wp\/v2\/posts\/3704\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lochbronner.com\/en\/wp-json\/wp\/v2\/media\/3705"}],"wp:attachment":[{"href":"https:\/\/www.lochbronner.com\/en\/wp-json\/wp\/v2\/media?parent=3704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lochbronner.com\/en\/wp-json\/wp\/v2\/categories?post=3704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lochbronner.com\/en\/wp-json\/wp\/v2\/tags?post=3704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}