MENU


SCSS, SASS

A full tutorial of SCSS/SASS can be found here.

Another popular CSS preprocessor, SCSS stands for Sassy CSS. The CSS frameworks Vanilla, Compass and Bourbon are based on SCSS.

We must pre-process SCSS files:

> npm install -g sass > sass --watch my_styles.scss output.css

RESETRUNFULL
// _definitions.scss
$font-stack:    Helvetica, sans-serif;
%my-box{    
   border: 1px solid #fca;    
   box-shadow: 3px 3px 3px 3px lightgreen;    
   padding: 3px;
}
@function pow($base, $exponent) {    
   $result: 1;    
   @for $_ from 1 through $exponent {      
      $result: $result * $base;    
   }    
   @return $result;
}

// my_styles.scss
@use 'definitions';
@use "sass:list";
@use "sass:map";
@mixin transform($property, $prefixes_list) {    
   @each $prefix in $prefixes_list{       
      -#{prefix}-transform: $property;    
   }    
   transform: $property;
}
$primary-color: lighten(#383,10%);  
p{    
   background:yellow;
}
div {    
   @extend %my-box, p;    
   @include transform(rotate(30deg - 40deg), moz webkit);    
   font: 100% definitions.$font-stack;    
   @if 1vw < 1.3vw * 2{        
      p {            
         color: $primary-color;            
         margin-left: definitions.pow(4, 3) * 1px;            
         &:hover {                
            $weights:("regular":400,"medium":500,"bold":700);                
            font-weight: map.get($weights, "medium");;               
            @debug map-values(map-remove($weights,"regular"));       // 500,700 
            @debug map-keys(map-merge($weights, $weights));          // "regular", "medium", "bold"            
         }        
      }    
   } @else {        
      $my_list: 3px, 30px, 300px;        
      $my_list: append($my_list, 3000px);        
      @debug index($my_list,30px);        // prints 2 in command-line window        
      @debug list-separator($my_list);  // prints 'comma'        
      @debug length(join($my_list,$my_list));  // prints 8        
      font-size: nth($my_list, -3);  // 30px        
      $my_list: set-nth($my_list,2,60px);    
   }
}

<!DOCTYPE html><html><head>
   <link rel="stylesheet" type="text/css" href="/shared/output.css" />
</head><body>    
   <div>        
      The other modules are:        
      <p>sass:color</p>        
      <p>sass:math</p>        
      <p>sass:meta</p>        
      <p>sass:selector</p>        
      <p>sass:string</p>    
   </div><br/>    
   <p>Variable names begin with $.</p>
</body></html>

SASS is the older syntax of SCSS. It uses indentation in place of '{}', and does away with ';' at the end of each rule.

nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px text-decoration: none