{ Berlin-Coding }

Wie wir mit Hilfe eines kleinen Snippets unsere CSS-Datein in der Produktionsumgebung komprimieren.

Um die Ladezeit einer Webseite nicht unnötig zu verlängern, ist es ratsam seine CSS-Dateien zu komprimieren. Wir benutzen Compass als Framework für den CSS Preprocessor Sass und fügen dafür folgendes Snippet in unsere config.rb ein.

# Default to development if environment is not set.
saved = environment
if (environment.nil?)
  environment = :development
else
  environment = saved
end

# Enable sourcemaps on everything but production
sourcemap = (environment == :production) ? false : true

# Output should be compressed in production
output_style = (environment == :production) ? :compressed : :expanded

Mit bundle exec compass compile -e production bzw. compass compile -e production generiert Compass nun komprimierte CSS-Dateien. Wird die environment im Command nicht gesetzt (bundle exec compass compile), greift Compass auf die default environment zurück und generiert uns während der Entwicklung weiterhin unkomprimierte CSS-Dateien.

Außerdem benutzen wir während der Entwicklung gerne das Sass Feature sourcemap (seit Sass 3.3 verfügbar). Dadurch werden *.css.map Dateien generiert, durch deren Hilfe wir im Browser mit Inspect Element auf die SCSS-Dateien zugreifen können.