Spriting mit Compass

Allgemein

Ich gehe ganz kurz auf die Basics ein: Spriting ist eine Technik, welche viele kleine Bilder zu einem großem Bild zusammenfasst. Diese Technik spart nicht nur ein paar KB bei der Dateigröße, sondern hat den Vorteil, dass nicht zu viele Verbindungen zum Server aufgebaut werden müssen.

PS: Ich habe darüber bereits vor einiges Zeit im Zusammenhang mit “Webseiten Komprimierung” geschrieben.

Kommen wir jetzt jedoch zum interessanten Teil. Wie setzt man dies ein, ohne bei jeder kleinen Bildveränderung / Hinzufügung Mehraufwand zu generieren.  Und die Lösung heißt “compass“. Dies ist ein Framework, welches auf Sass aufsetzt und dieses um einige nützliche Features ergänzt.

Installation / Konfiguration

Hier ist ein kleines Bash-Skript, welches in meinen “.dotfiles” beinhaltet ist und die erforderlichen Programme (ruby, sass, compass, oily_png) installiert.

github.com/voku/dotfiles/blob/master/firstInstall.sh

Es folgt eine Beispiel-Konfiguration für compass, woraus sich bereits die Order für Bilder, Scss, css und js hervorgehen:

github.com/voku/twig-wrapper-example/blob/master/config.rb

 

Beispiel

icons icons_new

URL: moelleken.org/tpl_imageSprites.php

SCSS:

Ich habe die für das Sprite relevanten Zeilen rot gekennzeichnet. Außerdem sollte man erwähnen, dass der Verzeichnis-Name “**/spritesTest/” sich in der “include”-Anweisung wiederfinden muss. Die Bilder selber lassen sich anschließend über den Dateinamen im CSS referenzieren, so dass man möglichst einfache / eindeutige Dateinamen verwenden sollte.

PS: hier findet du das entsprechende CSS, welches diese paar Zeilen SCSS generieren

// compass
@import "compass/css3";
@import "compass/utilities/sprites";

/*
 *  - - - - - - - - - -
 * some icons for testing
 *  - - - - - - - - - -
 */

@import "../images/spritesTest/*.png";
@include all-spritesTest-sprites;
#spritesOverview span {
  width: 32px;
  height: 32px;
  display: block;
  transition: all 0.2s ease-in;
  &:hover {
    @include transform(scale(1.8));
    transition: all 0.4s ease-out;
  }
}

@for $i from 1 through 20 {
  .step#{$i} {
    animation: movement 1500ms ease (75ms * $i) infinite alternate;
  }
}

@keyframes movement {
  from {
    @include transform(scale(1.0) translateY(0px) rotateX(0deg));
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  to {
    @include transform(scale(1.5) translateY(-25px) rotateX(45deg));
    box-shadow: 0 25px 25px rgba(0,0,0,0.2);
  }
}

 

PHP:

Die paar Zeilen PHP habe ich nur hinzugefügt, da ich keine Lust hatte alle Dateinamen in ein großes Array zu kopieren und diese Datei direkte von der Festplatte auslese.

<?php
use cms\Path;
use cms\twig\TwigWrapper;

require_once 'inc_globals.php';

$fileArray = file_list(Path::getPathDirTheme() . '/images/spritesTest', 'png');

$icons = array();
foreach ($fileArray as $file) {
  $file = str_replace(Path::getPathDirTheme() . '/images/spritesTest/', '', $file);
  $file = str_replace('emblem-', '', $file);
  $file = str_replace('.png', '', $file);

  $icons[] = $file;
}

// DEBUG
//dump($icons);
// #############################################################################
// # TwigWrapper | templating
// #############################################################################
$twigWrapper = new TwigWrapper('tpl_imageSprites.twig');

$iconsArray = array();
for ($i = 1 ; $i <= 20 ; $i++) {
  shuffle($icons);
  $iconsArray[] = $icons;
}

$twigWrapper->assign('iconsArray', $iconsArray);

echo $twigWrapper->render();

 

Twig:

Zum Schluss noch ein paar HTML-Tags im Twig hinzugefügt und schon können wir die Icons bewundern. ;)

{% extends "tpl_base.twig" %}

{% block head_css %}
  {{ parent() }}
  <link rel="stylesheet" href="{{ urlTheme }}/css-min/sprites.css" />
{% endblock %}

{% block content %}
  {{ breadcrumb | raw }}

  <article id="spritesOverview">

    {% for i in 1..20 %}

      <div class="row step{{ loop.index }}">
        {% for icon in iconsArray[i] %}
          {% if loop.index <= 6 %}
            <div class="medium-2 columns"><span class="spritesTest-emblem-{{ icon }}"></span></div>
          {% endif %}
        {% endfor %}
      </div>

    {% endfor %}

  </article>
{% endblock %}

 

Links:

compass-style.org/reference/compass/helpers/sprites/
Compass Tutorials #6 – Sprites In Compass

Multi-Platform Mobile Apps via Ionic

Ionic ist ein Frontend-Framework, mit welchem man via HTML5 / JavaScript und CSS native Apps bauen kann. Diese Apps können via “Apache Cordova” auf native Funktionen (Kamera, GPS, etc.) der Geräte zugreifen. Zudem wird Google’s JavaScript Framework “AnguarJS” genutzt und natürlich wird auch “SASS” unterstützt.

Vorbereitung

Man kann Multi-Platform Mobile Apps sowohl unter Windows, Linux oder Mac OS X entwickeln, jedoch ist die Vorbereitung unter Linux / Mac OS X um einiges einfacher.

Ich empfehle an dieser Stelle mal wieder die “.dotfiles” zu installieren.

cd ~ 
git clone https://github.com/voku/dotfiles.git 
cd dotfiles 
source bootstrap.sh

# Standard- & Webworker-Tools installieren

~/dotfiles/firstInstall.sh

Bei der Frage nach den “webworker tools”,  muss diese mit “y” beantwortet werden.

# Android SDK installieren

sudo ~/dotfiles/android_sdk_install.sh

# Java installieren

sudo add-apt-repository -y ppa:webupd8team/java
sudo aptitude update
sudo aptitude install oracle-java7-installer

# Ant installieren

sudo apt-get install ant

 

Nachdem die Installation komplett abgeschlossen ist, muss die “~/.extra”-Datei angepasst werden.

z.B.:

#!/bin/bash                                                                                                                                                                                                       

DEFAULT_USER="lars"
GIT_AUTHOR_NAME="Lars Moelleken"
GIT_COMMITTER_NAME="$GIT_AUTHOR_NAME"
git config --global user.name "$GIT_AUTHOR_NAME"
GIT_AUTHOR_EMAIL="lars@moelleken.org"
GIT_COMMITTER_EMAIL="$GIT_AUTHOR_EMAIL"
git config --global user.email "$GIT_AUTHOR_EMAIL"
git config --global push.default simple

# java - example
export JAVA_HOME=/usr/lib/jvm/java-7-oracle
export JDK_HOME=$JAVA_HOME
export JRE_HOME=$JAVA_HOME
export PATH=$JAVA_HOME/bin:$PATH

# android - example
export ANDROID_SDK_ROOT=/usr/local/android-sdk/
#export ANDROID_NDK=/usr/local/android-ndk/
export ANDROID_HOME=$ANDROID_SDK_ROOT
export PATH=$ANDROID_SDK_ROOT/tools/:$ANDROID_SDK_ROOT/platform-tools/:$ANDROID_SDK_ROOT/build-tools/19.1.0/:$PATH

 

PS: bei Debian (sid) musste ich noch ein wenig nachhelfen, so dass die Android-SDK auch korrekt funktioniert:

sudo dpkg --add-architecture i386
sudo apt-get update
sudo apt-get install lib32z1 lib32stdc++6

 

Beispiel-App für Android erstellen

ionic start planet-ubuntuusers
cd planet-ubuntuusers
rm -rf www/
git clone https://github.com/voku/planet-ubuntuusers-app www
ionic platform android
ionic build android

Man kann die App nun im Browser (ionic serve), im Android Emulator (ionic emulate android) oder direkt auf seinem Android-Gerät (ionic run android) ausprobieren!!!

 

Links

Es folgen ein paar Links zur App / API / Dokumentation  und zum Beispiel-Quellcode

ANDOIRD APP-DOWNLOAD:
 http://suckup.de/planet-ubuntuusers-json/PlanetApp-debug.apk

QUELLCODE ZUR APP:
https://github.com/voku/planet-ubuntuusers-app

SCREENSHOT:
Planet App

JSON-API: 
http://suckup.de/planet-ubuntuusers-json/json.php

HTML-OUTPUT VIA TWIG:
http://suckup.de/planet-ubuntuusers-json/

QUELLCODE ZUR API:
https://github.com/voku/planet-ubuntuusers-json (in zirka 2 Minuten geschrieben & deployed -> composer is great!!!)

 

DOKUMENTATION:
https://docs.angularjs.org/
http://ionicframework.com/docs/
http://cordova.apache.org/

Kurztipp: lokalen offenen Port finden (bash)

Habe soeben folgende Funktionen zu meinen dotfiles hinzugefügt, um einen freien lokalen Port zu finden. Diese werden wiederum verwendet, um z.B. die “phpserver“-Funktion auszuführen.

# -------------------------------------------------------------------
# netstat_used_local_ports: get used tcp-ports
netstat_used_local_ports()
{
  netstat -atn | awk '{printf "%s\n%s\n", $4, $4}' | grep -oE '[0-9]*$' | sort -n | uniq
}

# -------------------------------------------------------------------
# netstat_free_local_port: get one free tcp-port
netstat_free_local_port()
{
  read lowerPort upperPort < /proc/sys/net/ipv4/ip_local_port_range
 
  # create a local array of used ports 
  local all_used_ports=($(netstat_used_local_ports))

  for port in $(seq $lowerPort $upperPort); do
    for used_port in "${all_used_ports[@]}"; do
      if [ $used_port -eq $port ]; then
        continue
      else
        echo $port
        return 0
      fi
    done
  done 
}

 

Web Development mit Linux (Video)

Im folgenden Video zeige ich kurz (~ 5 min.) wie meine Toolchain im Live-Betrieb aussieht, dabei nutze ich unter anderem Sublime Text, PHP, Twig, Grunt, Sass, Compass, LiveReload und ein paar Funktionen aus den “dofiles” (z.B. phpserver).

 

Wer den Beispiel-Code aus dem Video selber ausprobieren möchte, hier die Zusammenfassung:

sudo apt-get install git

cd ~
git clone https://github.com/voku/dotfiles/
cd dotfiles/
./firstInstall.sh
./bootstrap.sh
cd ~
vim ~/.extra #1

cd ~
mkdir Projects/
git clone https://github.com/voku/twig-wrapper-example/
cd twig-wrapper-example/
npm install
grunt watch

cd ~/Projects/twig-wrapper-example/
phpserver

#1 füge deine persönlichen Git-Einstellungen hier hinzu

 

Wer mehr Infos oder Erklärungen zu den hier verwendeten Tools haben möchte, sollte sich einmal folgende Videos anschauen: suckup.de/howto/html/moderner-build-development-workflow-via-bower-grunt-yeoman/

 

Twig – PHP

Als erstes möchte ich hier klären was “Twig” ist und wie man diese PHP-Bibliothek verwendet.

Was ist Twig?

Twig ist eine Open Source Template-Engine für PHP und wird z.B. von Symfony verwendet. Damit ist es möglich die Programmierung vom Layout zu trennen und Projekte somit übersichtlicher und sicherer zu erstellen. Zudem kann man Twig relativ einfach erweitern und neue Funktionen oder Filter hinzufügen. Außerdem ist die Dokumentation wirklich gut und die Einarbeitungszeit ist sehr kurz.

 

Schnelle Installation

Damit man einen schnellen Einstig in Twig bekommt, habe ich eine kleine Wrapper-Klasse geschrieben und in einem zweiten Projekt “Twitter Bootstrap” als Twig-Beispiel -Template integriert.

git clone https://github.com/voku/twig-wrapper-example/

Das Projekte ist mit Gunt + SASS + Bower + Composer etc. aufgesetzt, jedoch habe ich alle Vendor-Dateien mit in dem Repository eingecheckt, so dass man keine komplette Toolchain benötigt um die folgenden Beispiele auszuprobieren.

PS: um das Projekt zu updaten bzw. weiterzuentwickeln kann man folgende Befehle ausführen:

cd twig-wrapper-example/
rm -rf vendor/
rm composer.lock
npm install
bower install
composer install
grunt build
grunt watch

 

Syntax

Die Allgemeine-Syntax lässt sich in “output”, “function” und “comment” unterteilen.

output” ->  {{ … }}  -> um Variablen in das Template einzufügen

function” -> {% … %} -> um Funktionen auszuführen

comment” -> {# … #} -> um einen Kommentar einzufügen, welche nur im Twig sichbar ist (nicht im späterem “html”-output)

Variablen

Man kann sowohl Arrays, einfache Variablen oder ganze Objekte an Twig übergeben.

z.B.:

$object = new Object();
$twig->assign('object', $object);
$array = array(1,2,3,4,5);
$twig->assign('array', $array);
$string = 'test';
$twig->assign('string', $string);

Zudem kann man auch Variablen in einem Twig-Template definieren:

{% set totalimages = 4 %}

Filter

Auf der Kommandozeile ist man bereits an Pipes ( “|” ) gewöhnt und kann dies nun auch bei der Entwicklung nutzen. :)

{% set totalimages = object.images | length %}
{{ array[1] | striptags | raw }}

Kontrollstrukturen

“if”-Bedingungen werden wie folgt geschrieben:

{% if (name == "foo") or (name == "bar") %}
    {{ name }}!!!
{% elseif name == "test" %}
    {{ name }} -> was a test
{% else %}
    {{ name }}
{% endif %}

“loops” in Twig: for

{% for asset in headerObject %}
  <img src="{{ asset.url }}">
  <p>{{ asset.caption }}</p>
  {% if loop.index0 is divisibleby(2) %}
    <hr />
  {% endif %}
{% endfor %}

PS: außerdem kann man wie im vorherigen Beispiel – “loop” nutzen, um den Anzahl von aktuellen Durchläufe zu analysieren

 

extends

Eine Hauptfunktionalität ist die Twig-Funktion “extends“. Mit dieser Funktion kann man sein Template erweitern und zuvor definierte Bereiche (block – endblock) wiederum ersetzten.

{%extends “base.twig” %}

base.twig -> index.twig

Der vorherige Befehl bewirkt in der “index.twig” Datei, dass das angegebene Template erweitert wird. Dabei ist es sehr hilfreich möglichst viel HTML-Code in einem Basis-Twig unterzubringen. Anders wie bei vielen anderen PHP-Projekten sollte man nicht so oft via “include” inkludieren, sondern bestimmte Bereiche (blocks) im “base.twig” festlegen und diese mit Inhalten befüllen, erweitern oder leeren.

 

include

Die Funktionalität “include” lässt sich einsetzten um Template-Komponenten (z.B.: einen Slider) an mehreren Stellen einzufügen. Man hat die Möglichkeit beim “include”-Aufruf Variablen zu übergeben, jedoch kann man keine “blocks” von bereits inkludierten Templates mehr ändern.

{% include “inc_carousel.twig” %}

base.twig -> inc_carousel.twig

 

embed

Beim “embed” handelt es sich um eine Mischung aus extending & including, so kann man innerhalb des embed-Aufrufes darin befindliche “blocks” ersetzten.

{% embed “content_sidebar.twig” %}

index.twig -> content_sidebar.twig

 

Twig_Extension

Wem ein bestimmter Filter oder Funktion fehlt, kann dies sehr einfach in Twig  integrieren z.B. -> PluginHtml.php

$twig->addExtension(new PluginHtml());

 

Links

http://knpuniversity.com/screencast/twig/basics | Basics – Video
http://twig.sensiolabs.org/ | Dokumentation

Kurztipp: mysqldump + Views

Problem: “DEFINER”

Jeder MySQL-Dump welcher mit dem Befehl “mysqldump” erstellt wird beinhalte die Einstellung zum “DEFINER”.

z.B.: DEFINER=`root`@`localhost` SQL SECURITY DEFINER

Dies bedeutet, dass man diesen SQL-Dump nicht einfach z.B. auf dem Ziel-Server nutzen kann, da die Applikation wahrscheinlich / hoffentlich keinen Root-Zugriff auf die Datenbank hat.

Lösung: via “grep”

Als schnelle Lösung für diese Problem entferne ich einfach den entsprechenden DEFINER-Eintrag.

mysqldump -u your_user --skip-comments --skip-opt --complete-insert --databases your_db | grep -v 'SQL SECURITY DEFINER' > ~/your_dump.sql

http://gist.suckup.de/tpl_default.php?pid=1#sec_fb936cf7878c32a5f0b0

Tipp im Tipp

Falls man mit Windows arbeiten muss, empfehle ich die Git-Bash (MinGW + GIT) zu installieren und das “mysql/bin” Verzeichnis im Windows PATH (System -> Erweiterte Systemeinstellungen -> Umgebungsvariablen) einzutragen. So kann man den oben genannten Befehl (und vieles mehr) auch unter Windows nutzen!

 

Links & Quellen:

– http://dev.mysql.com/doc/refman/5.1/de/create-view.html
– http://www.sitepoint.com/mysql-views/
– http://www.mingw.org/
– http://msysgit.github.io/

Gists – Code-Beispiele und mehr …

Gist ist ein schneller Weg, um Code-Beispiele / Konfigurationen / etc.  mit anderen zu teilen oder für sich selber aufzubewahren. Jedes “gist” wird dabei als eigenes git-Repository angelegt, so werden diese automatisch versioniert und andere können davon einen Fork erstellen.

Leider gibt es keine Tags für die erstellten “gists”, so dass man sich ein System überlegen muss, wie man die entsprechenden Code-Beispiele wiederfindet z.B.:

– entsprechend aussagekräftige Dateinamen verwenden
– den Type der Datei immer korrekt angeben
– Tags in der Beschreibung hinzufügen #Tag1, #Tag2
– Beschreibung kurz halten

1.) meine “gists”

gist.suckup.de: Diese Webseite habe ich erstellt, um einen schnellen Überblick über meine gists zu erhalten, außerdem habe ich einige Code-Playground und andere Infos hinzugefügt.

2.) Gists organisieren und sammeln

www.gistboxapp.com: Auf dieser Webseite kann man den gists richtige Tags zuordnen und diese somit besser organisieren. Jedoch kann man diese Tags nicht via github / api abrufen, so dass diese nicht in z.B. der IDE angezeigt werden. Außerdem bietet die Webseite eine Chome-Addon, mit welchem man sehr einfach Code-Beispiele von anderen Webseiten als “gist” abspeichern kann.

 

2.) IDE-Integration

Alle großen IDEs und Texteditoren haben git / gists bereits integriert oder bieten zumindest Plugins, um z.B. selektieren Quelltext direkt als gist abzuspeichern oder gists im Quelltext einzufügen.

– PhpStorm / IntelliJ  (bereits integriert)
– Eclpise (Plugin: “EGit”)
– Sublime Text (Plugin: “gist”)
– vim  (Plugin: “gist-vim”)

Beispiel: Sublime Text + Gist

sample

 

Beispiel: PhpStorm + Gist

gist_phpstorm

Prompt › Bash

Ich habe schon vor einiger Zeit über die “.bashrc” berichtet und hier die Installation meiner dotfiles [~/.*] vorgestellt.

Heute möchte ich an einigen Bildern zeigen wie die Bash aussieht nachdem man die bereits erwähnten dotfiles installiert und wie man diese nach seinen Wünschen anpasst.

bash_prompt

1.) der Code

.bashrc: Dies ist die Konfigurationsdatei der Bash, diese wird bei jedem Aufruf einer interaktiven Shell ausgeführt. In meiner .bashrc stehen zunächst einmal ein paar Informationen, wovon ich hier nur die entsprechenden Links nennen möchte, welche man sich einmal anschauen sollte:

– http://www.kfirlavi.com/blog/2012/11/14/defensive-bash-programming/
– www.commandlinefu.com/commands/browse/sort-by-votes
– https://twitter.com/climagic

.bash_profile: Diese Datei hat die selbe Aufgabe wie die .bashrc, wird jedoch “eigentlich” nur für Login-Shells aufgerufen. In diesem Fall wird die Datei jedoch auch für interaktive Shells verwende, da wir diese in der .bashrc inkludiert haben.

for file in ~/.{path,colors,icons,exports,aliases,bash_complete,functions,extra,bash_prompt}; 
do [ -r "$file" ] && [ -f "$file" ] && source"$file" 
done 
unset file

In dieser Datei werden wiederum andere Shell-Konfigurationen geladen (siehe vorheriges Code-Beispiel), welche auch von anderen Shells (z.B.: der zsh) genutzt werden können.

Desweiteren werden einige Einstellungen in einer zweiten for-Schleife ausgeführt. Andere Einstellungen sind näher beschrieben bzw. nur für nicht root-User geeignet und werden daher einzeln ausgeführt.

 .bash_prompt: Wie wir im vorherigem Code-Ausschnitt sehen konnten, wird diese Datei zum Schluss geladen, so dass wir zuvor definierte Funktionen und Variablen verwenden können.

# Local or SSH session?
local remote=""
[ -n "$SSH_CLIENT" ] || [ -n "$SSH_TTY" ] && remote=1

Wir prüfen, ob es sich hier um ein lokales Terminal oder um eine SSH Verbindung handelt, so dass wir den Hostnamen nur anzeigen, wenn dieser auch benötigt wird.

# set the user-color
local user_color=$COLOR_LIGHT_GREEN           # user's color
[ $UID -eq "0" ] && user_color=$COLOR_RED     # root's color

Root-User bekommen in der Prompt einen Roten-Usernamen angezeigt.

PS: die User-ID (UID) ist in der passwd zu finden: “cat /etc/passwd”

# set the user
local user="\u"

Die Zeichenkette “\u” wird beim Aufruf der Bash-Prompt in den entsprechenden Usernamen umgewandelt.

PS: hier gibt es eine Übersicht über weiter Zeichenketten, welche von der Bash-Prompt verarbeitet werden können z.B. die Uhrzeit

# set the hostname inside SSH session
local host=""
[ -n "$remote" ] && host="\[$COLOR_LIGHT_GREEN\]${ICON_FOR_AT}\h"

Wie bereits erwähnt zeigen wir den Hostnamen (“\h”) nur an, wenn es sich um eine Remote-Verbindung handelt.

if [[ -n $remote ]] && [[ $COLORTERM = gnome-* && $TERM = xterm ]] && infocmp gnome-256color >/dev/null 2>&1; then
  export TERM='gnome-256color'
elif infocmp xterm-256color >/dev/null 2>&1; then
  export TERM='xterm-256color'
fi

256 Farben in der lokalen Shell verwenden.

# INFO:   Text (commands) inside \[...\] does not impact line length calculation which fixes stange bug when looking through the history
#         $? is a status of last command, should be processed every time prompt prints

Da der Bash-Prompt bestemmte Zeichen nicht mag und wir davon einige in der bereits inkludierten “.colors“-Datei verwendet haben, müssen wir diese Variablen nun hier escapen.

# Format prompt
export PS1="\`if [ \$? -eq 0 ]; then echo -e \[\$COLOR_GREEN\]\${ICON_FOR_TRUE}; else echo -e \[\$COLOR_RED\]\${ICON_FOR_FALSE}; fi\` \[$user_color\]${user}${host}\[$user_color\]:\[$COLOR_LIGHT_BLUE\]\w\[$COLOR_LIGHT_RED\]${ICON_FOR_ARROW_RIGHT}\$(__git_branch)\$(__svn_branch)\$(__git_dirty)\[$COLOR_NO_COLOUR\] "

Der Prompt wird in der Variable PS1 (“echo $PS1”) gespeichert und nach jedem Befehl auf der Kommandozeile neu aufgerufen / ausgeführt, daher rufen wir in der Variable wiederum Funktionen auf, so dass diese Funktionen ebenfalls erneut ausgeführt werden.

PS: “$?” muss als erstes ausgeführt werden, da dieser Befehl den Rückgabewert des letzten Kommandos zurückliefert

2.) Beispiele

bash_prompt_false

– Root-User wird rot gekennzeichnet

– “” anzeigen, wenn der letzte Befehl nicht korrekte funktioniert hat

 

bash_prompt_remote

– Anzeigen des Hostnamens nur bei Remoteverbindungen

– Repository-Branch (git, svn) anzeigen

–  Repository-Status anzeigen (! anfügen, wenn etwas nicht eingecheckt ist)

 

Links & Quellen:

http://wiki.ubuntuusers.de/Bash/Prompt
https://wiki.archlinux.de/title/Bash-Prompt_anpassen
http://ezprompt.net/

jQuery: width() in Prozent

Falls jemand mal die Breite eines HTML-Elements auslesen möchte und diese Wert jedoch in Prozent umgerechnet haben möchte – so geht es!

$(selector).width() / $(selector).parent().width() * 100;

Links:
http://api.jquery.com/width/

CSS > SCSS > CSS

Neue Webseiten werden heutzutage oft via SASS erstellt, aber was macht man mit alten Projekten? Kann man auch hier SASS einsetzten? – Ja! Das schöne an “SCSS”-Dateien ist das diese 100% mit CSS kompatibel sind, so dass man die entsprechende Dateiendung umbenennen kann und neue / kleine Anpassungen in der SASS-Syntax schreiben kann. Wer jedoch eine ganze CSS-Datei auf den SCSS-Style anpassen möchte kann z.B. den “sass-convert”-Befehl auf der Kommandozeile verwenden.


See the Pen tqJvn by Lars Moelleken (@voku) on CodePen.
1

CSS > SCSS

Mit dem folgendem Befehl kann man die CSS-Datei in eine SCSS-Datei umwandeln lassen.

sass-convert --from css --to scss test.css test.scss


See the Pen Arxuv by Lars Moelleken (@voku) on CodePen.
1

Es folgt eine kleine manuelle Optimierung, dabei gilt: Umso besser die ursprüngliche CSS-Datei aufgebaut war, desto besser kann diese konvertiert werden.


See the Pen eFdlJ by Lars Moelleken (@voku) on CodePen.
1

SCSS > CSS

Nun erstellen wir aus der neuen SCSS-Datei wieder eine CSS-Datei + Sourcemap

scss  --sourcemap --line-comments --style expanded test.scss test_new.css


See the Pen pErjB by Lars Moelleken (@voku) on CodePen.
1

PS: mithilfe der Source Map kann Chrome automatisch die entsprechenden Code-Stellen in der entsprechenden SCSS-Datei  anzeigen :)

 

Links:
http://sassmeister.com/
http://css-tricks.com/sass-style-guide/

Quellen:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style