SASS Learning Notes

1. Links

• Website: http://sass-lang.com/
• Documentation: http://sass-lang.com/documentation/file.SASS_REFERENCE.html

2. Common Examples

2.1. String Interpolation

$font = "Light";

h1 {
	font-family: "Calibri #{$font}", Arial, sans-serif;
}

2.2. Loop

$colors {
	red: #ff0000,
	blue: #0000ff,
	green: $00ff00
}

@each $color, $hex in $colors {
	// code here
}

3. Snippets

3.1. Responsive Background Image

variables.scss

$widths: (
  xxxhdpi: 1280px,
  xxhdpi: 960px,
  xhdpi: 640px,
  hdpi: 480px,
  mdpi: 320px,
  ldpi: 240px,
);

$used-widths: (
  xxhdpi: 960px,
  xhdpi: 640px,
);

main.scss

.content-md {
  @each $width, $value in $used-widths {
    @media screen and (max-width: $value) {
      // string interpolation in sass
      background-image: url("../assets/img/bg_img-#{$width}.png");
    }
  }

  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

3.2. Loop to style all Headers

@for $i from 1 through 6 {
  h#{$i} {
    //styles here
  }
}

Back to articles