(ง •̀_•́)ง Ming and Her Code

References

Cover topics


Variable

$text-color: red;

h1 {
 color: $text-color;
}

back to top

Nesting

nav {
 ul {
  li {
  }
 }
}

back to top

Mixins: reusable CSS

//As features are added to browsers, CSS rules using them may need vendor prefixes.
@mixin box-shadow($x, $y, $blur, $c) {
 -webkit-box-shadow: $x, $y, $blur, $c;
 -moz-box-shadow: $x, $y, $blur, $c;
 -ms-box-shadow: $x, $y, $blur, $c;
 box-shadow: $x, $y, $blur, $c;
}

div {
 @include box-shadow(0px, 0px, 4px, #fff);
}

back to top

If-Else statement

@mixin text-effect($val) {
 @if $val == danger {
  color: red;
 } @else if $val == alert {
  color: yellow;
 } @else if $val == success {
  color: green;
 } @else {
  color: black;
 }
}

#box {
 @include border-stroke(medium);
}

back to top

For loop

@for $j from 1 through 5 {
 .text-#{$j} {
  font-size: $j * 10px;
 }
}
//can be from 1 through 5 or from 1 to 6
//#{$j} is the number plugin point

back to top

Each and Map

@each $color in blue, red, green {
 .#{$color}-text {
  color: $color;
 }
}

$colors: (
 color1: blue,
 color2: red,
 color3: green
);

@each $key, $color in $colors {
 .#{$color}-text {
  color: $color;
 }
}

.blue-text {
 color: blue;
}

.red-text {
 color: red;
}

.green-text {
 color: green;
}
//both output the same thing

back to top

While loop

$x: 1;
@while $x < 13 {
 .col-#{$x} {
  width: 100%/12 * $x;
 }
 $x: $x + 1;
}

back to top

Split code into smaller chunks with partials

Name of the partials should start with a underscore(_), which tells Sass it is a small segment of CSS and not to convert it into CSS file. Also, Sass files end with the .scss file extension.

To Bring in file _mixins.scss:

//In the main.scss file
@import "mixins";

back to top

Extend

.panel {
 background-color: red;
 height: 70px;
 border: 2px solid green;
}

.big-panel {
 @extend .panel;
 width: 150px;
 font-size: 2em;
}

back to top