SASS combined with CSS

Hello 👋 I hope you are doing well if you are reading this article, I think you are trying to understand SASS and you know what it is or maybe out of curiosity it just to know.

SASS is a css preprocessor that facilitates tasks in large projects where the style sheets become larger, you have several lines of css codes, you can no longer maintain your css codes.

This is where SASS becomes useful it has features that don’t yet exist in CSS like nesting, creating functions with mixins, inheritance and other nifty things that help you write maintainable CSS code.

You have the possibility to reuse your code, to split it into files and also manage to create functions, variables, nest your CSS selectors and other shortcuts that SASS has.

Note: To understand its use I want to give you an example where I use two cards.

How to use Sass

To use SASS you must configure it on your project you just need to download and install Node js first, then thanks to the NPM package manager you will install SASS in your project by following its steps:

1. Open Terminal enter

npm install -g scss // global installation

global installation You avoid installing it each time you plan to work with SASS.

2. In the project folder create a SASS file on the one you are going to work on

style.scss //style is the name of the file and .scss is the name of the SASS extension

3. You will use the command to generate a style.css file from the SASS file. (sass --watch input.scss output.css)

sass --watch style.scss style.css

Note: You will code in the SASS file (style.scss) not in style.css, it is SASS that will generate for you a CSS file with the same code and which is also compatible (for browsers).

There is another way to configure SASS in your project in an easiest way, it is to download the Live Sass Compiler extension in VS code, create a file with the SASS extension then click below on Watch Sass to generate a CSS file which will appear as soon as it detects the presence of a SASS file.

Once SASS is installed or configured in your project folder, you will have three files style.css, style.scss and style.css.map and here you are ready to work with SASS go to discover other features.

Note: if you come back soon to continue working first click on Watch Sass for SASS to generate the changes in the CSS file, otherwise nothing will be generated in the CSS file.

Variables

Example:

body {
font-family: ‘Poppins’, Helvertica, sans-serif;
background-color: #ab99ca;
padding: 2rem;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

Seeing this example it’s really CSS but if in the project I want to reuse the color, the padding or the font I can’t write them another time because of the need to create variables. To create a variable we use the dollar character followed by the name of the variable and a colon the value (it is better to create a name that reflects the object you are going to use).

Example: style.scss

/* Creating and Using Variables */

$fonts: ‘Poppins’, Helvertica, sans-serif;
$primary-color: #ab99ca;
$spacing: 2rem;

body {
font-family: $fonts;
background-color: $primary-color;
padding: $spacing;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

We will now see how to organize the codes thanks to IMPORTS and the codes will be cut into files.

Creation of Files

Create three files one named _variables.scss where the variables will be stored, then _mixins.scss will store the functions that we will reuse and a file _card.scss for the styles of our cards.

Note: When creating a file, the file name will be followed by an underscore(_) at the beginning to prevent it from being compiled by SASS.

File _variables.scss

Cut and Paste the variables created in the style.scss file

$fonts: ‘Poppins’, Helvetica, sans-serif;
$primary-color: #ab99ca;
$spacing: 2rem;
$dark-grey: #999;

File _mixins.scss

This is where the reusable functions will be created with MIXINS.

MIXINS allows you to create reusable functions, to declare a function you must enter @mixin name_fonction { content } or if your function has a parameter, you must enter @mixin name_fonction($name_variable) { content }

Note: To use it, you have to import it by typing @include namefonction(); and it saves time in a large project

/* Add your codes to the file _mixins.scss */

@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}

/* $radius this the parameter of the function */

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}

File _card.scss

.card {

background-color: white;
width: 20rem;
overflow: hidden;
margin: 2rem;
box-shadow: 5px 5px 5px 5px #000;
@include border-radius(0.5rem); /* using the mixins function */

/*
NESTING

l allows to simplify the writing of the code, and it has this possibility
nest css selectors.

*/
img {
height: 15rem;
background-image: url(‘/images/image2.jpg’);
background-size: cover;
background-position: center center;
}

.card_content {
padding: $spacing;
}

.card_title {
margin: 0;
color: black;
}

.card_description {
margin: 0;
color: $dark-grey;
}

/*

ALIAS

You can use the alias & OU and followed by the class name
which will take over the parent selector, make it “&_dark”
which is the name of the variable.

*/

&_dark {

background-color: black;

.card_image {
background-image: url(‘/images/image1.jpg’);
}

.card_title {
color: white;
}

}

}

File Imports

File style.scss

/* file import */

@import ‘variables’;
@import ‘mixins’;
@import ‘card’;

body {

font-family: $fonts; /* variable usage */
background-color: $primary-color;
padding: $spacing;
min-height: 100vh;
@include flex-center(); /* using the mixins function */
}

File index.html

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>

<div class=”card”>
<img src=”/images/image1.jpg” alt=””>
<div class=”card_content”>
<h2 class=”card_title”>Lorem</h2>
<p class=”card_description”>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum porro dolores sapiente.</p>
</div>
</div>

<div class=”card card_dark”>
<img src=”/images/image2.jpg” alt=””>
<div class=”card_content”>
<h2 class=”card_title”>Lorem</h2>
<p class=”card_description”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque amet obcaecati nihil.</p>
</div>
</div>

</body>
</html>

Here is the preview link : https://adalbertpungu.github.io/card_with_sass/

Sass documentation: https://sass-lang.com/documentation

That’s all I think you’re ready, you can continue to train for well mastered.

Good coding.

Follow me on twitter : twitter.com/AdalbertPungu

Thank you !