What is SCSS ?

SCSS works exactly like CSS but with some seriously useful new features so if you already know CSS you wont have to learn anything but simple syntax. After learning SCSS I have incorporated it into all of my projects since, it is an incredibly useful tool to manage multiple large CSS files and compile them into one single CSS file. To see exactly what new features are provided see SCSS basics for an overview, its more dynamic and feels like a genuine scripting language.

Now I am going to show you a few simple features of SCSS running that wouldn’t be possible with just CSS. Copy The example HTML code at the bottom of the page to quickly test this yourself.

Running SCSS

After you have installed SCSS you will need to run SCSS on certain files or a whole directory to generate a single CSS.

  //run scss on single file manually
sass input.scss output.css
//automatically detect changes and compile
sass --watch input.sass:output.css
//watch full directories
sass --watch <input folder>:<output folder>

Example HTML

<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="description" content="Home page">
<meta name="keywords" content="bootstrap 4 alpha">
<meta name="viewport" content="initial-scale=1">

<title>Home</title>

<link type="text/css" rel="stylesheet" href="assets/css/style.css"/>
</head>

<body>
<nav class="navbar navbar-toggleable-md navbar-dark bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

<div class="container">
<h1>Bootstrap 4 test site</h1>

<div class="row">
<div class="col-md-4" id="test1">
<p>Test 1</p>
</div>
<div class="col-md-4" id="test2">
<p>Test 2</p>
</div>
<div class="col-md-4" id="test3">
<p>Test 3</p>
</div>
</div>

</div>

</body>

SCSS file

  @import "bootstrap.min.css";
@import "bootstrap-grid.min.css";
@import "bootstrap-reboot.min.css";
//@import "Filename";
// use import if you want to link two or more style sheets together (makes one big css file)

// Colours used
$red: red;
$blue: blue;

html, body{
width: 100%;
overflow-x:hidden;
margin: 0;
padding: 0;

}
body {
background-color: white;
font-family: sans-serif;
}
#test1 {
color: $red;
}
#test2 {
color: $blue;
}
#test3 {
color:black;
}

//Mixins

//Nesting

//Operators

//Extend/Inheritance

Example