amitabhaghosh197
3/23/2017 - 6:48 AM

Sass Important

Sass Important

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