Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SCSS: Quick guide
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.