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

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Responsive Design High Performance

By : Els

Responsive Design High Performance

By: Els

Overview of this book

Sassy CSS, SASS, and LESS

CSS

Responsive Design High Performance

By : Els

Responsive Design High Performance

By: Els

Overview of this book

Sassy CSS, SASS, and LESS

CSS

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access