Sass Foundation and actual combat

Why use SASS in projects

Hear the most words is I can CSS, I can use CSS to write projects, why do I take the time to learn sass, a thing I do not know, a new thing for myself? See such a problem, reminds me of 2010 years of discussion CSS3, many students also have this kind of coagulation, CSS3 really will come? Do I really have to learn CSS3? Now, time proves everything. I still want to say that a lot of things are not needed to learn, the opportunity is to prepare students.

There seems to be a bit off the mark, so let's go back to today's topic and why use SASS in a project? Here, I just want to talk about some of my personal views.

First of all, CSS can do things, sass as can be done, and may be better done, in addition to the CSS can not do things, but there are many sass to do, such as:

• Sass can define variables, mix macros, %placeholder ;
• Sass can define functions;
• Sass can use @if , @fore and @while such control instructions;
• Sass can use JSON data ( map );

Of course, in addition to these basic functions, the use of SASS in the project also allows you to better maintain projects, expand projects, reuse projects, and so on. It can also make your code more concise.

Speaking of which, there is another voice saying that small projects need to use SASS? Is there any size of the project? Since sass can help us better develop, manage, and maintain projects, why use sass only in large projects and not in small projects? Do small projects need to be maintained? Don't need to manage it? With this kind of question, read on, and maybe you'll get a little bit changed.

How to use SASS in a project

Speaking so much, the students are more concerned about how to use sass in the project. Don't care too much about how good sass is. Because this kind of controversy also really does not have much meaning. So we don't say anything else, just say how to use SASS in the project.

After using sass in the project, I have some ideas about myself, or my way of doing it. Also experience it, hope to be helpful to beginners.

Create an environment that runs SASS

To use sass properly in your project, you need to make sure that your computer is running SASS environment. This is one of the reasons why sass is limited and is not loved by everyone. Many people talk about using sass and need to install the Ruby environment first. You will also need to install the GUI compiler for students who do not like command compilation.

In fact, the installation of SASS environment is not a difficult task, just like with wamp environment, complete once on the OK. But this is the first time the installation, to bring a lot of obstacles to beginners, but also become the students learn sass and use sass. If you just want to learn or understand sass, you can not install SASS on this machine, you can use the online editor, such as: Sassmeister, Codepen. And they all support that which is what is earned. If you have a certain foundation for Sass, want to use in the project, already is the stirring, then you can not leave the computer to install the Sass environment. As for how to install sass on the computer, in this article do not do too much elaboration, interested students can read the following article:

• Sass Installation
• Sass Compiling
• Sass Commissioning
• Install Sass
• Installing SASS and COMPASS UBUNTU 12.10 & 13.04
• Setting up Sass on Windows
• How to install the Sass with the Compass on Windows
• How-to-install SASS with Compass–windows 7 step-by-Step guide

I would like to follow the tutorial above, the installation of sass on your computer will not be a difficult task. However, in our celestial, some things are wall, often let you install sass unsuccessful. Here is a simple way to introduce you:

Let's say you've successfully installed Ruby. Download the sass to local first. and open your command terminal:

At this time do not enter, will you download the Sass installation package, with the mouse to "install" behind, at this time you at the command terminal, you can see:

gem install /Users/airen/Downloads/sass-3.3.14.gem

This time again to enter, so OK. In order to confirm that the installation is successful, only the faces are entered:

sass -v

If you can see the Sass version number, it means that you have successfully installed it. Then you can do what you want to do.

Note: Different systems, different users and versions, corresponding to the relevant path and information will not be the same "/users/airen/downloads/sass-3.3.14.gem".

Create a common Sass project template

When you do a project, they always have some common parts, no matter what the project. such as resetting styles, common styles, module components, UI libraries, and so on. So is the case in the SASS project. To avoid doing the same thing in every project, you can create a common Sass project template on your computer. For example, I created:

In such a template, the folders under each Sass directory correspond to the various categorized _xxx.scss files:

• base：Place some basic styles of scss files, such as reset style _normalize.scss , basic style _base.scss , text layout style, _typography.scss etc.
• components：Place some common components, such as: Buttons _buttons.scss , Forms _form.scss , Tables _tables.scss , tabs, _tabs.scss etc.
• helps：Place some accessibility files, such as: _css3.scss ,, _variables.scss , _mixins.scss , _helpers.scss and _function.scss etc.
• layout：Place some related to the layout of the page, such as:,,, _layout.scss _header.scss _footer.scss _sidbar.scss etc.
• pages:Place the style file associated with the specific project page.
• themes：For some items that have a front or back page, or need a skin change, you can place the relevant files here.
• vendors：A referenced external plug-in or frame's scss file, for example _bootstrap.scss , _foundation.scss .
• style.scssThis is the main style file, which is eventually compiled to compile the problem. Of course, depending on the project size, some other processing can be done. For example, for different pages, create different page_xxx.scss files.

Of course everyone may have different ways of doing it. Once you've created a template like this, you can copy, paste, and modify the project name as soon as you have a new project, and you're ready to go.

However, for some public-use parts, try to modify them in the public template as much as possible. For example, you add a mix of macros mixin , placeholders %placeholder , function functions function . There are also some common components.

Perhaps this is not easy to copy, whether you can consider a framework such as compass, write an installable function yourself? Or will the common parts be referenced to all of your required projects? But neither of these methods has been tried. First, you will not write the kind with gem installation features, and second, there is no separate attempt to use relative paths in different projects to invoke resources. If you've tried it, remember to share it with us.

Organizing SASS Projects

In fact, this is the public as a SASS project, but this sass project is used to do spare, can be unlimited reuse. Then in the creation of such a project, it is necessary to reasonable organization, the use of the late days.

An article in which John W. Long was previously translated: How to organize a sass project. The idea of the file organization structure above is derived from this. Of course, you can also refer to some large SASS framework as a reference:

Compass

Foundation

Bootstrap-sass

In addition, there are:

• Gumby
• Bourbon
• Susy
• Inuit.css
• Front End Framework
• Discover Sass & Compass Extensions

Compiling and debugging of SASS Project

With the above, you need to master the compilation and debugging of the sass when you write sass in detail. It is well known that a file is specifically referenced in a project, not a file .css .scss .sass . So you have to compile the sass into the required CSS. For how to compile? In fact, many kinds of methods, if you like to use commands, you can directly in the command terminal compile, if you do not like the command to compile, you can also use GUI tools such as interface tool to assist the compilation. Specific can be read:

• Sass Compiling
• Use of the Sass Interface compilation Tool--codekit
• Use of the Sass Interface compilation Tool--koala

Besides, if you are familiar with Node,grunt and gulp, you can also use them to compile sass for you. For example, "Nodejs+grunt Configuration Sass Project Automatic compilation" is described in this article.

As for how to debug, front-end developers know they can use tools like Firebug to debug CSS. In fact, the use of sass students, but also very much look forward to firebug under the direct debugging sass. Now in Chromet and Firefox browser support Sass Soucemap function, you can directly debug the corresponding sass in the browser. As the following article says:

• Sass Commissioning
• The source Maps of the actual combat Sass3.3
• Source Maps 101

Sass in the project

Having said so much, let's take an example to make a sample, so the image is some. Suppose you receive such an item:

The "Backstage" and "foreground" correspond to some design drawings. These we don't need to care too much about what they grow up to look like. First copy the created public Sass project and paste it into your local project environment and modify it to the name of the project you need, as I call it "Tuhaokuai" here.

Discard other factors, see only the "Sass" directory, Sass public projects and the new project "Tuhaokuai" look exactly the same. Of course, it's going to be different in there. In the main pages catalog, different paging files are created for the desired page:

In this way, for different pages, add their corresponding style code, such as:

_index.scss

_mysite.scss

Other documents are not shown, and it seems to be very clear. In fact, simply say, these things are some parts, we want to make the project style effective, we need to put the necessary parts up, and then fixed him. That's good. In this project, because he is not too complicated, only one main style is used: style.scss . And bring in what you need by @import introducing:

At this point you just need to style.scss compile style.css , reference to your project on the line.

In fact, you can also according to your own needs to assemble, assuming that the home page I only need to use the style, then you can completely create a index.scss scss file, and then the need to bring in:

Next, refer to the index.html compiled style file index.css (you can change the file name to the one you want).

Conclusion

In this article, we mainly introduce how to apply sass to practical projects. The simple person describes why you should use SASS in your project before you use SASS. How to do it in detail. Hopefully this article will help beginners. Also want to share more with the experience of using SASS in the project and the problems encountered. And how to solve these problems.

Sass Foundation and actual combat