11.1 Sass (Syntactically Awesome Stylesheets)
CSS Preprocessors are tools that let you extend the capabilities of CSS and make writing styles easier. They add features like variables, nested rules, mixins, and functions, making the code more modular, reusable, and maintainable. Today we're diving into the most popular CSS preprocessors: Sass, LESS, and Stylus.
Sass is one of the most popular CSS preprocessors, adding tons of useful styling features.
Installing Sass
You can install Sass using npm:
npm install -g sass
Main features of Sass
1. Variables
Variables in Sass let you store values that can be reused:
<html>
<head>
<style>
body {
color: #333;
}
</style>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
</html>
$primary-color: #333
body
color: $primary-color
2. Nested Rules
Nested rules let you write CSS in a more hierarchical style:
<html>
<head>
<style>
nav {
background: #eee;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
color: tomato;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
</body>
</html>
nav
background: #eee
ul
margin: 0
padding: 0
list-style: none
li
color: tomato
3. Mixins
Mixins let you create groups of styles that can be reused in other rules:
<html>
<head>
<style>
.box {
width: 256px;
min-height: 200px;
border-radius: 10px;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="box">Content</div>
</body>
</html>
@mixin border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
border-radius: $radius
.box
@include border-radius(10px)
border: 2px solid green
width: 256px
min-height: 200px
4. Inheritance
Inheritance allows one selector to inherit styles from another:
<html>
<head>
<style>
.box {
min-height: 120px;
}
.box:not(:last-child) {
margin-bottom: 5px;
}
.info, .success, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
background-color: #cfc;
}
.warning {
background-color: #fc9
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box info">Some info</div>
<div class="box success">Success</div>
<div class="box warning">Warning!</div>
</div>
</body>
</html>
%message
border: 1px solid #ccc
padding: 10px
color: #333
.box
min-height: 120px
&:not(:last-child)
margin-bottom: 5px
.info
@extend %message
.success
@extend %message
background-color: #cfc
.warning
@extend %message
background-color: #fc9
5. Functions
<html>
<head>
<style>
body {
font-size: 1.125rem;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cupiditate esse libero veritatis voluptatem?
Aliquam atque laboriosam porro recusandae totam.
</p>
</body>
</html>
@function px-to-rem($px, $base-font-size: 16px)
@return ($px / $base-font-size) * 1rem;
body
font-size: px-to-rem(18px);
Compiling Sass
Compile Sass to CSS with the command:
sass style.scss style.css
11.2 LESS
Installing LESS
You can install LESS using npm:
npm install -g less
Main features of LESS
1. Variables:
<html>
<head>
<style>
body {
color: #333;
}
</style>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
</html>
@primary-color: #333;
body {
color: @primary-color;
}
2. Nested Rules:
<html>
<head>
<style>
nav {
background: #eee;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
color: tomato;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
</body>
</html>
nav {
background: #eee;
ul {
margin: 0;
padding: 0;
list-style: none;
li {
color: tomato;
}
}
}
<html>
<head>
<style>
.box {
width: 256px;
min-height: 200px;
border-radius: 10px;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="box">Content</div>
</body>
</html>
3. Mixins:
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.box {
.border-radius(10px);
border: 2px solid green;
width: 256px;
min-height: 200px;
}
4. Inheritance:
LESS uses the "&" symbol to refer to the parent.
<html>
<head>
<style>
button:hover {
background-color: #555;
}
</style>
</head>
<body>
<button>Button</button>
</body>
</html>
.button {
&:hover {
background-color: #555;
}
}
5. Functions:
LESS supports functions for working with colors, numbers, and strings.
<html>
<head>
<style>
body {
font-size: 1.125rem;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cupiditate esse libero veritatis voluptatem?
Aliquam atque laboriosam porro recusandae totam.
</p>
</body>
</html>
@base: 16px;
.font-size(@size) {
font-size: (@size / @base) * 1rem;
}
body {
.font-size(18px);
}
Compiling LESS
Compile LESS to CSS with the command:
lessc style.less style.css
11.3 Stylus
Stylus is a flexible and powerful CSS preprocessor that offers a concise syntax and many useful features.
Installing Stylus
You can install Stylus using npm:
npm install -g stylus
Main features of Stylus
1. Variables:
<html>
<head>
<style>
body {
color: #333;
}
</style>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
</html>
primary-color = #333
body
color primary-color
2. Nested Rules:
<html>
<head>
<style>
nav {
background: #eee;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
color: tomato;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
</body>
</html>
nav
background #eee
ul
margin 0
padding 0
list-style none
li
color tomato
3. Mixins:
<html>
<head>
<style>
.box {
width: 256px;
min-height: 200px;
border-radius: 10px;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="box">Content</div>
</body>
</html>
border-radius(radius)
-webkit-border-radius radius
-moz-border-radius radius
border-radius radius
.box
border-radius(10px)
border 2px solid green
width 256px
min-height 200px
4. Inheritance:
Stylus uses @extend for inheritance.
<html>
<head>
<style>
.box {
min-height: 120px;
}
.box:not(:last-child) {
margin-bottom: 5px;
}
.info, .success, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
background-color: #cfc;
}
.warning {
background-color: #fc9
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box info">Some info</div>
<div class="box success">Success</div>
<div class="box warning">Warning!</div>
</div>
</body>
</html>
.message
border 1px solid #ccc
padding 10px
color #333
.info
@extend .message
.success
@extend .message
background-color #cfc
.warning
@extend .message
background-color #fc9
5. Functions:
Stylus lets you create functions for reuse.
<html>
<head>
<style>
body {
font-size: 1.125rem;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cupiditate esse libero veritatis voluptatem?
Aliquam atque laboriosam porro recusandae totam.
</p>
</body>
</html>
px-to-rem(px, base-font-size = 16px)
px / base-font-size * 1rem
body
font-size px-to-rem(18px)
Compiling Stylus
Compile Stylus to CSS with the command:
stylus style.styl
GO TO FULL VERSION