Book Image

Responsive Design High Performance

By : Els
Book Image

Responsive Design High Performance

By: Els

Overview of this book

This book is ideal for developers who have experience in developing websites or possess minor knowledge of how responsive websites work. No experience of high-level website development or performance tweaking is required.
Table of Contents (11 chapters)
7
7. Speeding Up Development with Design Concepts, Patterns, and Programs
10
Index

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.

CSS

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...