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
SCSS:
.mw-100p {
max-width: 100%;
}
.thumbnail {
@extend .mw-100p;
border-radius: 50%;
}
Outputs (CSS):
.mw-100p, .thumbnail {
max-width: 100%;
}
.thumbnail {
border-radius: 50%;
}
See: Sass: @extend
References