sass basics and actual combat

Why use Sass in your project

The most common sentence I hear is that I know CSS, I can use CSS to write projects, why should I take the time to learn Sass, something I don’t know, something completely new to me? Seeing this kind of question reminds me of when CSS3 was discussed in 2010, many students also had the same question, CSS3 will really come? Do I really have to learn CSS3? Now, time will tell. I still want to say that many things are not learned when they are needed, and opportunities are given to students who are prepared.

Seems a bit off topic, let's go back to today's topic, why use Sass in a project? Here, I just want to say some of my personal views.

First of all, what CSS can do, Sass can do the same, and it may be better. In addition, there are many things that CSS can't do, but there are many things that Sass can do, such as:

Sass can define variables, mixins, %placeholder;
Sass can define functions;
Sass can use control instructions such as @if, @fore, ;@while
Sass can work with JSON data ( map);

Of course, in addition to these basic functions, using Sass in a project can also allow you to better maintain the project, extend the project, reuse the project, etc. It also makes your code more concise.

Speaking of which, there is still a voice saying that it is necessary to use Sass for small projects? By the way, is there a size of the project? Since Sass can help us develop, manage, and maintain projects better, why is Sass only allowed to be used in large projects, but not in small projects? Do small projects need maintenance? Don't need management? With such a question, read on, maybe you will have some changes.

How to use Sass in your project

Having said so much, the students are more concerned about how to use Sass in the project. Don't really care how good Sass is. Because such an argument is really meaningless. So let's not talk about anything else, let's talk about how to use Sass in a project.

After using Sass in my projects, I have some opinions, or how I operate. It is also an experience, and I hope it will help beginners.

Create an environment to run Sass

In order to use Sass normally in your project, you must first ensure that your computer can run the Sass environment. This is also one of the reasons Sass is limited and not loved by everyone. A lot of people talk about using Sass, you need to install the Ruby environment first. For students who don't like command compilation, they also need to install a GUI compiler.

In fact, it is not difficult to install the Sass environment, just like with the Wamp environment, it is OK to complete it once. But this is the first installation, which brings many obstacles to beginners, and also becomes a stumbling block for students to learn Sass and use Sass. If you just want to learn or understand Sass, you don't need to install Sass on your computer, you can use online editors, such as: SassMeister , CodePen . And they all support what you write is what you get. If you have a certain foundation of Sass and want to use it in the project, you are ready to move, then you still can't do without installing the Sass environment on your computer. As for how to install Sass on the computer, I will not elaborate too much in this article. Interested students can read the following articles:

I think it will not be difficult to install Sass on your computer based on the above tutorial. However, in our Chinese dynasty, some things are blocked and often make you unsuccessful in installing Sass. Here is a simple method for you:

Assuming you have successfully installed Ruby . First download Sass locally . and open your command terminal:

gem install

Do not press Enter at this time, drag the Sass installation package you downloaded to the back of "install" with the mouse, and you can see in the command terminal at this time:

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

At this time, go back to the car and it will be OK. In order to confirm whether the installation was successful, just enter:

sass -v

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

Note: For different systems, different users and versions, the corresponding paths and information will be different "/Users/airen/Downloads/sass-3.3.14.gem".

Create a common Sass project template

When working on a project, no matter what the project, there is always something that can be shared between them. For example, reset styles, common styles, module components, UI libraries, etc. Well in the Sass project as well. To avoid doing something the same in every project, then you can create a common Sass project template on your computer. For example I created:

In such a template, each folder in the Sass directory corresponds to various categories of _xxx.scssfiles:

base：Place some basic styles of SCSS files, such as reset styles _normalize.scss, basic styles _base.scss, text layout styles _typography.scss, etc.
components：Place some common components, such as: buttons _buttons.scss, forms _form.scss, tables _tables.scss, tabs, _tabs.scssetc.
helps：Put some accessibility files, such as: _css3.scss, _variables.scss, _mixins.scss, _helpers.scssand _function.scssetc.
layout：Put something related to the page layout, such as: _layout.scss, _header.scss, _footer.scss, _sidbar.scssetc.
pages:Place style files associated with specific project pages.
themes：For some projects with front and back pages, or projects that need to be skinned, you can place related files here.
vendors：SCSS files of referenced external plugins or frameworks, e.g. _bootstrap.scss, _foundation.scss.
style.scssThis is the main style file, which finally compiles, just compiles this problem. Of course, depending on the size of the project, some other processing can be done. For example, for different pages, create different page_xxx.scssfiles.

Of course, everyone may have different methods. After creating such a template, as long as there is a new project in the future, you can copy and paste it, and then modify the project name, and that's it.

However, for some public use parts, try to modify them in public templates. For example, you add mixins mixin, placeholders, %placeholderand functions function. There are some common components.

Maybe it’s not convenient to copy like this, so can you consider a framework like Compass and write an installable function yourself? Or reference the common parts to all your required projects? However, I have not tried either method. First, I will not write that kind gemof stuff with installation functions. Second, I have not tried to use relative paths to call resources in different projects. If you try it, remember to share it with us.

Organizing Sass Projects

In fact, the public one is regarded as a Sass project, but this Sass project is used as a backup and can be reused without restrictions. Then when creating such a project, it needs a reasonable organization, so it can be used later.

An earlier translation of John W. Long 's article : How to Organize a Sass Project . The idea of the above file organization structure is derived from this. Of course, you can also refer to some large Sass frameworks for reference:

Compass

Foundation

Bootstrap-Sass

Besides that:

Compiling and debugging Sass projects

After you have the above, you also need to master Sass compilation and debugging when writing Sass specifically. As we all know, files are specifically referenced in a project .cssrather than .scssor .sassfiles. So you have to compile the written Sass into the required CSS. For how to compile? In fact, there are many ways. If you like to use commands, you can compile directly in the command terminal. If you don't like command compilation, you can also use GUI tools to assist in the compilation. Specifically, you can read:

Besides, if you are familiar with Node, Grunt and Gulp, you can also use them to compile Sass for you. For example, " Nodejs+Grunt configures SASS project automatic compilation " as introduced in the article.

As for how to debug, front-end developers know that they can use tools like Firebug to debug CSS. In fact, students who use Sass are also looking forward to debugging Sass directly under Firebug. So now the Soucemap function of Sass is supported in Chromet and Firefox browsers, and the corresponding Sass can be debugged directly in the browser. As stated in the following articles:

Sass in action in the project

Having said so much, let's take an example as an example, so that it can be more vivid. Suppose you receive such an item:

In the "backstage" and "foreground" corresponding to some design drawings. We don't need to care too much about what they look like. First make a copy of the created public Sass project, paste it into your local project environment, and change it to the project name you need, for example, I call it "tuhaokuai" here.

Disregarding other factors, just looking at the "sass" directory, the Sass common project and the new project "tuhaokuai" look exactly the same. Of course, it will be different inside. Mainly in the pagesdirectory, different page files are created for the desired pages:

如此一来，针对不同的页面，添加其对应的样式代码，比如：

_index.scss

_mysite.scss

其他文件就不一一展示了，看上去是不是非常清楚。其实简单点说，这些东西就是一些零件，我们要让项目样式生效，就需要把需要的零件装上去，然后固定他。这样就好了。在这个项目中，由于他并不太复杂，只使用了一个主样式：style.scss。并且将需要的东西通过@import引入进来：

此时你只需要将style.scss编译成style.css，引用到你的项目就行了。

其实你也可以按照你自己的需求去组装，假设，首页我只需要首页用到的样式，那么你完全可以创建一个index.scss的SCSS文件，然后将需要的引入进来：

接下来，在index.html引用编译出来的样式文件index.css即可（文件名你可以换成自己想要的）。

结论

在这篇文章中主要介绍了自己如何将Sass运用到实际项目之中。简单人介绍了为什么要在项目使用Sass，以前使用Sass之前要做些什么？又是如何具体操作。希望这篇文章对初学者有所帮助。也希望更多的同还来分享项目中使用Sass的体验与碰到的问题。而且又是如何解决这些问题。

转自：http://www.cnblogs.com/paul-3/p/5994887.html