SASS-y

Syntactically Awesome Style Sheets

Robert M Ricci
May 23 · 3 min read
Photo by Maik Jonietz on Unsplash
sass-learn % sudo npm i -g sass
// This installs sass globally on your machine
sass-learn % sass --watch scss/style.scss css/style.css
// This watches the folder that you sass is in and creates a css
folder with those stylings

VARIABLES

body {
font: 100% Helvetica, sans-serif;
color: #333;
}
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

NESTING

nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}

li { display: inline-block; }

a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
%btn {
display: inline-block;
border-radius: 5px;
margin: 3px;
padding: 8px 20px;
}

.btn-one {
@extend $btn;
background-color: $primary-color;
}
.btn-two {
@extend $btn;
background-color: $secondary-color;
}

PARTIALS

style.scss@import 'buttons'$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}

li { display: inline-block; }

a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}

RESOURCES

Geek Culture

Proud to geek out. Follow to join our +1.5M monthly readers.