The 1th Chapter SASS Introduction

What is a CSS preprocessor?

Defined:

CSS preprocessor defines a new language, the basic idea is, with a special programming language, for the CSS to add some programming features, CSS as a target to generate files, and then developers just use this language to encode work.

In layman's terms, "CSS preprocessing uses a specialized programming language, Web page style design, and then compiled into a normal CSS file for the project to use." CSS preprocessor adds some programming features to CSS, regardless of browser compatibility issues, such as the ability to use variables in CSS, simple logic programs , functions such as the right-hand code editor to use the variable $ color) and so on, some of the basic features in programming languages that make your CSS more concise , adaptable , readable , and easy to maintain .

Other CSS Preprocessor languages:

CSS preprocessor technology is already very mature, and there are a lot of different CSS preprocessor languages , such as:

• Sass (SCSS)
• Less
• Stylus
• Turbine
• Swithch CSS
• CSS Cacheer
• DT CSS

So many CSS preprocessor, then "what kind of CSS preprocessor should I choose?" "It has also become a hot topic on the Internet, and a lot of people are arguing about Linkedin,Twitter,css-trick, know -how and the big technology forums. This has been a big step forward compared to the topic of whether CSS preprocessor should be used in the past.

So far, in a number of excellent CSS preprocessor language is Sass, less and Stylus the best, the discussion is also more, more contrast. This tutorial will focus on Sass in the CSS preprocessor. believe that front-end development engineers will like it.

What is Sass?

The Sass official website describes Sass as follows:

Sass is a meta-language that is higher than CSS and can be used to describe file styles clearly and structurally, with more powerful features than regular CSS. Sass provides a cleaner, more elegant syntax, while providing a variety of features to create maintainable and managed stylesheets.

Sass Past Life:

Sass is the first CSS preprocessing language, there is more powerful than less, but its initial indentation syntax (Sass old version syntax, the later course will be described in detail) is not accepted by the public, but due to its powerful features and the strong push of Ruby on Rails, there are many developers choose Chose the Sass.

Sass is a CSS preprocessing language written in Ruby language, which was born in 2007 and is the largest mature CSS preprocessing language. Originally designed to match HAML (an indented HTML precompiled), it has the same indentation style as HTML.

Why is it less common in the early days?

Although the indentation style can effectively reduce the amount of code, forcing the specification coding style, but it is not accepted for most programs, on the other hand is not compatible with the existing CSS code. This is also Sass although appeared earliest, but far less popular than the reason.

What's the difference between Sass and SCSS?

Sass and SCSS are actually the same kind of things, we usually call Sass, the difference between the following two points:

1. File extension differs, Sass is extension with ". Sass" suffix, and SCSS is extension with ". SCSS" suffix
2. Grammar is written in a different way, Sass is written in strict indentation grammar rules, without curly braces ({}) and semicolons (;), and SCSS's syntax is very similar to the way we write CSS syntax.

Let's look at an example first:

Sass syntax

$font-stack:helvetica, Sans-serif  //define variable $primary-color: #333//define variable body  font:100% $font-stack  color: $ Primary-color

SCSS syntax

$font-stack:helvetica, Sans-serif; $primary-color: #333; body {  font:100% $font-stack;  Color: $primary-color;}

The compiled CSS

Body {  font:100% Helvetica, Sans-serif;  Color: #333;}

tip: Little friends can see that our right-hand code uses the SCSS syntax (our Code Editor doesn't support Sass syntax !). ）。

is sass/scss and pure CSS much worse?

Does it have a lot of bad wording? This is a question that many beginners will ask. So take this opportunity to get a quick look.

Sass and CSS have different wording:

There are some differences between Sass and CSS, and because Sass is written based on Ruby, it continues with Ruby's writing specifications. When writing Sass, there are no curly braces and semicolons, which are mainly controlled by strict indentation. Such as:

Sass notation:

Body  color: #fff  background: #f36

And in CSS we write like this:

Body{  color: #fff;  Background: #f36; }

There is no difference between SCSS and CSS:

SCSS and CSS are no different, which is one of the reasons why Sass is becoming popular. Simply put, modify your existing ". css" file directly to ". Scss" to use.

Article from: http://www.imooc.com/code/6374

The 1th Chapter SASS Introduction