SaSS basics to advanced: Give superpower to your CSS
Table Of Contents
SASS is CSS with superpowers.
SASS is CSS with superpowers. So, as front-end developer and learner I researched about LESS which was great but very soon I changed to SASS because of using pre/post processor you can write CSS more programmatically and can help you develop robust systems.
Nonetheless, I regularly find that individuals just know a couple of fundamentals of SASS like settling and factors when there is a lot more it can do. So today I figured I would share a boost to the fundamentals of SASS.
Intro
SASS stands for Syntactically Awesome Style Sheets - it’s CSS with superpowers. SASS is the most popular CSS pre-processor. It allows you to write SASS/SCSS which gets compiled into plain CSS for the browser to read. SASS vs SCSS
The only difference between SASS and SCSS is the syntax. SCSS is most similar to standard CSS and uses curly braces and semi colons while SASS uses indentation instead.
NESTING
Nested styles will compile into chained selectors. You can also use and operator which represents the current selector.
SCSS:
.container {
min-width: 400px;
max-width: 1024px;
}
.container a {
color: #blue;
}
.container.padding-small {
padding: 5px;
}
.container__heading {
font-size: 1.5rem;
}
COMPILED CSS
.container {
min-width: 400px;
max-width: 1024px;
a {
color: blue;
}
&.padding-small {
padding: 5px;
}
&__heading {
font-size: 1.5rem;
}
}
Calculations
Execute calculations directly in the stylsheet that will output as the calculated value. Keep in mind you can’t mix units and this is not the same as the Calc() function which works in plain CSS.
SCSS
.sidebar {
width: 390px;
}
.half-column {
width: 50%;
}
Compiled CSS
.sidebar {
width: 132px + 258px;
}
.half--column {
width: 100/2 * 1%;
}
Variables
Use variables to store re-usable values throughout your project. Useful for consistent clours and spacing units.
SCSS
$primary: #ff01b1;
$spacing-unit: 10px;
.button {
background-color: $primary;
padding: $spacing-unit;
margin: 0 0 $spacing-unit *2;
}
Compiled CSS
.button {
background-color: #ff01b1;
padding: 10px;
margin: 0 0 20px;
}
Placeholders
Blocks of reusable CSS that helps gets compiled into comma separated selectors.
SCSS
%container {
border-readius: 5px;
border: 1px solid #ff01b1;
padding: 10px;
}
.article {
@extend %container;
margin: 0 0 26px;
}
.card {
@extend %container;
}
Compiled CSS
.article,
.card {
border-radius: 5px;
border: 1px solid #ff01b1;
padding: 10px;
}
.article {
margin: 0 0 20px;
}
Mixins
Blocks of reusable CSS you can pass values to. You can set a default that will be used if no value is set.
SCSS
@mixins square($size: 100px) {
height: $size;
width: $size;
}
.avatar {
@include square();
}
.featured-image {
@include square(400px);
}
Compiiled CSS
.avatar {
height: 100px;
width: 100px;
}
.featured-image {
height: 400px;
width: 400px;
}
Partials
Ways to split up your CSS into reusbale chunks. partial file names start an underscore.
File structure
- _footer.scss
- _header.scss
- _settings.css
- _header.scss
Import partials into SCSS file
@import 'scss/settings';
@import 'scss/header';
@import 'scss/footer';
Let’s get into some advanced tutorials.
Share on: