SCSS Cheatsheet #scss #cheatsheet

scss-cheatsheet.scss

//Single line comments are removed when Sass is compiled to CSS.

/* Multi line comments are preserved. */

/* Variables
============================== */

$body-color: #555;
$body-font: 'Roboto', sans-serif;

body {
	color: $body-color;
	font-family: $body-font;
}

/* Mixins
============================== */

@mixin center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
}

div {
	@include center;
}

@mixin size($width, $height) {
	width: $width;
	height: $height;
}

.rectangle {
	@include size(100px, 60px);
}

/* Functions
============================== */

body {
  width: round(10.25px);
}

.footer {
  background-color: fade_out(#000000, 0.25)
}

---

@function get-color($colorName) {
    @return map-get($colors, $colorName);
}

h6 {
    color: get-color(danger-400);
}

---

@function calculate-percentage($target-size, $parent-size) {
  @return $target-size / $parent-size * 100%;
}

.main-content {
  width: calculate-percentage(600px, 960px);
}

/* Extend (Inheritance)
============================== */

.text-gray {
	color: $gray;
}

.another-class {
	@extend .text-gray;
}

/* Interpolation: #{}
============================== */

$className: my-class;
$attr: background;
a.#{$className} { #{$attr}-color: #000000 }
 
/* compiles to */
a.my-class {
background-color: #000000;
}

/* Loops
============================== */

@for $i from 1 through 3 {
  .myClass-#{$i} { width: 2px * $i; }
}

/* px to em
============================== */

$browser-context: 16; // Default

@function em($pixels, $context: $browser-context) {
  @return #{$pixels/$context}em
}

body {
  font-size: em(16); // 16px = 1em
}

/* em to px
============================== */

@function em2px($target, $context: 1em) {
    @if $target == 0 {
        @return 0;
    }
    @return ($target / 1em) * ($context / 1em) * 16 + 0px;
}

.my-class {
    bottom: - em2px(1.5em) + 3px;
}