Praktische SASS-Mixins für Webworker

Matthias Fänger
Top SASS @mixins

Mixins für SASS/SCSS können einem Webworker eine Menge Arbeit sparen. Einige davon nutze ich jeden Tag, da diese bei fast jedem Projekt zum Einsatz kommen. Deshalb sollte man diese Liste mit praktischen SASS-Mixins immer griffbereit haben. Natürlich ohne Gewähr auf Vollständigkeit.

  1. Objekte vertikal mittig ausrichten

    Leider immer noch ein großes Problem: Objekte vertikal mittig ausrichten. Da ich persönlich die meisten Lösungsansätze (Tabellen-Display & Co.) nicht mag, verwende ich meistens diesen @mixin:

    @mixin vertical-align($position: relative) {
    	position: $position;
    	top: 50%;
    	-webkit-transform: translateY(-50%);
    	-ms-transform: translateY(-50%);
    	transform: translateY(-50%);
    }
    .class {
         @include vertical-align();
    }
    
  2. clearfix

    Ohne clearfix kommt man als Webworker immer noch nicht aus. Deshalb hier ein praktischer @mixin dafür:

    @mixin cf {
    	&:after {
    		content: " ";
    		display: block;
    		clear: both;
    	}
    }
    .class {
         @include cf;
    }
  3. Vendor prefix

    Leider benötigt man immer noch s.g. Vendor-prefixes, wenn man mit CSS3 arbeiten möchte. Folgender vereinfach die Arbeit damit:

    @mixin css3($property, $value) {
         @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
              #{$prefix}#{$property}: $value;
         }
    }
    .class {
         @include css3(transition, 1s);
    }
  4. Opacity in allen Browsern

    Um sicher zu gehen, dass opacity auch unter älteren Browsern funktioniert, lohnt sich dieser @mixin:

    @mixin opacity($opacity) {
         opacity: $opacity;
         $opacity-ie: $opacity * 100;
         filter: alpha(opacity=$opacity-ie); //IE8
    }
    
    .class {
         @include opacity(0.8);
    }
    
  5. Border Radius

    Dieser @mixin für einen Border Radius lässt sich natürlich auch ganz einfach für die verschiedenen Ecken anpassen. Dieser ist allgemein für alle Ecken gültig:

    @mixin border-radius($radius) {
         -moz-border-radius: $raduis;
         -webkit-border-radius: $radius;
         border-radius: $radius;
         background-clip: padding-box;  
    }
    
    .class {
         @include border-radius(50%);
    }
    

    Die Angabe background-clip dient dazu, überstehende Ränder zu beschneiden.

SASS SCSS Responsive Webdesign Tipps Tricks Mixins Webdesign

Sie brauchen Hilfe?

Sie brauchen Hilfe bei der Erstellung einer professionellen Website? Suchmaschinenoptimierte und mobilfreundliche (responsive) Websites sind mein Spezialgebiet. Ich berate Sie gerne unverbindlich zum Thema Webdesign und -entwicklung.

Kontaktieren Sie mich ›