SASS CHEATSHEET BY @CODE4MK

» scss
Variable Inheritance / @extend

$color: red; .parent{

$bg-color: $color; color: red;
font-size: 25px;
}
.child{
Nesting / child . border: 2px solid red;
@extend .parent;
.users{ }
color: red;
background: blue;
.profile{ Ebmbrace %
color: white;
} %parent{
} color: red;
/*.users .profile*/ font-size: 25px;
}
. .child{
border: 2px solid red;
Import @extend %parent;
}
@import “mixins/_button”;
Function

$total-width: 100/12;

Mixin & include @function col-size($n){

return $total-width*$n;
@mixin bg-style($font-color, $bg-color: }
yellow) { .col-md-4{
color: $font-color; width: col-size(4);
background: $bg-color; }
/*content purpose */
@content
} Condition
.profile{
@include bg-style(red, blue); @if condition {
} …………………………………
/*content purpose */ }
.profile{ @else if condition {
@include bg-style(red, blue){ …………………………………
font-size: 25px; }
} @else {
} …………………………………
}
…………………. https://twitter.com/code4mk ………….……........ …………………………. https://code4mk.org ………….…………………

For Each

@for $i from 1 through 3{ $topic: puma, sea-slug, egret, salamander;

.color-#{$i}{ @each $animal in $topic {
color: red; .#{$animal}-icon {
} color: red;
} }
. }
.
Each /map
List
$icons: (
checkmark: a, $list: red, blue;
plus: b,
minus: c .body{
); color: nth($list);
@each $name, $value in $icons { }
.icon--#{$name} {
content: $value;
} Interpolation
} #{$var}

..

.sass extension

Basic change Mixin / include

 No need semicolon ; =bg-style($font-color, $bg-color: yellow)

 Not need curly bracket {} color: $font-color
 Mixin means = background: $bg-color
 Include means +
/*content purpose
. @content
Each
.profile
+bg-style(red, blue)
$topic: puma, sea-slug, egret, salamander;
@each $animal in $topic {
/*content purpose
.#{$animal}-icon {
.profile
color: red;
+bg-style(red, blue)
}
font-size: 25px
}
.

@code4mk // Mostafa Kamal

 SASS Functions Lists
.

RGB Functions List Functions

rgb($red, $green, $blue) length($list)
rgba($red, $green, $blue, $alpha) nth($list, $n)
red($color_value) set-nth($list, $n, $value)
green($color_value) join($list1, $list2, [$separator,
blue($color_value) $bracketed])
mix($color1_name, $color2_name, $weight) append($list1, $val, [$separator])
zip($lists...)
index($list, $value)
HSL Functions list-separator($list)
hsl($hue, $saturation, $lightness) is-bracketed($list)
hsla($hue, $saturation, $lightness, $alpha)
.
hue($color)
saturation($color) Opacity Functions
lightless($color) alpha($color) / opacity($color)
adjust-hue($color, $degrees) rgba($color, $alpha)
lighten($color,$amount) opacify($color, $amount) / fade-
darken($color,$amount) in($color, $amount)
saturate($color,$amount) transparentize($color, $amount) / fade-
desaturate($color,$amount) out($color, $amount)
complement($color) .
grayscale($color)
inver($color) Map Functions
. map-get($map, $key)
map-merge($map1, $map2)
String Functions map-remove($map, $keys...)
unquote($string) map-keys($map)
quote($string) map-values($map)
str-length($string) map-has-key($map, $key)
str-insert($string, $insert, $index) keywords($args)
str-index($string, $substring) .
str-index($string, $substring)
str-slice($string, $start-at, [$end-at]) Selector Functions
to-upper-case($string) selector-nest($selectors...)
to-lower-case($string) selector-append($selectors...)
selector-extend($selector, $extendee, $extender)
selector-replace($selector, $original,$replacement)
selector-unify($selector1, $selector2)
Number Functions
is-superselector($super, $sub)
percentage($number)
selector-parse($selector)
round($number)
.
ceil($number)
floor($number) Code4mk organization
abs($number) https://code4mk.org
Min($numbers…) Let’s code with fun
Max($numbers…) @code4mk
Random($limit) //Mostafa Kamal // code4mk //