sass variable to css variable code example

Example 1: SCSS variables

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Example 2: how to make a scss variable

$variableName = item

$gray = #404040

body{
	background:$gray; 
}

Example 3: scss dynamic variable

/*Sass ( Scss ) does not allow variables to be created or accessed dynamically. 
However, you can use lists for similar behavior.*/
$list: 20px 30px 40px;    
@mixin get-from-list($index) {
  width: nth($list, $index);
}

$item-number: 2;
#smth {
  @include get-from-list($item-number);
}
/*OutPut*/
#smth {
  width: 30px; 
}

Tags:

Misc Example