{"id":185,"date":"2013-03-20T15:11:05","date_gmt":"2013-03-20T14:11:05","guid":{"rendered":"http:\/\/paulchrablass.de\/blog\/?p=185"},"modified":"2013-04-14T17:36:31","modified_gmt":"2013-04-14T15:36:31","slug":"compass-und-das-wordpress-eigene-style-css","status":"publish","type":"post","link":"https:\/\/paulchr.ablass.me\/blog\/2013\/03\/20\/compass-und-das-wordpress-eigene-style-css\/","title":{"rendered":"Compass und das WordPress-eigene style.css"},"content":{"rendered":"<p>In WordPress-Themes muss innerhalb des Theme-Root-Verzeichnis&#8216; ein Stylesheet namens <code>style.css<\/code> liegen, ansonsten wird das entsprechende Theme nicht erkannt. Dies ist innerhalb meines normalen Compass-Setups nicht ganz unproblematisch, da ich normalerweise alle Stylesheets im Ordner <code>css\/<\/code> lagere, also auch das normale <code>style.css<\/code>. Meine bisherige L\u00f6sung sah so aus, dass ich im Theme-Root ein Stylesheet hatte dass das von Compass kompilierte Css importiert. Wirklich sch\u00f6n war das allerdings nicht, da so f\u00fcr die Einbindung zwei Requests von N\u00f6ten waren.<\/p>\n<p>Umso erfreuter war ich, als ich bei <a href=\"http:\/\/css-tricks.com\/\">Chris Coyier<\/a> ein \u00e4u\u00dferst hilfreiches Snippet fand.<\/p>\n<pre><code>require 'fileutils'\r\non_stylesheet_saved do |file|\r\n  if File.exists?(file) && File.basename(file) == \"style.css\"\r\n    puts \"Moving: #{file}\"\r\n    FileUtils.mv(file, File.dirname(file) + \"\/..\/\" + File.basename(file))\r\n  end\r\nend<\/code><\/pre>\n<p>Das Snippet sucht nach dem Kompilieren die Datei <code>style.css<\/code> und schiebt sie innerhalb der Verzeichnisstruktur eine Ebene h\u00f6her, in meinem Fall also ins Root-Verzeichnis des Themes.<\/p>\n<h3>Links<\/h3>\n<p><a href=\"http:\/\/css-tricks.com\/compass-compiling-and-wordpress-themes\/\">Compass Compiling and WordPress Themes<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In WordPress-Themes muss innerhalb des Theme-Root-Verzeichnis&#8216; ein Stylesheet namens style.css liegen, ansonsten wird das entsprechende Theme nicht erkannt. Dies ist innerhalb meines normalen Compass-Setups nicht ganz unproblematisch, da ich normalerweise alle Stylesheets im Ordner css\/ lagere, also auch das normale style.css. Meine bisherige L\u00f6sung sah so aus, dass ich im Theme-Root ein Stylesheet hatte dass [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[75,59],"tags":[60,76,61,63,62],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2Vohc-2Z","jetpack-related-posts":[{"id":644,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/06\/06\/compass-mehrere-css-transformationen-verknuepfen\/","url_meta":{"origin":185,"position":0},"title":"Compass: Mehrere Css-Transformationen verkn\u00fcpfen","author":"Paul-Christian Abla\u00df","date":"6. Juni 2014","format":false,"excerpt":"Compass bietet out of the box eine ganze Reihe von Mixins zur einfachen Nutzung von verschiedenen Css-Transformationen an. Leider gibt es bei der B\u00fcndelung dieser Transformationen in einem Mixin einige kleine Fallstricke, die ich erst nach und nach entdeckt habe und aus Archivierungsgr\u00fcnden festhalten m\u00f6chte. Die transform()-Mixins von Compass Es\u2026","rel":"","context":"In &quot;Tools&quot;","block_context":{"text":"Tools","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/tools\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":679,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/06\/09\/tool-sass-globbing-plugin\/","url_meta":{"origin":185,"position":1},"title":"Tool: Sass Globbing Plugin","author":"Paul-Christian Abla\u00df","date":"9. Juni 2014","format":false,"excerpt":"Mit Hilfe des Sass Globbing Plugins k\u00f6nnen viele scss-Dateien auf einmal importiert werden. Sehr hilfreich beim Import einzelner Mixin-Dateien, oder wenn es viele separate Stylesheets f\u00fcr einzelne Module gibt. Installation $ gem install sass-globbing Einbindung in config.rb require 'sass-globbing' Benutzung Um beispielsweise viele einzelne Modul-Stylesheets einzubinden: @import \"_mod*\";","rel":"","context":"In &quot;Tools&quot;","block_context":{"text":"Tools","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/tools\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":425,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/09\/24\/sass-compass-encoding-auf-utf-8-umstellen\/","url_meta":{"origin":185,"position":2},"title":"Sass-\/ Compass-Encoding auf UTF-8 umstellen","author":"Paul-Christian Abla\u00df","date":"24. September 2013","format":false,"excerpt":"Beim erstmaligen compass compile eines neuen Projekt wurde mir heute die folgende Fehlermeldung ausgegeben: Invalid US-ASCII character \"\\xC3\" Sass und Compass bekommen ihre Encoding-Optionen von Ruby, dass sie wiederum vom Environment (sprich: Dem Server, auf dem es l\u00e4uft) \u00fcbernimmt. Um dieses Problem zu beheben, k\u00f6nnen zum einen die Locales (Spracheinstellungen)\u2026","rel":"","context":"In &quot;Tools&quot;","block_context":{"text":"Tools","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/tools\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":119,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/02\/22\/svn-dateien-und-ordner-ignorieren\/","url_meta":{"origin":185,"position":3},"title":"SVN: Dateien und Ordner ignorieren","author":"Paul-Christian Abla\u00df","date":"22. Februar 2013","format":false,"excerpt":"Um zu verhindern, dass bestimmte Dateien oder Ordner in das Projektarchiv \u00fcbermittelt werden, k\u00f6nnen sie mittels eines einfachen Befehls ignoriert werden: $ svn propset svn:ignore \"style.css\" . Dieses Vorgehen ist projektabh\u00e4ngig, d.h. dass in jedem Projekt in dem die Datei style.css ignoriert werden soll die ignore-Eigenschaft erneut gesetzt werden muss.\u2026","rel":"","context":"In &quot;Versionsverwaltung&quot;","block_context":{"text":"Versionsverwaltung","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/versionsverwaltung\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":297,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/05\/26\/sass-mixin-rem-mit-px-fallback\/","url_meta":{"origin":185,"position":4},"title":"Sass-Mixin: rem mit px-Fallback","author":"Paul-Christian Abla\u00df","date":"26. Mai 2013","format":false,"excerpt":"Ich nutze im Css so gut wie ausschlie\u00dflich rem (siehe dazu auch CSS-Tipp: rem als Einheit f\u00fcr Schriftgr\u00f6\u00dfe nutzen) als Einheit und trug das ben\u00f6tigte Pixel-Fallback bisher h\u00e4ndisch ein. Mit der Zeit nervt das ziemlich, daher war ich sehr erfreut als ich vor kurzem das rem-Mixin f\u00fcr Sass von Hans\u2026","rel":"","context":"In &quot;Css&quot;","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":494,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/01\/20\/chrome-mit-flags-starten\/","url_meta":{"origin":185,"position":5},"title":"Chrome mit Flags starten","author":"Paul-Christian Abla\u00df","date":"20. Januar 2014","format":false,"excerpt":"Um den Funktionsumfang von Chrome\/ Chrome Canary\/ Chromium zu erweitern, besteht die M\u00f6glichkeit den Browser mit sogenannten \"Flags\" zu starten. Flags sind Startparameter, die mit der Kommandozeile \u00fcbergeben werden und Optionen wie beispielsweise das subpixel font scaling zur besseren Darstellung der Schrift aktivieren. Flag-Aktivierung unter Windows Auf einem Windows-Rechner muss\u2026","rel":"","context":"In &quot;Browser&quot;","block_context":{"text":"Browser","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/browser\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2014\/01\/chrome-flags-windows-212x300.png?resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/185"}],"collection":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/comments?post=185"}],"version-history":[{"count":4,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/185\/revisions"}],"predecessor-version":[{"id":253,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/185\/revisions\/253"}],"wp:attachment":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/media?parent=185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/categories?post=185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/tags?post=185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}