Sass Basics

Contents

• Sass
• Style(.sass, .scss)
• Variable
• &
• Inheritance
• Mixin
• Partial

Sass

Sass : Syntactically Awesome Style Sheets (Web)
We can write structured style and compile as .css

Install

sass command requires Ruby, if you don’t have Ruby, please install.

sudo gem install sass

Style(.sass, .scss)

Sass has 2 styles

Variable

Add $ before variable name

$abc : 10px;
$var : 10%;
$var1 : red;
$red-shadow : 0 0 1px red;

div {
   color: $var1;
   height: $abc + 10px;
}

&

& indicates parent
Example

a.btn {
	border-radius: 15px;
	background-color: red;
	&:hover {
		background-color: white;
	}
}

In this case, & is a

Inheritance

Include other’s parameters

.var1  {
   color: red;
   border: 10px solid;
}

.var2center {
    @extend .var1;  /* include var1 style */
    text-align: center;
}

Mixin

Mixin is mini template. It’s like

@mixin round-btn {
   border: 1px solid white;
   border-radius: 5px;
}

@mixin btn-color($color) {
   @include round-btn;
   color : $color;
}

.red-btn {
  @include btn-color(red);
}

We can use default value

@mixin transition($duration:3s){
    -webkit-transition:$duration ease-out;
    -moz-transition:$duration ease-out;
    -ms-transition:$duration ease-out;
    -o-transition:$duration ease-out;
    transition:$duration ease-out;
}

Partial

Import file itself. It;s like mixin and extend, but not compiled just import
The name starts _ Example is _base.scss

@import "base";   // relative path