SASS / SCSS Starter

• Variabeln: $varname: value; ( x LESS: $ statt @) 
• Partials: einzubindende .scss files, starten mit einem underscore, z.B. _vars.scss, durch wird daraus kein .css generiert.
• Import: Wie LESS; @import ‚filename‘ => ohne Endung, ohne underscore für Partials
• Mixins:
  • Definition: @mixin mixin-name($param){ … } 
    
  • Verwendung: .class { @include mixin-name(10px); }
• placeholder class %class-name { … } wird nur zu css konvertiert wenn es extended wird
• @extend: .random-class{ @extend %some-styles; … ; } . .random-class erbt nun die werde von %some-styles (bzw. wird in einer css definition, mit allen anderen Klassen, die %some-styles verwenden gruppiert).
• operators wie LESS ( +, – , *, / , %)
  

Examples / snippets

loop trough map

$color-map: (
	bright: $color-bright,
	key-1: #4C38D5,
	key-2: #474DE1,
	dark: #000
);

@each $id, $color in $color-map {
	[data-start="#{$id}"] {
		--color-start: #{$color};
	}
	[data-end="#{$id}"] {
		--color-end: #{$color};
	}
}

Example Output

[data-start="key-2"]{
   --color-start: #474DE1;
}
[data-end="key-2"]{
   --color-end: #474DE1;
}

multidimensional maps

$color-themes: (
  ('dark', cornflowerblue, #191970, $darkblue'),
  ('sunrise', orange, $yellow, #daa520),
  ('light', $gray-600, #eee, smoke),
);

@each $theme in $color-themes {
   $name: nth($theme,1);
   .theme-#{$color-themes.index($name)} {
     color: #{nth($theme,2)};
     backgound: #{nth($theme,3)};
     border-color: #{nth($theme,4)};
   }
}

Example Output

.theme-dark {
  color: cornflowerblue;
  background: #191970;
  border-color: #00008b;
}

When prefering inded themes (e.g. theme-1) use a @for loop:

@for $i from 1 through length($color-themes) {
   theme-#{$i} {
     $theme: nth($color-themes,$i); // <- map theme
     color: #{nth($theme,2)};
     ...
   }
}

extending

.mw-100p {
  max-width: 100%;
}
.thumbnail {
  @extend .mw-100p;
  border-radius: 50%;
}

.mw-100p, .thumbnail {
  max-width: 100%;
}

.thumbnail {
  border-radius: 50%;
}

See: Sass: @extend

References

• Functions