DEV Community: nass84

Sass - Variables and Mixins and Functions! Oh my!

nass84 — Fri, 06 Aug 2021 19:03:15 +0000

CSS Preprocessors

What are they?

CSS preprocessors let us write CSS rules in a structured way which get converted to pure CSS by any compiler or loader.

CSS Preprocessors compile the code which is written using a special compiler. Browsers don't understand SASS so they need it translated into CSS.

Once compiled they then use that to create a CSS file, which can then be referenced by the main HTML document.

Benefits of using them

Preprocessors let us write more flexible styles by using variables, functions, conditional statements that make our development easier.
We can join multiple stylesheets into one by importing all of them into the main CSS file. This allows us to organise our files to keep on top of CSS for large projects.
Repetition can be avoided by writing the common rules together and using that as a mixin or function.
Darken and Lighten functionality to create night mode to completely change up your website at a click of a button.

All of these features help us to write CSS with less effort and time but efficiently.

Some, such as SASS, has specific style standards which are meant to make the writing of the document even easier, such as the freedom to omit braces if you want.

SASS ( Syntactically-awesome style sheets)

This appears to be the most popular choice for developers, it was first written in Ruby and then other languages.

How to use Sass

There are many tutorials available to get a feel of using SASS.

If you would like to learn without using an automatic compiler you could use:

How to use Sass - Step by Step guide - (Between 1 and 2 hours)

For an in-depth look into SASS with using an automatic compiler:

Sass Tutorial for Beginners - (2 hour video plus coding time. I would recommend putting aside half a day)*

SASS Tutorial - Net Ninja Course - 1 hour video plus coding time. This is my favourite tutorial)*

How to install

Install node-sass

In terminal install globally

npm install node-sass -g

Create:

Folder: SASS-Demo
File in folder: index.html
File in folder: style.scss

Dont forget to link the style file to html 😊

Then add

<body>

<div>

<h1> Sass Demo</h1>

<button class="save"> Save </button>

<button class="cancel"> Cancel </button>

</div>

</body>

Variables

Variables help you centralize CSS properties. You can assign them once at the top of a file and use them throughout the file. These variables are like placeholders for a CSS property’s value. In Sass, a variable name must start with a $ sign.

Create in style.css file $h1-color and $h1-height variables.

$h1-color : blue;

$h1-height : 50px;

h1{

color : $h1-color;

height : $h1-height;

}

Open terminal in the demo folder and execute

node-sass style.scss style.css

This will create a style.scss file

You can then open the index.html in browser

Operators

Sass provides basic math operators like addition +, subtraction -, multiplication * and division/.

You can use variables and operators together to manipulate CSS properties.


$h1-color : blue;

$h1-font : 50px;

$div-width : 500px;


div{

width: $div-width;

}

h1{

color : $h1-color;

height : $h1-font;

padding : $div-width / 10;

}

Mixins

Mixins group related properties and can be reused in style blocks. They can pass variables.

@mixin border-radius($radius){

-webkit-border-radius : $radius;  

-moz-border-radius : $radius;  

-ms-border-radius : $radius;

border-radius : $radius;

}


div{

width : $div-width;

border : 2px solid grey;

@include border-radius(20px);

}

Here we used the @mixin directive to define a mixin named border-radius. This mixin contains all the possible properties to set the radius of a border. We also passed a parameter to this mixin. Whenever you need to set the radius of an element, include this mixin with the @include keyword.

To apply these changes you have to compile the script once again

node-sass style.scss style.css

Nesting

You can nest selectors to apply classes using hover, focus and active

div{

>h1{

color: blue;

&:hover{

color: greenyellow;

}

}

}

Inheritance

We can create a parent style for items that share most of their characteristics such as padding, font-size, margin.


%common-button{


padding: 16px 8px; 

border: none;

font-size: 18px;

}


.save{ 

@extend %common-button;


background-color: blue; 

color: white;

}


.cancel{

@extend %common-button;

background-color: goldenrod;

color: white;

}

To declare a parent style, use the % sign. Use the @extend directive to inherit a child block.

Import

Sass can create partial files to create small modular Sass files to make files more organised and easier to maintain

The naming convention for partial files is to prefix the file name with an underscore _.

Create a file called _buttonpartial.scss

then use



@import '_buttonpartial';

h1{

color:blue;

}

In the root Sass script

Loop

Iteration is one of the most frequently used programming mechanisms. Sass script allows you to iterate over variables. You can use various directives like @for, @each and @while.

$totalButton: 2;


@for $i from 1 through $totalButton{

.button-#{$i} {

width: 50px * $i;

height: 120px / $i;

}


}

Stop needing to compile everytime!

There is a fancy way to avoid repetitive compiling: a task runner. Visual Studio Code has a built-in task runner, but you can use any task runner of your choice. Gulp is another popular task runner. For compiling Sass script with Gulp, you would need gulp sass compiler instead.

Gulp-Sass

Or you can download PrePros

Set up instructions can be found here: (How to set up React and Sass using Prepros)
https://dev.to/nass84/how-to-set-up-react-and-sass-using-prepros-22m1

Documentation

SASS - Syntactically Awesome Style Sheet

Acknowledgements

Net Ninja

Mohammad Abdul Alim

Chandrabhan Singh

How to set up React and Sass using Prepros

nass84 — Fri, 06 Aug 2021 18:08:34 +0000

To build my Mystery Club website, I used React and Sass.

Link to Code on Github

How to set up React and Sass

Step 1

For detailed instructions you can use:
Set up React App Documentation

Quick Start Guide

In terminal run

npx create-react-app my-app

cd my-app

npm start

Create File Structure

Set up folder for components, CSS and Images with the following files in:
components
- pages
- basic
CSS
- Sass
images

Create Components

Remember - Components should start with a capital letter

Remove code from App.js and replace with your code, for example:


import './CSS/App.css'

function App() {

const title = 'Mystery Club'

return (

<div className="App">

<div className="content">

<h1> {title} </h1>

</div>

</div>

);

}


export default App;

Create new file navbar.js in basic Components folder

Make sure you have extension - React Standard Style code snippets

Type sfc tab and a stateless functional component will appear


const Navbar = () => {

return (

<nav className="navbar">

<h1>Mystery Club</h1>

<div className="links">

<a href="/">Home</a>

<a href="/create">New Mystery</a>

</div>

</nav>

);

}

export default Navbar;

Import Navbar to App.js


import Navbar from './components/basic/navbar';

Add to App.js


<Navbar />

Create another component in basic component folder


const Home = () => {

return (

<div className="home">

<h2>Homepage</h2>

</div>

);

}

export default Home;

import it to App.Js, as above

Set Up Sass

For detailed instructions you can use:
Set up React App Documentation

Quick Start Guide

Download Prepros https://prepros.io/downloads

Set Up Project

Create styles.scss in CSS Sass Folder
Drag project folder to Prepros
Click on styles.scss in prepros with process automatically ticked
Click Process File
Notification saying successful should pop up.
In VS code a new file should appear called styles.css
Link this to app.js


import './CSS/styles.css'

Add practice code to scss file


.title{

color:red;

}

CSS File Structure

@import

You can add Variables, Mixins and main styles into different files by importing them

Create new files in the SASS folder
- variables.scss
- mixins.scss
Bring up prepros and remove the auto compile tick box so a new css folder isnt created. Leave the tick in main scss file.
Add mixins and variables into the new files.
import files into styles.scss folder


@import 'variables';

@import 'mixins';

Create variable in variables folder


$hotPink: #e42491;

use in styles.scss file to check it is working

h1 {
  color: $hotPink;
}

You're done!

If you need more help the documentation can be found here:
React Website

Sass Documentation

For great tutorials, i would recommend using Net Ninja

Net Ninja Tutorial on React

Net Ninja Tutorial on Sass