sass use code example
Example 1: scss variables
$base-color:
Example 2: Sass Variables
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}
width: $myWidth;
}
Example 3: css sass scss
/*SMART DIFFERENCE*/
/*CSS*/
body {
font: 100% Helvetica, sans-serif;
color:
}
/*SCSS*/
$font-stack: Helvetica, sans-serif;
$primary-color:
body {
font: 100% $font-stack;
color: $primary-color;
}
/*SASS*/
$font-stack: Helvetica, sans-serif
$primary-color:
body
font: 100% $font-stack
color: $primary-color
Example 4: sass mixin
@mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false){
@include pseudo($pos: $position);
width: 0;
height: 0;
@if $round {
border-radius: 3px;
}
@if $direction == down {
border-left: $size solid transparent;
border-right: $size solid transparent;
border-top: $size solid $color;
margin-top: 0 - round( $size / 2.5 );
} @else if $direction == up {
border-left: $size solid transparent;
border-right: $size solid transparent;
border-bottom: $size solid $color;
margin-bottom: 0 - round( $size / 2.5 );
} @else if $direction == right {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-left: $size solid $color;
margin-right: -$size;
} @else if $direction == left {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-right: $size solid $color;
margin-left: -$size;
}
}