Book Image

Responsive Design High Performance

By : Dewald C Els, Dewald Els
Book Image

Responsive Design High Performance

By: Dewald C Els, Dewald Els

Overview of this book

Table of Contents (16 chapters)
Responsive Design High Performance
About the Author
About the Reviewers
Speeding Up Development with Design Concepts, Patterns, and Programs

Sassy CSS, SASS, and LESS

Variables, calculations, and all sorts of fun tricks are some of the benefits made available when using SASS/SCSS.

Generally, when people talk about SASS, they'll be referring to the preprocessor and the language as a whole. The SASS preprocessor allows two syntaxes: SASS, an indented syntax, and SCSS, a CSS-like syntax.

SASS actually comes from another preprocessor, called HAML, that was designed and written by Ruby developers. Because of this, the SASS syntax is based on specific indentation and does not make use of semicolons. Take a look at this sample code to get better understanding of it. We'll compare CSS, SCSS, and SASS syntax in three examples.


Here is a piece of code that uses CSS:

.title-container {
    border-radius: 1.2em;
   -webkit-border-radius: 1.2em;
   -moz-border-radius: 1.2em;
    color: red;
    width: 100%;
    overflow: hidden;
.subtitle-container {
    border-radius: 1.5em;
   -webkit-border-radius: 1.5em;
   -moz-border-radius: 1.5em...