Sass learning path (3) -- Sass compilation, sass path

Sass learning path (3) -- Sass compilation, sass path

Sass compilation is also a step we must take when using Sass, because ". sass "and ". the <link> label reference cannot be directly used for scss files. In the end, they must be converted into CSS files for use in projects.

Therefore, to make the web page really use the Sass abbreviation, the compilation process is necessary.

Three compilation methods are mentioned here:

1. Command Line Compilation

As the name implies, Sass files are compiled through commands on the terminal (command line tool) in the computer (I think this method is more intuitive, but it is a little troublesome to crack the command)

(1) single file Compilation:

Sass <Sass file path>/style1.cscc: <path of the CSS file to be output>/style1.css

In this example, style1.scss under the fixed directory is compiled into style1.css under the specified directory.

(2) Multi-file Compilation:

Sass/: css/

In this case, all sass files under the sass directory are compiled into css files and placed in the css folder of the same level.

(3) watch command:

We can imagine that if we modified the sass file multiple times after compilation, we would need to repeat these tedious commands, which is very inconvenient.

In this case, the watch command is useful. When Sass is compiled, the watch function is enabled to detect changes to the Sass file and automatically compile the updated code for you:

Sass -- watch <compilation code above>

 

Now, let's talk about the command line compilation.

 

2. graphical interface tool Compilation

Well, I don't have to worry about wrong commands anymore.

In fact, there are many such tools. Here we will introduce Koala)

Official Website: http://koala-app.com/

Koala user guide for w3cplus: http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html

 

3. Automated Compilation: (Grunt and Gulp)

Grunt: because Ben meow only uses Gulp now, so here we stick a piece of Grunt Code provided by Du Niang. We need to take the children's shoes from ourselves:

1. Module. exports = function (grunt ){
2. Grunt. initConfig ({
3. Pkg: grunt. file. readJSON ('package. json '),
4. Sass :{
5. Dist :{
6. Files :{
7. 'Style/style.css ': 'sass/style. scss'
8. }
9. }
10. },
11. Watch :{
12. Css :{
13. Files: '**/*. scss ',
14. Tasks: ['sass ']
15. }
16. }
17. });
18. Grunt. loadNpmTasks ('grunt-contrib-sass ');
19. Grunt. loadNpmTasks ('grunt-contrib-Watch ');
20. Grunt. registerTask ('default', ['watch']);
21. }

Next is Gulp:

 

On the other side of my article, I wrote methods for compiling Sass files such as Gulp. Here is the portal:

Http://blog.csdn.net/u013034014/article/details/53559069

(Ben Meow is relatively lazy (￣)

 

So let's write about Sass compilation here. You are welcome to join us.

Front-end communication group -- <a href = "https://jq.qq.com /? _ Wv = 1027 & k = 42OiUZ5 "> click the link to join the group [Magic Coder] </a>