SCSS: Quick guide

gistfile1

SASS variables can come in six different types:

numbers 	| $myVar: 25px;
strings 	| $myStr: "some text string";
colors 		| $myColor: blue;
booleans 	| $myBool: false;
nulls		| $myVar: null;
lists		| $myList: 1px solid black; / $myMargin: 10px 10px 20px 10px;

/***********************************************************************************************/
/* NESTING */
/***********************************************************************************************/
<p>Standard paragarah</p>
<p class="intro">Standard paragarah</p>
<p><span class="highlight">Higlight paragraph</span></p>
<p id="green">Standard paragarah</p>

p {
  color: #222222;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 21px;

    &.intro {
      font-variant: small-caps;
      font-size: 16px;
      line-height: 24px;
    }

    .highlight {
      color: red;
      font-weight: bold;
    }
    
    &#green {
        color: green;
    }
}

/***********************************************************************************************/
/* MIXINS */
/***********************************************************************************************/
@mixin .myMixin {
	background-color: black;
	font-size: 16px;
}

.myStyle {
	@include myMixin;
}

/***********************************************************************************************/
/* SASS OPERATORS */
/***********************************************************************************************/
$myColor: #f00;
$basePadding: 10px;
$baseThickness: 4px;

/*SASS can perform math on color and units measurment*/
#myText {
	border: ($baseThickness + 20)/2 solid $myColor;
	color: $myColor + #00f;
	padding: $basePadding $basePadding+20;
}

$gender: "boy";
/*If gender is boy then set color to blue else red, NO SPACE AFTER IF*/
$myColor: if($gender=="boy", blue, red);

/***********************************************************************************************/
/* MIXINS WITH ARGUMETNS */
/***********************************************************************************************
@mixin customBorder ($width, $color, $style) {
	/*Define border-color, border-style, border-width*/
	border: {
		color: $color;
		style: $style;
		width: $width;
	}
}

#mypara {
	@include customBorder(2px, green, dotted);
}