Quote

The advent of SASS makes CSS more interesting. What is SASS? Do not do more elaboration, because it is not a new product, now it is everywhere on the Internet. If you really want to know what SASS is? Then you just need to know simply that it is a kind of CSS preprocessor language.

SASS makes some extensions to CSS, and with SASS you can use some simple programming ideas to write CSS. For example, variables, blending, nesting, and functions can be defined in SASS. It's just that SASS is unlike CSS. Can be directly applied to the project, if you need to apply the style to the project There is one step that must be taken, translating SASS into CSS.

So far, it is not difficult to translate SASS into CSS. The translation of SASS to CSS can be completed through command line tools or third-party plug-ins, and the translated CSS code is beautifully formatted and conforms to the CSS standard.

SASS has developed to this day with great changes and strong functions. At the same time, his grammar has also changed. Until the time of writing this article, SASS had two grammars. The new main syntax (SASS 3) is called SCSS (Sassy CSS), and supports the syntax of CSS3. That is to say, as long as CSS3 supports it, it is also supported in SCSS. The SCSS file extension is '.scss', which is also the most used at present.

The second syntax is the old syntax of SASS, namely SASS. However, this syntax is slightly different from the new SASS syntax, SCSS and CSS. (For the sake of distinction, the new SCSS in the following text refers to the new syntax of SASS, and the SASS in the text refers to the old syntax of SASS). SASS, also known as indentation syntax, mainly relies on code indentation to specify blocks, rather than using brackets and semicolons. In this way, SASS is also a strict syntax. Any indentation and character errors will cause style compilation errors. Therefore, using SASS requires good coding habits and styles. The SASS file extension is .sass.

Although SASS has two kinds of syntax, the old syntax is also inherited and can be used normally. However, it is recommended that you directly use the latest syntax SCSS when using SASS. Because the coding style and syntax of SCSS and CSS are almost the same, this will help you learn and use SASS better.

Compilation environment of SASS

The code of SASS cannot be directly applied to the project. To use CSS, we have to The code of SASS cannot be directly used in the project. To use the same way as CSS, we must translate SASS into CSS, and then call the translated CSS in the project. However, the translation of SASS requires a certain production environment to complete. This is also the first step to play SASS.

Under Mac systems, Ruby is generally built into it, if you are not sure if it is installed Or you don't know which version of Ruby you use, you can open your command tool:

$ruby-v

So you can get the relevant information:

#ruby 1.9.3p392 (2013-02-22 revision 39386) [x86_64-darwin12.4.0]

Note: the above information is the information displayed on my computer. Maybe the information displayed on your computer will be slightly different. If your system is Windows, download an installation file for Ruby and step by step is done.

Installation of SASS

After confirming that the SASS environment is running correctly, we are ready to install SASS. The installation of SASS can also be installed according to your own needs. According to the needs of users, it is divided into three categories of installation methods.

Standard stable version installation

In most cases and most people, you still like to install the standard stable version of SASS. This is not too risky to use in the project, and the installation is simple:

$gem install sass

Sometimes in Linux And OS X Under the system, Super Admin privileges may be required to install:

$sudo gem install sass

After the installation is complete, you can check whether the SASS installation is successful or not with the following command:

$gem list

If you see the existence of SASS in this list:

...
Sass (3.2.9)
...

Indicates that you have installed successfully. At this time, you may not know what the SASS version is, or you can check its version:

$sass-v

You can see the SASS version information:

Sass 3.2.9 (Media Mark)

Beat version installation

For SASS enthusiasts, a stable version can't meet the demand, it needs something else. In other words, it wants to get some of the latest changes and features of SASS. Then you can install a Beat version of SASS at this time. It will automatically create the main branch for each change:

$gem install sass-pre

Install from the Git library

SASS can also be installed directly from the Git library:

$git clone git://github.com/nex3/sass.git
$cd sass
$rake install

From the point of view of practical use, it is recommended to install it according to the first method. Install SASS under Windows system You can click here.

Install the SASS library

When making things with SASS, we can use some mature SASS libraries Help us develop quickly and improve efficiency. At present, the more mature SASS libraries are Compass and Bourbon. Next, take a brief look at how these two libraries are installed.

Install the Compasser library

Compass is a very mature SASS library, but it is a very powerful framework and is used very frequently. If you know Compass, it will benefit you a lot. Similarly, to use Compass in your project, you need to install Compass first.

$gem install compass

You have completed the installation of Compass with the simple command above. You can see the existence of compass in the corresponding list of gem:

$gem list

Display the results:

...
Compass (0.12.2)
...

Install the Bourbon library

The disk installation of Bourbon is very similar to the installation of Compass libraries, and it is also very simple. Just run the following command from your command terminal with the gem command:

$gem install bourbon

Create your first SASS project

With the above knowledge, we begin to practice our first SASS project, which will be divided into three parts.

Clean SASS project

The so-called "clean SASS" project means not using any other SASS libraries, to put it simply. The project is first developed in SASS and then translated into CSS. Let's take a look at how such projects are created.

First of all, go to your local project directory, it is usually placed in Sites , as follows:

$cd Sites

At this point, you enter the project library:

/Users/airen/Sites

For example, we are going to create a project called "mySass":

$mkdir mySass

At this time mySass project is right here /Users/airen/Sites Bingo, if you're worried. You can use it. ls Command to check:

$ls

In order to make the project planning more perfect, I put .scss The SASS files are all placed in the sass In the directory And what needs to be translated. .css files will be placed in the css In the catalog. Therefore, we still need to be in the mySass, create in the project sass and css Two folders:

$cd mySass
$mkdir sass
$mkdir css

Next, open your editor, create a new file, and edit a simple piece of SASS code in it, as follows:

$main-color: # ce4dd6
$style: solid

.navbar {
Border-bottom: {
Color: $main-color
Style: $style
}
}

A {
Color: $main-color
&: hover {
Border-bottom: 1px $style
}
}

And name this file style.scss, save in mySass/sass.

Compass creates a SASS project

The above briefly introduces a clean SASS project, needless to say. Let's take a look at how to create a SASS project through Compass.

Also open your command terminal and enter Sites Under the catalog. For example, we are going to create a compassSass project is placed in Sites, under the directory, we can do this:

$compass create compassSass

As soon as this command is over, a lot of information will appear in your terminal, first telling you that you have created a compassSass project, and which files are automatically created in this project:

+ compassSass
| |-+ sass |
| |-screen.scss |
| |-print.scss |
| |-ie.scss |
| |-+ stylesheets |
| |-ie.css |
| |-print.css |
| |-screen.css |
|-config.rb

In addition to creating the relevant files, it will also tell you some other information. One of them. config.rb documents are very important. It is mainly used to configure the project runtime environment created by Compass. So when you modify this configuration file, you need to be careful.

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
Http_path = "/"
Css_dir = "stylesheets"
Sass_dir = "sass"
Images_dir = "images"
Javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# Output_style =: expanded or: nested or: compact or: compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# Relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# Line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# Project again passing-syntax sass, or you can uncomment this:
# Preferred_syntax =: sass
# And then run:
# Sass-convert-R-from scss-- to sass sass scss & & rm-rf sass & & mv scss sass

So you can be there. sass create what you need in the directory .scss file You can also go directly to the screen.scss, edit the SASS code in the file. For example, here In the above example style.scss The SASS code is placed in screen.scss Medium.

/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* < link rel= "nofollow" href= "http://www.w3cplus.com/stylesheets/screen.css" media=" screen, projection "rel=" stylesheet type= "text/css" / > * /

@ import "compass/reset"

$main-color: # ce4dd6
$style: solid

.navbar {
Border-bottom: {
Color: $main-color
Style: $style
}
}

A {
Color: $main-color
&: hover {
Border-bottom: 1px $style
}
}

In a project created by Compass, it automatically passes through the @import Import Styl

@import "compass/reset"

In addition, if you don't want to use SCSS, you only think about old people and don't love new ones. Then you can add a parameter -x sass later:

$compass create compassSass-x sass

Bourbon creates a SASS project

Bourbon's creation of a SASS project is slightly different from the former. His idea for creating the SASS project is First create the project in the corresponding directory, and then put the bourbon Import into the corresponding project.

For example, here we create a bourbonSass Project, which is also placed in the Sites Under the catalog So we can do this:

$cd ~ / Sites
$mkdir bourbonSass
$cd bourbonSass

The next thing that needs to be done is to bourbon libraries are inserted into bourbonSass In the library:

$bourbon install

Placed in this directory bourbon some variables of the library. It is suggested that you should not modify the variable files in the bourbon directory lightly when using it. So you can update the library at any time:

$bourbon update

In order to better manage your own SASS files and translated CSS files I suggest you do it in bourbonSass, creating in the project sass and css catalogue, used to place your own .scss documents, as well as translated .css File:

$mkdir sass
$mkdir css

At this time, you can sass create one in the directory that you need .scss files, such as screen.scss.

In this way, you can quote directly bourbon some of the variables in:

@import "bourbon/_bourbon.scss"

If you don't want to quote, bourbon, you can also write your own SASS style to the variable file in the library.

@import "bourbon/_bourbon.scss"

$main-color: # ce4dd6
$style: solid

.navbar {
Border-bottom: {
Color: $main-color
Style: $style
}
}

A {
Color: $main-color
&: hover {
Border-bottom: 1px $style
}
}

SASS file translation

After a little bit of space, you know how to create a SASS project, and all of them have set up what they need. .scss Files. But as we all know, SASS can only be found in Ruby, cannot be directly referenced into the project, so if you want to use SASS for convenient development, you must know how to set the .scss translation of documents into .css files.

Next, let's still look at the first three methods, and take a look at how to set the .scss to translate into .css.

Translation methods of ordinary SASS

First of all, let's take a look at the first one. I call this method of translation ordinary translation. It is also about projects that are not embedded in any third-party SASS libraries.

Translation .scss files, what we mainly use is sass Orders. Its operation is very simple. First of all, enter the corresponding project, such as here, first enter mySass in the project:

$cd ~ / Sites/mySass

Then enter the translation command:

$sass sass/style.scss css/style.css

In this way, we put sass/style.scss and translated style.css, then put it in css catalog. In order to verify whether we have successfully translated, we can enter css catalog, check to see if there is style.css Style file.

$vi css/style.css

Note: our current position is Sites/mySass.

The translated CSS style is as follows:

.navbar {
Border-bottom-color: # ce4dd6
Border-bottom-style: solid;}

A {
Color: # ce4dd6;}
A:hover {
Border-bottom: 1px solid;}

One downside to transpiling sass files using sass is that we modify the.scssfile, and it does not translate automatically. In this way, it is very painful for us to check the translated CSS styles from time to time. So is there a better way? Yes, we only need to add a parameter--watchon top of thesass` command.

To verify this statement, let's first translate the style.css is deleted, and then retranslated back through the sass --watch command:

$sass-watch sass/style.scss

In this way, you can see the hint:

>>> Sass is watching for changes. Press Ctrl-C to stop.
Overwrite sass/style.css

sass/style.scss translates to the sass/style.css, and does not go to the css directory, which is one of his shortcomings. Whether the translated is in the CSS directory or not, I don't think you will care too much (it's a big deal to copy it later), but whether it can monitor the translation of the .scss file in time, as mentioned earlier. To verify that this feature works, let's modify the style.scss file:

$main-color: # ce4dd6
$style: solid
$font-size: 2embank / newly added sass style code

.navbar {
Border-bottom: {
Color: $main-color
Style: $style
}
}

A {
Color: $main-color
Font-size: $font-size;// newly added sass style code
&: hover {
Border-bottom: 1px $style
}
}

At this time, we are not typing the translation command at the command terminal, if you have not forgotten, we have just turned on the constant monitoring function. Let's first take a look at the changes in the command terminal:

>>> Sass is watching for changes. Press Ctrl-C to stop.
Overwrite sass/style.css
>>> Change detected to: /Users/airen/Sites/mySass/sass/style.scss
Overwrite sass/style.css

You can clearly see the change in the terminal, so take a look at the change of style.css:

.navbar {
Border-bottom-color: # ce4dd6
Border-bottom-style: solid;}

A {
Color: # ce4dd6
New style code translated by font-size: 2embank * /}
A:hover {
Border-bottom: 1px solid;}

I guess I don't have to say it. Facts prove it. If you want to stop this kind of constant monitoring and translation at this time. You only need to enter Ctrl - C at the command terminal.

Although both sass and sass--watch are capable of translating .scss files, in a real project, we can't have only one .scss file in our project. So we need a way to translate multiple .scss files into .css files at the same time. In fact, in SASS, you can directly translate all .scss files in the entire directory into all .css files and put them in another CSS directory, and the command is as follows:

$sass-watch sass/:css/

In this way, all .scss files in SASS can be translated into .css files and placed in the CSS directory.

Special emphasis: if you use sass --watch transliteration .scss style, you first need to install rb-fsevent, if you do not install sass --watch will not be able to perform the constant monitoring .scss translation to .css. For example, execute the following translation command when rb-fsevent is not installed:

$sass-watch test.scss:test.css

The command terminal will provide an alarm message:

>>> Sass is watching for changes. Press Ctrl-C to stop.
Overwrite test.css
Missing dependency 'rb-fsevent' (version' ~ > 0.9')!
Please run the following to satisfy the dependency:
Gem install-- version'~ > 0.9 'rb-fsevent

For a better performance, it's recommended that you satisfy the missing dependency.
Listen will be polling changes. Learn more at https://github.com/guard/listen#polling-fallback.

In order to make sass --watch command runs normally, that is, it can be monitored all the time. Only need to install rb-fsevent You can:

$gem install-version `~>0.9` Rb-fsevent

At this time, it will be carried out:

$sass-watch test.scss:test.css

There won't be any problems.

Translate the SASS project created by Compass

The SASS project created by the Compass library is slightly different from the SASS project created without any SASS library. Then the method of translating SASS is also different. Next let's take a look at how the SASS project created by Compass should be translated.

For SASS projects created by the Compass library, the translation method is not complicated. First, we need to enter the project created by the Compass library. For example, in our case, let's first enter compassSass Project:

$cd ~ / Sites/compassSass

Then use the following command to convert all .scss files in the sass directory in the project into .css files, and place them in the stylesheets directory:

$compass watch

At this point, the command terminal will display the relevant information about the translation:

>>> Change detected at 23:35:12 to: screen.scss
Overwrite stylesheets/screen.css
>>> Compass is watching for changes. Press Ctrl-C to Stop.

Similarly, if you want to stop transpiling .scss files in the sass directory, just type Ctrl -C in the terminal.

The translated style is as follows:

/ * line 11,.. / sass/screen.scss * /
.navbar {
Border-bottom-color: # ce4dd6
Border-bottom-style: solid
}

/ * line 18,.. / sass/screen.scss * /
A {
Color: # ce4dd6
}
/ * line 20,.. / sass/screen.scss * /
A:hover {
Border-bottom: 1px solid
}

If you modify the style in screen.scss, the corresponding style will be automatically translated:

$main-color: # ce4dd6
$style: solid
$font-size: 2embank / added scss style

.navbar {
Border-bottom: {
Color: $main-color
Style: $style
}
}

A {
Color: $main-color
Font-size: $font-size;// add scss style
&: hover {
Border-bottom: 1px $style
}
}

When you save the modified screen.scss file, the command terminal will automatically monitor it and make the corresponding changes:

>>> Change detected at 23:45:35 to: screen.scss
Overwrite stylesheets/screen.css

At the same time, the translated style will be changed accordingly:

/ * line 12,.. / sass/screen.scss * /
.navbar {
Border-bottom-color: # ce4dd6
Border-bottom-style: solid
}

/ * line 19,.. / sass/screen.scss*/

A {
Color: # ce4dd6
Font-size: 2emposition * Post-translation style * /
}

/ * line 22,.. / sass/screen.scss * /
A:hover {
Border-bottom: 1px solid
}

It is consistent with the translation style of ordinary SASS projects.

Translation from CSS to SASS

Since .scss can be transliterated to .css style via the sass command, can we translate .css to .scss? The fact is yes, we can do it through the sass-convert command:

$sass-convert css/style.css style.scss

In addition to translating .css styles into .scss files, sass-convert can also transliterate styles between .sass and .scss with this command.

Using the sass command

Through the sass command, we can complete the translation between .scss and .css, in order to better understand the sass command, you need to make a comprehensive understanding of the sass command, if you are not familiar with the sass command, you can enter it in the command terminal:

$sass-help

This lists the rules for using all parameters of all sass commands.

Sass syntax

The sass command syntax is very simple:

Sass [options] [input] [output]

Sass command function

The main function of the sass command is to translate scss or sass files into css files.

The [options] parameter in the sass command.

The [options] parameter in the sass command should include:

-s-- stdin Read input from standard input instead of an input file
-- trace Show a full traceback on error
-- unix-newlines Use Unix-style newlines in written files.
-- scss Use the CSS-superset SCSS syntax.
-- watch Watch files or directories for changes.
The location of the generated CSS can be set using a colon:
Sass-watch input.sass:output.css
Sass-watch input-dir:output-dir
-- update Compile files or directories to CSS.
Locations are set like-- watch.
-- stop-on-error If a file fails to compile, exit immediately.
Only meaningful for-watch and-update.
-- poll Check for file changes manually, rather than relying on the OS.
Only meaningful for-- watch.
-f,-force Recompile all Sass files, even if the CSS file is newer.
Only meaningful for-- update.
-c,-- check Just check syntax, don't evaluate.
-t,-- style NAME Output style. Can be nested (default), compact, compressed, or expanded.
-- precision NUMBER_OF_DIGITS How many digits of precision to use when outputting decimal numbers. Defaults to 3.
-Q,-- quiet Silence warnings and status messages during compilation.
-- compass Make Compass imports available and load project configuration.
-g,-- debug-info Emit extra information in the generated CSS that can be used by the FireSass Firebug plugin.
-l,-- line-numbers Emit comments in the generated CSS indicating the corresponding source line.
-- line-comments
-I,-interactive Run an interactive SassScript shell.
-I-- load-path PATH Add a sass import path.
-r,-- require LIB Require a Ruby library before running Sass.
-- cache-location PATH The path to put cached Sass files. Defaults to. Sass-cache.
-C.-- no-cache Don't cache to sassc files.
-E encoding Specify the default encoding for Sass files.
-?-h.-- help Show this message
-v,-- version Print version

This topic describes how to configure the SASS environment and how to translate SASS files in actual use. The first step in compiling the project with SASS was completed. With these fundamentals in hand, we can dive into the basics of SASS. And learn SASS and use SASS to make your favorite projects. I hope this article will be helpful for you to learn and use SASS. If you have better insights and ways to learn, welcome to actively discuss them in the comments below.