"Sass Beginner" starts using sass and compass

Transferred from:http://www.w3cplus.com/preprocessor/beginner/getting-started-with-sass-and-compass.html

If your friends, colleagues or netizens have told you sass or compass, or both, that's great. Now what? In this beginner's guide, I first lead you to use sass and compass. I will tell you how to complete the installation and create a test project. How to use Sass to compile CSS, and even will tell you about sass in the "Mixin".

Installing SASS and Compass

Installing sass and compass requires the use of "Ruby" gem commands, so make sure you have Ruby installed on your machine first.

If you are using a Windows system, you can run the Ruby installer. If you're on a Linux system, rails gives you a point to install Ruby. If you're using OS X, you don't have to install ruby yourself, because the system is ready for you, and you can use it directly.

How to install Ruby is beyond the scope of this article and if you have any problems installing Ruby, you can click here to view the discussion.

Installing SASS

First, install sass! to open the command terminal on your computer.

Windows

Gem Install Compass

Linux/os X

sudo gem install compass

With Linux and OS X classmates, you gem may or may not use commands when you use them to install sudo . For example, if you are using RVM, then you do not need to use a sudo command to install it.
Well, I know what you're thinking. I'm just saying that we're going to install sass, but I just told you the command to install Compass. In fact, Compass needs to be sass, so when you run this command, you will see this message at the command terminal:

$ sudo gem install compassfetching:sass-3.1.3. Gem ( -%) Fetching:compass-0.11.3. Gem ( -%) successfully installed SASS-3.1.3successfully installed Chunky_png-1.2.0successfully installed FSSM-0.2.7successfully installed Compass-0.11.34Gems installed

Of course, this tutorial is written in "June 29, 2011", history is a bit old, today using the above command, you may see this code in your command terminal:

[[Email protected]:/applications/xampp/htdocs/sites]$ gem install COMPASSFETCHING:FSSM-0.2.Ten. Gem ( -%) successfully installed FSSM-0.2.TenFetching:chunky_png-1.3.1. Gem ( -%) successfully installed Chunky_png-1.3.1Fetching:sass-3.2. +. Gem ( -%) successfully installed SASS-3.2. +Fetching:compass-0.12.6. Gem ( -%) successfully installed Compass-0.12.6Parsing Documentation forchunky_png-1.3.1Installing RI Documentation forchunky_png-1.3.1Parsing Documentation forcompass-0.12.6Installing RI Documentation forcompass-0.12.6Parsing Documentation forfssm-0.2.TenInstalling RI Documentation forfssm-0.2.TenParsing Documentation forsass-3.2. +Installing RI Documentation forsass-3.2. +Done Installing documentation forChunky_png, Compass, FSSM, sass afterTenseconds4Gems installed

When you run this command, you see that it is not this information, there may be no Ruby on your machine or unsupported gem . How to solve this problem, this is beyond the scope of knowledge I have mastered, if you encounter any problems, you can use the mailing list to find your question or seek help.

If you're intimidated by the command line, don't worry too much. John Long wrote a very famous tutorial, "The Designer's Guide to the OSX Command Prompt". The content here should be able to help you solve this problem very quickly.

In addition, if you really do not like to use the command line to operate, there are two GUI applications can also use sass and compass:

• Scout
• Compass.app

But these two are paid software. Although I am also very supportive of paid consumption, but some like me to pay a certain number of yards of the United States knife, the weak. In this special recommended to you a domestic gui--@OKLain developed Koala. for a tutorial on using, you can read the article "using the Sass Interface compilation Tool--koala". --@ Desert

CSS Parser

I also like to compass stats install a css_parser, when output sass, he can output a detailed statistical report for me. The output reports include SASS rules, properties, Mixin, and CSS rules that use mixin output, as well as related statistics.

Installing "Css_parse" only needs to run on the command line:

Gem Install Css_parser

If the installation is OK, you will see some of the following information at the command terminal:

fetching:addressable-2.3.6. Gem ( -%) successfully installed addressable-2.3.6Fetching:css_parser-1.3.5. Gem ( -%) successfully installed Css_parser-1.3.5Parsing Documentation foraddressable-2.3.6Installing RI Documentation foraddressable-2.3.6Parsing Documentation forcss_parser-1.3.5Installing RI Documentation forcss_parser-1.3.5Done Installing documentation forAddressable, Css_parser after1seconds2Gems installed

Now that you're ready to use sass and compass, you can start using your sass and compass.

Create a test project

The simplest way to do this is to enter the following command under your working environment:

Compass Create Sass-test

My computer is XAMPP environment, I like to put all my projects are created in the /Applications/XAMPP/htdocs/Sites directory. After you have executed the above command, you can see a project named "Sass-test" in the corresponding working directory. As shown in the following:

And at your command terminal you will see some of the information shown:

In addition, you can clone this test project from GitHub:

git clone https://github.com/thesassway/sass-test.git

But your goal is to learn how to do it.

Go to the cd "sass-test" directory you just created:

[airen@airen:/Applications/XAMPP/htdocs/Sites]$ cd sass-test/

and use your favorite editor to open it. I'm using textmate, but I've been trying to use Vim or sublime Text2.

Compiling the sass into CSS

This is the simplest part of doing things with sass and compass, and we just need to enter a command on the command line to get compass to do these things:

Compass Watch

If you do not make a mistake above, you will see this message:

[Email protected]:/applications/xampp/htdocs/sites/sass-test]$ Compass Watch  is  for changes. Press Ctrl-c to Stop.

If this is the case, you can continue reading because you are now embarking on the path of compiling CSS using SASS.

compass watchWhat will the order do? It will prosecute changes to the Sass file (save changes) and automatically compile the sass into CSS. How does it know where to put the sass compiled CSS? This is a big problem, and I'll cover this in more detail in a future article "Configuring Compass".

In the meantime, let's look at the config.rb file in the Sass and Compass project "sass-test" root directory. Configure some basic variables so that compass knows your sass,css,javascript, where the image files are placed, what extensions are needed, what syntax you like, the format of the output, and so on.

Writing SASS Code

Well, before we actually write sass, it's more important for us to understand some of Sass's history first. In fact, one of the things to grasp is that SASS has two versions of grammar-which tend to get mixed up and even scare away some people to use sass.

Sass is like CSS. Well, it's kind of misleading. Sass can be like CSS. Referring to Sass, he has a certain history, he is actually more than one, but there are two kinds of grammar. One of these grammars is called "Sass", which makes you feel more confused. Its main syntax is called "SCSS" (that is, the abbreviation for sassy CSS). This syntax is called SASS3, and the old syntax is called the indentation syntax.

Now that I've introduced the history of sass, he has two grammars that are true, but I'm sure we're ready to write some code. Or I should say scss, because SCSS syntax is similar to CSS and is designed to be a superset of CSS3 syntax. This means that every valid CSS3 style sheet is a valid scss. In fact, you can copy the contents of a CSS file and paste it into a scss file, and sass will compile a clean CSS.

Let's Test this "theory". I copied the content from my blog's css file and pasted it into the Screen.scss file in our project, and then ran the Compass compilation. Now look at the Screen.css file and you'll see that sass and Compass have compiled non-compressed, indented, and readable CSS code.

Summarize and what to do next

This example is obviously not the most practical example, and technically we have not written any code. I just want to prove to you that the transition to sass only takes 0 effort, as long as you do.

Next, if you use sass and compass, you should understand their features and use their features. This shift is the best part. You can slowly use sass and compass, there is no reason to be intimidated by them. You just have to take a few weeks to beat them.

Do this and start doing it now.

"Sass Beginner" starts using sass and compass