Die Import-Funktion kennt man ja bereits schon aus dem herkömmlichen CSS. Geändert hat sich nur die Schreibweise.

Beispiel: Reset

Im ersten Beispiel importieren wir Stylesheet Vorgaben, welche die Browservorgaben zurücksetzen. Optische Browserunterschiede würde man zB. in der unterschiedlichen Einrückung von Listen-Elementen wahrnehmen. Nach dem Einbinden einer Reset Datei, muss man sich um die unterschiedliche Darstellung keine Gedanken mehr machen.

Im CSS:

@import '_reset.css';

in SCSS:

@import 'reset';

Es gibt viele Reset Vorlagen im Netz die man hernehmen kann.

• Meyerweb Reset CSS
• A collection of HTML element and attribute style-normalizations
• Marx – The stylish CSS reset. (SCSS Module)
• CSS Resetter for Cordova and Phonegap (reset for mobile)

Um das CSS klein zu halten, würde ich nicht verwendete Attribute aus der Reset Datei löschen.

Beispiel: Media Queries

Hier noch ein Beispiel mit einem Media Query, der ein ausgelagertes Style Sheet importiert. In diesem Fall kommt das CSS zum Einsatz, wenn der Screen eine schmalere Breite besitzt – Portrait eben. Ist die Breite größer wie die Höhe, verwendet man den Begriff: landscape.

Im CSS:

@import url('_portrait.css') screen and (orientation:portrait);

in SCSS:

@media screen and (orientation: portrait) {
	@import 'portrait';
}