jochasinga · August 29, 2015 14:21
diff --git a/extend.scss b/extend.scss
 body {
  p { 
    @include special-text("Open Sans", $my-devilish-red, 22px, 1.5em);
  }
  // A heading you want to be in "Open Sans", devilish red but not 22px and 1.5em in line-height
  h1 {
    @extend p
    font-size: initial; // use default font-size for h1
    line-height: 2em;
  }
 }
diff --git a/mixin.scss b/mixin.scss
 @mixin background-image($url-string, $repeat, $attach, $pos-value, $size) {
  background: url($url-string);
  background-repeat: $repeat;
  background-attachment: $attach;
  background-position: $pos-value;
  background-size: $size;
 }

 @mixin special-text($font-fam, $color, $size, $line-height) {
  font-family: $font-fam;
  color: $color;
  font-size: $size;
  line-height: $line-height;
 }

 body {
  // Yes, never have to rewrite those buik again!
  @include background-image("http://example.com", repeat, fixed, center, 100%);
  p {
    @include special-text("Open Sans", $my-devilish-red, 22px, 1.5em);
  }
  }
 }
diff --git a/simple.html b/simple.html
 <body>
  <div id="div-1" class="my-div">
    <img src="http://example.com" id="awesome-photo" class="my-image" />
    <p>This is an awesome photo!</p>
    <h1>This is a grand heading!!</h1>
  </div>
 </body>
diff --git a/simple.scss b/simple.scss
 body {
  #div-1.my-div {
    // All children of #div-1 with the id #awesome-photo will be applied 
    #awesome-photo { /* your style here */ };
    // Only all immediate children of #div-1 which are p (no grandchildren) will be applied 
    +p             { /* your style here */ };
  }
 }
diff --git a/variable.scss b/variable.scss
 $img-width: 100%;
 $my-devilish-red: #800000;

 #div-1 {
  // Never have remember those color and width again!
  #awesome-photo  { width: $img-width; };
  p               { color: $my-devlish-red; };
 }
	body {
	p {
	@include special-text("Open Sans", $my-devilish-red, 22px, 1.5em);
	}
	// A heading you want to be in "Open Sans", devilish red but not 22px and 1.5em in line-height
	h1 {
	@extend p
	font-size: initial; // use default font-size for h1
	line-height: 2em;
	}
	}
	@mixin background-image($url-string, $repeat, $attach, $pos-value, $size) {
	background: url($url-string);
	background-repeat: $repeat;
	background-attachment: $attach;
	background-position: $pos-value;
	background-size: $size;
	}

	@mixin special-text($font-fam, $color, $size, $line-height) {
	font-family: $font-fam;
	color: $color;
	font-size: $size;
	line-height: $line-height;
	}

	body {
	// Yes, never have to rewrite those buik again!
	@include background-image("http://example.com", repeat, fixed, center, 100%);
	p {
	@include special-text("Open Sans", $my-devilish-red, 22px, 1.5em);
	}
	}
	}
	<body>
	<div id="div-1" class="my-div">
	<img src="http://example.com" id="awesome-photo" class="my-image" />
	<p>This is an awesome photo!</p>
	<h1>This is a grand heading!!</h1>
	</div>
	</body>
	body {
	#div-1.my-div {
	// All children of #div-1 with the id #awesome-photo will be applied
	#awesome-photo { /* your style here */ };
	// Only all immediate children of #div-1 which are p (no grandchildren) will be applied
	+p { /* your style here */ };
	}
	}
	$img-width: 100%;
	$my-devilish-red: #800000;

	#div-1 {
	// Never have remember those color and width again!
	#awesome-photo { width: $img-width; };
	p { color: $my-devlish-red; };
	}