THE BENEFITS OF A CSS PREPROCESSOR OVER A CONVENTIONAL CSS.

Denise Jans Unsplash
  1. CSS syntax
// variables
$font-family: Helvetica, sans-serif;
$primary-color: #fff;

body {
font-family: $font-family;
color: $primary-color;
}
//compiles to
body {
font-family: Helvetica, sans-serif;
color: #fff;
}
// nesting
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}

li { display: inline-block; }

a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
//compiles to
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
.button {
display: block;
border-radius: 3px;
padding: 16px;
}

.button-green {
@extend .button;
}
// compiles to
.button,
.button-green {
display: block;
border-radius: 3px;
padding: 16px;
}
.container {
width: 100%;
}

article {
float: left;
width: 600px / 1000px * 100%;
}

aside {
float: right;
width: 300px / 1000px * 100%;
}
//compiles to
.container {
width: 100%;
}

article {
float: left;
width: 60%;
}

aside {
float: right;
width: 30%;
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store