Patricio Vargas
Software Engineer
Getting started with SASS
Patricio Vargas {Pato}
Software Engineer
{ Syntactically Awesome Stylesheets}
What is SASS?
Why Sass?
DRY
{Don't repeat your self}
File Extensions
.SCSS AND .SASS
.content-navigation
border-color: $blue
color: darken($blue, 9%).content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}Installing SASS
npm install -g sass
Compile your SASS into CSS
sass your-scss-file-path your-css-file-path
sass sass/styles.scss css/styles.css
Variables in SASS
$font: Helvetica, sans-serif;
$primary-color: #222;
body {
font: 100% $font;
color: $primary-color;
}
Compiled SASS
$font: Helvetica, sans-serif;
$primary-color: #222;
body {
font: 100% $font;
color: $primary-color;
}
body {
font: 100% Helvetica, sans-serif;
color: #222;
}
.scss
.css
Nesting in SASS
div {
height: 100vh;
a {
color: $primary-color;
}
}
Compiled SASS
div {
height: 100vh;
}
div a {
color: #222;
}
div {
height: 100vh;
a {
color: $primary-color
}
}
.scss
.css
Mixins in SASS
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.card-box {
@include transform(rotate(30deg));
}Compiled SASS
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.card-box {
@include transform(rotate(30deg));
color: #000;
}.card-box {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
color: #000;
}
.scss
.css
Functions in SASS
@function my-calc($x, $y){
@return $x + $y
}
Compiled SASS
@function my-calc($x, $y){
@return $x + $y
}.my-module {
padding: my-calc(10px, 5px);
}
.scss
.css
Warning!
2px+2px
2px + 2px
When to use Mixins or Functions?
Partials in SASS
.btn {
border-radius: 3px;
border: 1px solid red;
}
You might name it something like _buttons.scss
Imports in SASS
/*ABSTRACT*/
@import "abstracts/functions";
@import "abstracts/mixins";
@import "abstracts/variables";
/*BASE*/
@import "base/base";
@import "base/animations";
@import "base/typography";
@import "base/utilities";
/*LAYOUT*/
@import "layout/header";
@import "layout/grid";
@import "layout/footer";
@import "layout/navigation";
/*COMPONENTS*/
@import "components/button";
@import "components/composition";
@import "components/feature-box";
@import "components/cards";
@import "components/story";
@import "components/bg-video";
@import "components/form";
@import "components/popup";
/*PAGES*/
@import "pages/home";
/*MEDIA QUERIES*/
@import "mediaQueries/queries";If/else statements in SASS
@mixin response($breakpoint) {
@if $breakpoint == big-desktop {
//1800px
@media (min-width: 112.5em) {
@content;
}
} @else if $breakpoint == tab-land {
//<1200px
@media (max-width: 75em) {
@content;
}
} @else if $breakpoint == tab-port {
//<900px
@media (max-width: 56.25em) {
@content;
}
} @else {
//<600px
@media (max-width: 37.5em) {
@content;
}
}
} @include response(big-desktop) {
-webkit-clip-path:
polygon(0 0, 100% 0, 100% 85vh, 0 100%);
clip-path:
polygon(0 0, 100% 0, 100% 85vh, 0 100%);
}
Thanks!
Getting Started with SASS
By Patricio Vargas
Getting Started with SASS
Presentation on how to get started with SASS
