tejuafonja · April 4, 2018 18:55
diff --git a/1 Introduction to sass - scss b/1 Introduction to sass - scss
 Sass is CSS pre-processor that allows you to 

 a. Use variables
 b. Nest CSS - this helps you have neat structure
 c. Seperate your CSS to modules (partials)
 d. Extend some other pre-defined rules e.g using @extend .btn;
 e. Use Operators like addition division, logic etc 
 f. Add functionalities that allow you to use functions called Mixins


 You can write Sass (indentation matters alot) or Scss (more like CSS except you get additional Sass functionalities)

 Inorder to use Sass, you need to have Ruby iinstalled because it is written in Ruby. Then install Sass.
 You need to pre-process Sass to Css before you can use it on the browser because browsers only understand CSS.
 You might want to use task scheduling tools like Gulp to automate the process.

 Folder structure
 -- _base.scss
 |
 |
 -- _variables.scss
 |
 |
 -- style.scss - does @import "variables" and Sass automagically figures it out that its '_variables.scss'
diff --git a/2 Extending a class b/2 Extending a class
 %btn {
  color: $red;
  background: $green
 }

 the % sign will hide the btn itself and just output it wherever it was extended.

 .btn-default {
  @extend %btn;
  font-size: 1.2rem;
 }
 .btn-cool {
  @extend %btn;
  font-size: 1.7rem;
 }


 // .btn-default will be outputed as
 .btn-default, .btn-cool {
  color: $red;
  background: $green
 }

 .btn-default {
  font-size: 1.2rem;
 }
 
 .btn-cool {
  font-size: 1.7rem;
 }
diff --git a/3 Operations b/3 Operations
 // http://placehold.it/500x500 - for placeholder images

 @mixin imagegrid($qty, $margin) {
  width: ((100% - (($qty - 1) * $margin)) / $qty);
 }
diff --git a/4 Using Mixins b/4 Using Mixins
 Setting up mixins
 @mixin backImage($image, $height) {
  background: url($image);
  bacground-repeat: no-repeat;
  backround-position center center;
  background-size: cover;
  height: $height;
 }

 Using mixins


 .jumbotron {
  @include backImage('../images/image-jpg', 600px);
 }
diff --git a/5 Working with lists b/5 Working with lists
 $rounded: 10px 5px 0px 4px;

 .item {
  border-radius: nth($rounded, 1); // uses 10px
 }
diff --git a/6 Writing comments b/6 Writing comments
 /* some comments */ - this might not show up if the SCSS is compressed
 /*! some comments */ - this will show up irrespective of how its output file is processed
 // some comments - this only show up in the SCSS file
diff --git a/7 Modifying class with pseudoclass b/7 Modifying class with pseudoclass
 .btn-cool {
  @extend %btn;
  font-size: 1.7rem;
  &:hover {
    opacity: 0.7;
  }
  #header & {
    color: $pink // what this does is that whenever we are in the header session and we see a btn-cool, the color will be pink.
  }
 }

diff --git a/8 Conditional Statements b/8 Conditional Statements
 @mixin break($args...) {
  @if length($args) == 1 {
   @media (min-width: nth($args, 1)) {
    @content;
   }
  } @else {
    @media (min-width: nth($args, 1))
      and (max-width: nth($args, 2)) {
        @content;
      }
  }
 }
diff --git a/9 Looping through lists with @for b/9 Looping through lists with @for
 $color-headlines: $blue, $purple, $green, $red;

 @for $item from 1 through length($color-headlines) {
  h#{$item} {
    color: nth($color-headlines, $item);
  }
 }
diff --git a/91 Using @content for media queries b/91 Using @content for media queries
 @mixin break($length( {
  @media (min-width: $length) {
    @content;
  }
 }


 nav {
  header & {
    background: darken($blue, 15%);
  }
  
  .branding {
    display: none;
    @include break(1000px) {
      display: block;
    }
  }
 }
diff --git a/92 Going through a list with @each b/92 Going through a list with @each
 $color-btn-names: 'default', 'hot', 'cool';
 $color-btn-values: $color-main, $red, $blue;

 @each $name in $color-btn-names {
  $i: index($color-btn-names, $name);
  
  .btn-#{$name} {
    @extend %btn;
    background: nth($color-btn-value, $i);
  }
 }
diff --git a/93 Working with map data type b/93 Working with map data type
 $color-btns: (
  default: $color-main,
  hot: $red;
  cool: $blue
 )

 @each $key, $value in $color-btns {
  .btn-#{$key} {
    @extend %btn;
    background: $value;
  }
 }
	Sass is CSS pre-processor that allows you to

	a. Use variables
	b. Nest CSS - this helps you have neat structure
	c. Seperate your CSS to modules (partials)
	d. Extend some other pre-defined rules e.g using @extend .btn;
	e. Use Operators like addition division, logic etc
	f. Add functionalities that allow you to use functions called Mixins


	You can write Sass (indentation matters alot) or Scss (more like CSS except you get additional Sass functionalities)

	Inorder to use Sass, you need to have Ruby iinstalled because it is written in Ruby. Then install Sass.
	You need to pre-process Sass to Css before you can use it on the browser because browsers only understand CSS.
	You might want to use task scheduling tools like Gulp to automate the process.

	Folder structure
	-- _base.scss
	\|
	\|
	-- _variables.scss
	\|
	\|
	-- style.scss - does @import "variables" and Sass automagically figures it out that its '_variables.scss'
	%btn {
	color: $red;
	background: $green
	}

	the % sign will hide the btn itself and just output it wherever it was extended.

	.btn-default {
	@extend %btn;
	font-size: 1.2rem;
	}
	.btn-cool {
	@extend %btn;
	font-size: 1.7rem;
	}


	// .btn-default will be outputed as
	.btn-default, .btn-cool {
	color: $red;
	background: $green
	}

	.btn-default {
	font-size: 1.2rem;
	}

	.btn-cool {
	font-size: 1.7rem;
	}
	// http://placehold.it/500x500 - for placeholder images

	@mixin imagegrid($qty, $margin) {
	width: ((100% - (($qty - 1) * $margin)) / $qty);
	}
	Setting up mixins
	@mixin backImage($image, $height) {
	background: url($image);
	bacground-repeat: no-repeat;
	backround-position center center;
	background-size: cover;
	height: $height;
	}

	Using mixins


	.jumbotron {
	@include backImage('../images/image-jpg', 600px);
	}
	$rounded: 10px 5px 0px 4px;

	.item {
	border-radius: nth($rounded, 1); // uses 10px
	}
	/* some comments */ - this might not show up if the SCSS is compressed
	/! some comments / - this will show up irrespective of how its output file is processed
	// some comments - this only show up in the SCSS file
	@mixin break($args...) {
	@if length($args) == 1 {
	@media (min-width: nth($args, 1)) {
	@content;
	}
	} @else {
	@media (min-width: nth($args, 1))
	and (max-width: nth($args, 2)) {
	@content;
	}
	}
	}
	$color-headlines: $blue, $purple, $green, $red;

	@for $item from 1 through length($color-headlines) {
	h#{$item} {
	color: nth($color-headlines, $item);
	}
	}
	@mixin break($length( {
	@media (min-width: $length) {
	@content;
	}
	}


	nav {
	header & {
	background: darken($blue, 15%);
	}

	.branding {
	display: none;
	@include break(1000px) {
	display: block;
	}
	}
	}
	$color-btn-names: 'default', 'hot', 'cool';
	$color-btn-values: $color-main, $red, $blue;

	@each $name in $color-btn-names {
	$i: index($color-btn-names, $name);

	.btn-#{$name} {
	@extend %btn;
	background: nth($color-btn-value, $i);
	}
	}