{"id":13256,"date":"2016-03-18T09:30:09","date_gmt":"2016-03-18T08:30:09","guid":{"rendered":"https:\/\/www.omsag.de\/?p=13256"},"modified":"2018-11-20T12:01:37","modified_gmt":"2018-11-20T11:01:37","slug":"css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung","status":"publish","type":"post","link":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/","title":{"rendered":"CSS-Prozessoren \u2013 ein Segen f\u00fcr einfache Frontend-Entwicklung?"},"content":{"rendered":"

CSS ist bekanntlich eine Sprache zur Gestaltung von HTML. Ich vermeide den Ausdruck Programmiersprache, da CSS \u2013 es liegt auf der Hand \u2013 keine ist und nicht ann\u00e4hernd die Vorz\u00fcge einer Programmiersprache bietet. Klar, das l\u00e4sst sich schwerlich vergleichen, da CSS\u00a0keine<\/del>\u00a0wenige logische Operationen ausf\u00fchrt. Dennoch gibt es manche Dinge, die man sich f\u00fcr CSS w\u00fcnscht. Wie zum Beispiel Variablen. Dinge eben, die das Leben als Frontend-Entwickler wesentlich einfacher machen<\/strong>.<\/p>\n

Genau da kommen CSS-Prozessoren ins Spiel.<\/p>\n

CSS-Prozessoren. Bitte was?<\/h2>\n

Bis am 04. November 2013\u00a0die erste Version 0.1 von PostCSS auf GitHub ver\u00f6ffentlicht wurde, stand allein der Begriff Pr\u00e4prozessor f\u00fcr Tools wie SASS und Less, die CSS um viele Funktionen erweitern<\/strong>. Es gibt nat\u00fcrlich noch mehr Pr\u00e4prozessoren da drau\u00dfen. Ich selbst nutze gern Stylus in Kombination mit einem nicht ganz so gew\u00f6hnlichen HTML-Pr\u00e4prozessor namens Jade \u2013 eigentlich eine Template Engine, ist aber im Prinzip das gleiche wie ein Pr\u00e4prozessor. Seit PostCSS aber auf den Plan getreten ist, gibt es einen weiteren Ausdruck: Postprozessor.<\/p>\n

Die bei Pr\u00e4prozessoren angepriesenen Funktionen m\u00f6gen Variablen sein, oder Mixins, Nesting, Loops, Extends und wie all die anderen englischen Ausdr\u00fccke lauten. Wer Genaueres wissen m\u00f6chte, schaut am besten in die Dokumentationen von\u00a0SASS\u00a0und\u00a0Less. Das ist jedoch eine andere Geschichte.<\/p>\n

CSS-Pr\u00e4prozessor vs. -Postprozessor<\/h2>\n

Alles sch\u00f6n und gut, doch was ist eigentlich der Unterschied zwischen einem CSS-Pr\u00e4- und Postprozessor?<\/p>\n

Pr\u00e4prozessoren<\/strong> verfolgen den Ansatz, dass man gar nicht erst CSS schreiben muss, um CSS zu bekommen. Naja, irgendwie schon, aber in einer anderen Form. Denn diese Helferlein kommen mit ihrer eigenen Syntax und mal \u00e4hnlichen oder auch ganz eigenen Funktionen daher. Im Prinzip kocht da jeder sein eigenes S\u00fcppchen.<\/p>\n

Der eine gestaltet seine Website also mit SASS, ein anderer nutzt Less auf eine weitere Art, der Dritte mag lieber Stylus und macht es ganz anders. Am Ende kommt CSS dabei raus.<\/strong> Die Quelltexte werden kompiliert und mit entsprechenden Optionen \u2013 so wie der Autor es gerne h\u00e4tte \u2013 ausgegeben. Das kann komprimiert oder mit einer CSS\u00a0Source Map\u00a0sein. Was der Vorteil von diesem doch l\u00e4ngeren Workflow ist?<\/p>\n

Zeitersparnis. „Wartbarkeit“. Fancy Code.<\/strong>\u00a0Die Meinungen zu solchen Tools sind ganz unterschiedlich. Die einen lieben es, die anderen setzen lieber auf plain ol‘ CSS und wiederum andere finden, die Erstgenannten\u00a0\u00fcbertreiben es. Entweder sie schreiben dann Trillionen Zeilen Blog-Artikel um zu verklickern, warum Pr\u00e4prozessoren falsch verwendet werden oder sie nutzen einfach PostCSS.<\/p>\n

Wer jetzt aber denkt, PostCSS w\u00fcrde Pr\u00e4prozessoren ersetzen, t\u00e4uscht sich. Bei SASS zum Beispiel kommt weiterhin CSS raus. Das l\u00e4sst sich zus\u00e4tzlich mit PostCSS verarbeiten. PostCSS ist also ein n\u00fctzlicher Helfer f\u00fcr jeden Workflow<\/strong>.<\/p>\n

\"\"<\/p>\n

PostCSS f\u00fcr optimales CSS<\/h3>\n

Nur weil CSS\u00a0jetzt\u00a0nicht die ganzen Funktionen der Pr\u00e4prozessoren hat, muss das nicht hei\u00dfen, dass nicht daran gearbeitet wird. Theoretisch kann man schon mit Variablen und Co. loslegen, wenn die Browser-Hersteller mal aus dem Bett kommen w\u00fcrden. Nein, die sind dieses Mal nicht schuld. Es handelt sich einfach noch um sogenannte\u00a0Working Drafts. Also nicht fertige Funktionen, die noch gar nicht offiziell erschienen sind und sich sehr schnell \u00e4ndern k\u00f6nnen.<\/p>\n

Es gibt aber M\u00f6glichkeiten, wie sich diese Funktionen schon heute anwenden lassen<\/strong>. Daf\u00fcr m\u00fcssen wir nicht zig neue Sprachen lernen, sondern schreiben wie gewohnt CSS \u2013 nur eben mit Variablen und all dem anderen coolen Zeug, was da noch kommen soll. Und nat\u00fcrlich mit den ganzen CSS3-Features, die noch gar nicht so eine tolle Browser-Unterst\u00fctzung haben.<\/p>\n

PostCSS\u00a0ist eine dieser M\u00f6glichkeiten. Das Node.js Tool rubbelt \u00fcber bestehenden CSS-Code und f\u00fcgt zum Beispiel<\/p>\n

    \n
  • Vendor-Prefixes wie\u00a0-moz-\u00a0und\u00a0-webkit-\u00a0f\u00fcr mehr Browser-Unterst\u00fctzung bei,<\/li>\n<\/ul>\n
      \n
    • \u00fcbersetzt neue Funktionen wie Variablen in etwas, das auch \u00e4ltere Browser verstehen<\/li>\n<\/ul>\n
        \n
      • und analysiert sogar den Code, um die Qualit\u00e4t zu verbessern.<\/li>\n<\/ul>\n

        All das und noch mehr passiert da. Je nach Plugin.<\/p>\n

        Wie PostCSS installiert und angewendet wird, spare ich mir an dieser Stelle. Alles N\u00f6tige dazu findet sich in der Dokumentation.<\/p>\n

        PostCSS: Modularer Allesk\u00f6nner<\/h2>\n

        Ja, die Plugins. PostCSS bietet davon mittlerweile eine ganze Handvoll. Das reicht von Werkzeugen f\u00fcr die Analyse und Optimierung \u00fcber\u00a0Plugins\u00a0f\u00fcr Farben bis hin zu Funktionen, die zum Beispiel bei SASS vorkommen. Es gibt aber auch ein paar Plugin-Packs<\/strong>, die mehrere Plugins vereinen und mit nur einer Zeile Code eingef\u00fcgt werden k\u00f6nnen.<\/p>\n

        CSSnext: Die Zukunft schon heute<\/h3>\n

        Mit diesem Paket von verschiedenen PostCSS-Plugins kann der Entwickler moderne CSS-Eigenschaften nutzen<\/strong>, ohne auf die Browser-Unterst\u00fctzung zu achten. CSSnext \u00fcbersetzt das moderne Zeug f\u00fcr Browser. Das f\u00e4ngt bei Vendor-Prefixes an, also ist ein Autoprefixer bereits integriert. Nat\u00fcrlich sollte man vorher auf die unterst\u00fctzten Eigenschaften des Plugins schauen. Manches l\u00e4sst sich eben nicht so ohne Weiteres f\u00fcr \u00e4ltere Browser anwenden. CSSnext findet sich wie viele andere Plugins auf\u00a0GitHub.<\/p>\n

        preCSS plappert SASS nach<\/h3>\n

        Wer bereits mit SASS arbeitet, hat sich vermutlich daran gew\u00f6hnt. Das Plugin preCSS<\/strong> bietet die Funktionen von SASS f\u00fcr PostCSS und der geneigte Anwender von SASS muss nicht (erneut)\u00a0das Markup seines Codes \u00e4ndern. Das Plugin gibt es wie gehabt auf\u00a0GitHub.<\/p>\n

        PostCSS Plugins suchen und finden<\/h2>\n

        Wie eingangs erw\u00e4hnt, gibt es eine ganze Menge n\u00fctzlicher Plugins f\u00fcr verschiedene Einsatzzwecke. Wozu PostCSS letztendlich eingesetzt wird, ist jedem selbst \u00fcberlassen. Eine Sammlung von Plugins<\/strong> steht im\u00a0Repository von PostCSS. Es gibt aber auch eine durchsuchbare Liste von Plugins auf der Seite\u00a0PostCSS.parts\u00a0inklusive Kategorien.<\/p>\n

        PostCSS ist mit den Plugins ein sehr m\u00e4chtiges Tool, um die Qualit\u00e4t und Kompatibilit\u00e4t von CSS zu steigern. Welche Plugins n\u00fctzlich sind und welche nicht, muss der einzelne Anwender f\u00fcr sich selbst entscheiden. Doch zumindest CSSnext erachte ich als Pflichtprogramm.<\/strong><\/p>\n

        \"\u00dcbersicht<\/p>\n","protected":false},"excerpt":{"rendered":"

        CSS ist bekanntlich eine Sprache zur Gestaltung von HTML. Ich vermeide den Ausdruck Programmiersprache, da CSS \u2013 es liegt auf der Hand \u2013 keine ist und nicht ann\u00e4hernd die Vorz\u00fcge einer Programmiersprache bietet. Klar, das l\u00e4sst sich schwerlich vergleichen, da CSS\u00a0keine\u00a0wenige logische Operationen ausf\u00fchrt. Dennoch gibt es manche Dinge, die man sich f\u00fcr CSS w\u00fcnscht. […]<\/p>\n","protected":false},"author":4,"featured_media":13257,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[53],"tags":[250,263,251,215,297,100],"yoast_head":"\nCSS-Prozessoren \u2013 ein Segen f\u00fcr Frontend-Entwickler?<\/title>\n<meta name=\"description\" content=\"Schon mal von CSS-Prozessoren geh\u00f6rt? Kein Problem! Lies auf unserem Blog, wie sie das Leben einfacher machen k\u00f6nnen.\" \/>\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.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS-Prozessoren \u2013 ein Segen f\u00fcr Frontend-Entwickler?\" \/>\n<meta property=\"og:description\" content=\"Schon mal von CSS-Prozessoren geh\u00f6rt? Kein Problem! Lies auf unserem Blog, wie sie das Leben einfacher machen k\u00f6nnen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/\" \/>\n<meta property=\"og:site_name\" content=\"Online Marketing & Suchmaschinenmarketing Agentur OMSAG\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Online.Marketing.Solutions.AG\" \/>\n<meta property=\"article:published_time\" content=\"2016-03-18T08:30:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-11-20T11:01:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.omsag.de\/proxy\/wp-content\/uploads\/2016\/03\/Beitragsbild_Carsten-Jaksch_omsag.de_bb_CSS-Prozessor.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1010\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Blogredaktion\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Blogredaktion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"5\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/\"},\"author\":{\"name\":\"Blogredaktion\",\"@id\":\"https:\/\/www.omsag.de\/proxy\/#\/schema\/person\/8dcdf1052bc5e4a5e82b494f96fba999\"},\"headline\":\"CSS-Prozessoren \u2013 ein Segen f\u00fcr einfache Frontend-Entwicklung?\",\"datePublished\":\"2016-03-18T08:30:09+00:00\",\"dateModified\":\"2018-11-20T11:01:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/\"},\"wordCount\":974,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.omsag.de\/proxy\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.omsag.de\/proxy\/wp-content\/uploads\/2016\/03\/Beitragsbild_Carsten-Jaksch_omsag.de_bb_CSS-Prozessor.jpg\",\"keywords\":[\"css\",\"how-to\",\"html\",\"plugins\",\"tools\",\"webdesign\"],\"articleSection\":[\"Technik und Entwicklung\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/\",\"url\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/\",\"name\":\"CSS-Prozessoren \u2013 ein Segen f\u00fcr Frontend-Entwickler?\",\"isPartOf\":{\"@id\":\"https:\/\/www.omsag.de\/proxy\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.omsag.de\/proxy\/wp-content\/uploads\/2016\/03\/Beitragsbild_Carsten-Jaksch_omsag.de_bb_CSS-Prozessor.jpg\",\"datePublished\":\"2016-03-18T08:30:09+00:00\",\"dateModified\":\"2018-11-20T11:01:37+00:00\",\"description\":\"Schon mal von CSS-Prozessoren geh\u00f6rt? Kein Problem! Lies auf unserem Blog, wie sie das Leben einfacher machen k\u00f6nnen.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/#primaryimage\",\"url\":\"https:\/\/www.omsag.de\/proxy\/wp-content\/uploads\/2016\/03\/Beitragsbild_Carsten-Jaksch_omsag.de_bb_CSS-Prozessor.jpg\",\"contentUrl\":\"https:\/\/www.omsag.de\/proxy\/wp-content\/uploads\/2016\/03\/Beitragsbild_Carsten-Jaksch_omsag.de_bb_CSS-Prozessor.jpg\",\"width\":1010,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\/\/www.omsag.de\/proxy\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Technik und Entwicklung\",\"item\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS-Prozessoren \u2013 ein Segen f\u00fcr einfache Frontend-Entwicklung?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.omsag.de\/proxy\/#website\",\"url\":\"https:\/\/www.omsag.de\/proxy\/\",\"name\":\"Online Marketing & Suchmaschinenmarketing Agentur OMSAG\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.omsag.de\/proxy\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.omsag.de\/proxy\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.omsag.de\/proxy\/#organization\",\"name\":\"OMSAG\",\"url\":\"https:\/\/www.omsag.de\/proxy\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.omsag.de\/proxy\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.omsag.de\/proxy\/wp-content\/uploads\/2020\/08\/oms-logo-1.jpg\",\"contentUrl\":\"https:\/\/www.omsag.de\/proxy\/wp-content\/uploads\/2020\/08\/oms-logo-1.jpg\",\"width\":500,\"height\":148,\"caption\":\"OMSAG\"},\"image\":{\"@id\":\"https:\/\/www.omsag.de\/proxy\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Online.Marketing.Solutions.AG\",\"https:\/\/www.instagram.com\/omsag\/\",\"https:\/\/de.linkedin.com\/company\/online-marketing-solutions-ag\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.omsag.de\/proxy\/#\/schema\/person\/8dcdf1052bc5e4a5e82b494f96fba999\",\"name\":\"Blogredaktion\",\"description\":\"Unter \u201eBlogredaktion\u201c werden Fachbeitr\u00e4ge verschiedener Experten aus dem Unternehmen ohne Autorenkennzeichnung publiziert. Ihr habt Fragen oder Anregungen zu einem speziellen Beitrag? Kein Problem, die Blogredaktion steht euch daf\u00fcr gerne hier zur Verf\u00fcgung.\",\"sameAs\":[\"https:\/\/www.omsag.de\"],\"url\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/author\/blogredaktion\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS-Prozessoren \u2013 ein Segen f\u00fcr Frontend-Entwickler?","description":"Schon mal von CSS-Prozessoren geh\u00f6rt? Kein Problem! Lies auf unserem Blog, wie sie das Leben einfacher machen k\u00f6nnen.","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.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/","og_locale":"de_DE","og_type":"article","og_title":"CSS-Prozessoren \u2013 ein Segen f\u00fcr Frontend-Entwickler?","og_description":"Schon mal von CSS-Prozessoren geh\u00f6rt? Kein Problem! Lies auf unserem Blog, wie sie das Leben einfacher machen k\u00f6nnen.","og_url":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/","og_site_name":"Online Marketing & Suchmaschinenmarketing Agentur OMSAG","article_publisher":"https:\/\/www.facebook.com\/Online.Marketing.Solutions.AG","article_published_time":"2016-03-18T08:30:09+00:00","article_modified_time":"2018-11-20T11:01:37+00:00","og_image":[{"width":1010,"height":500,"url":"https:\/\/www.omsag.de\/proxy\/wp-content\/uploads\/2016\/03\/Beitragsbild_Carsten-Jaksch_omsag.de_bb_CSS-Prozessor.jpg","type":"image\/jpeg"}],"author":"Blogredaktion","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"Blogredaktion","Gesch\u00e4tzte Lesezeit":"5\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/#article","isPartOf":{"@id":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/"},"author":{"name":"Blogredaktion","@id":"https:\/\/www.omsag.de\/proxy\/#\/schema\/person\/8dcdf1052bc5e4a5e82b494f96fba999"},"headline":"CSS-Prozessoren \u2013 ein Segen f\u00fcr einfache Frontend-Entwicklung?","datePublished":"2016-03-18T08:30:09+00:00","dateModified":"2018-11-20T11:01:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/"},"wordCount":974,"commentCount":0,"publisher":{"@id":"https:\/\/www.omsag.de\/proxy\/#organization"},"image":{"@id":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/#primaryimage"},"thumbnailUrl":"https:\/\/www.omsag.de\/proxy\/wp-content\/uploads\/2016\/03\/Beitragsbild_Carsten-Jaksch_omsag.de_bb_CSS-Prozessor.jpg","keywords":["css","how-to","html","plugins","tools","webdesign"],"articleSection":["Technik und Entwicklung"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/","url":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/","name":"CSS-Prozessoren \u2013 ein Segen f\u00fcr Frontend-Entwickler?","isPartOf":{"@id":"https:\/\/www.omsag.de\/proxy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/#primaryimage"},"image":{"@id":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/#primaryimage"},"thumbnailUrl":"https:\/\/www.omsag.de\/proxy\/wp-content\/uploads\/2016\/03\/Beitragsbild_Carsten-Jaksch_omsag.de_bb_CSS-Prozessor.jpg","datePublished":"2016-03-18T08:30:09+00:00","dateModified":"2018-11-20T11:01:37+00:00","description":"Schon mal von CSS-Prozessoren geh\u00f6rt? Kein Problem! Lies auf unserem Blog, wie sie das Leben einfacher machen k\u00f6nnen.","breadcrumb":{"@id":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/#primaryimage","url":"https:\/\/www.omsag.de\/proxy\/wp-content\/uploads\/2016\/03\/Beitragsbild_Carsten-Jaksch_omsag.de_bb_CSS-Prozessor.jpg","contentUrl":"https:\/\/www.omsag.de\/proxy\/wp-content\/uploads\/2016\/03\/Beitragsbild_Carsten-Jaksch_omsag.de_bb_CSS-Prozessor.jpg","width":1010,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/css-prozessoren-ein-segen-fuer-einfache-frontend-entwicklung\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/www.omsag.de\/proxy\/"},{"@type":"ListItem","position":2,"name":"Technik und Entwicklung","item":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/technik-und-entwicklung\/"},{"@type":"ListItem","position":3,"name":"CSS-Prozessoren \u2013 ein Segen f\u00fcr einfache Frontend-Entwicklung?"}]},{"@type":"WebSite","@id":"https:\/\/www.omsag.de\/proxy\/#website","url":"https:\/\/www.omsag.de\/proxy\/","name":"Online Marketing & Suchmaschinenmarketing Agentur OMSAG","description":"","publisher":{"@id":"https:\/\/www.omsag.de\/proxy\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.omsag.de\/proxy\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.omsag.de\/proxy\/#organization","name":"OMSAG","url":"https:\/\/www.omsag.de\/proxy\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.omsag.de\/proxy\/#\/schema\/logo\/image\/","url":"https:\/\/www.omsag.de\/proxy\/wp-content\/uploads\/2020\/08\/oms-logo-1.jpg","contentUrl":"https:\/\/www.omsag.de\/proxy\/wp-content\/uploads\/2020\/08\/oms-logo-1.jpg","width":500,"height":148,"caption":"OMSAG"},"image":{"@id":"https:\/\/www.omsag.de\/proxy\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Online.Marketing.Solutions.AG","https:\/\/www.instagram.com\/omsag\/","https:\/\/de.linkedin.com\/company\/online-marketing-solutions-ag"]},{"@type":"Person","@id":"https:\/\/www.omsag.de\/proxy\/#\/schema\/person\/8dcdf1052bc5e4a5e82b494f96fba999","name":"Blogredaktion","description":"Unter \u201eBlogredaktion\u201c werden Fachbeitr\u00e4ge verschiedener Experten aus dem Unternehmen ohne Autorenkennzeichnung publiziert. Ihr habt Fragen oder Anregungen zu einem speziellen Beitrag? Kein Problem, die Blogredaktion steht euch daf\u00fcr gerne hier zur Verf\u00fcgung.","sameAs":["https:\/\/www.omsag.de"],"url":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/author\/blogredaktion\/"}]}},"_links":{"self":[{"href":"https:\/\/www.omsag.de\/proxy\/wp-json\/wp\/v2\/posts\/13256"}],"collection":[{"href":"https:\/\/www.omsag.de\/proxy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.omsag.de\/proxy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.omsag.de\/proxy\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.omsag.de\/proxy\/wp-json\/wp\/v2\/comments?post=13256"}],"version-history":[{"count":0,"href":"https:\/\/www.omsag.de\/proxy\/wp-json\/wp\/v2\/posts\/13256\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.omsag.de\/proxy\/wp-json\/wp\/v2\/media\/13257"}],"wp:attachment":[{"href":"https:\/\/www.omsag.de\/proxy\/wp-json\/wp\/v2\/media?parent=13256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.omsag.de\/proxy\/wp-json\/wp\/v2\/categories?post=13256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.omsag.de\/proxy\/wp-json\/wp\/v2\/tags?post=13256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}