Sass Important #sass #important #usefull

sass.md

Function for contentwidth:

Reff: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_defaults_

@function contentWidth(){
 $n: (9px / 1170px * 100) + 0%;
  @return ceil( (66.66666667%  - $n) );
}

then in css

.home-physco-content{
 width: contentWidth();
 float: left;
}

.featured-img{
width: 100% - contentWidth();
}

Dynamic Mixin with Boolean

@mixin dynamicarticleheader(  $fontweight, $color , $spancolor, $margin-bot, $padding, $span : false){
	
	 
	@if $span == true {

	.article-header .entry-title{
	  color: $color;
	  font-weight: $fontweight;
	  margin-bottom: $margin-bot;

	  span{
       border-bottom: 2px solid $spancolor;
       padding-bottom: $padding;
       @include display( inline-block );
      }

	 }

       
	} 
	@else {
    
    .article-header .entry-title{
	  color: $color;
	  font-weight: $fontweight;
	  margin-bottom: $margin-bot;

	  span{
       border-bottom: 0px solid transparent;
       padding-bottom: 0px;
       @include display( inline-block );
      }

	 }

	 


	}
}

@for loop

$max: 100;
$step : 5;
@for $i from 0 through ceil($max / $step ){
  $value :  $i   * $step ;

     .margin-top-#{$value}{
     	margin-top: $value + px;
     }
     .margin-left-#{$value}{
      margin-left:  $value +px ;
     }

     .margin-right-#{$value}{
      margin-right:  $value +px ;
     }

     .margin-bottom-#{$value}{
      margin-bottom:  $value +px ;
     }

     .margin-tb-#{$value}{
      margin-top:  $value +px ;
      margin-bottom:  $value +px ;
     }

     

	}

Reff: https://stackoverflow.com/questions/18802148/writing-a-loop-that-increments-by-a-value-other-than-1-in-sass

Mixin with true false font-size

@mixin font-size($fontSize, $lineheight: false , $l: null){
  font-size: $fontSize;
  //$l : null;
  @if $lineheight == true{
    line-height : $l;
  }
  
}

.font{
  @include font-size( 16px, $l: 1.15, $lineheight : false );
}