Methods of installation and use of sass and compass

What are sass and compass?

Before you talk about this, let's introduce CSS. I believe you like me, after several periods of development, but also more familiar with CSS. But one thing we all know is that it's a style sheet, not a programming language. So, some children's shoes often say that their recent learning CSS programming is wrong.

CSS contains a number of selectors and applied style rules, which do not include variables, functions, inheritance, and so on, which we have in general all programming languages have rules. So, everyone in the writing CSS and other programming language is not the same feeling.

Later, developers have added a lot of programming ideas to them for their own convenience, such things as variables, functions, statements, and so on that we mentioned before, which we call preprocessor. There are many excellent more commonly used CSS preprocessor, including sass, less, stylus and so on.

So back to the topic, what is SASS? Sass officially defines it as a meta language based on CSS. In my opinion, in fact, Sass is a superset of CSS, but also a CSS development tool. Its rich grammatical knowledge makes CSS add a lot of programming elements, which is simply not good for developers.

We can use our common programming ideas to write sass files (i.e.. scss files). The added point is that sass is free and does not require a certificate or authorization or anything that anyone can use.

What is Compass?

The official definition of compass is that it is an open source CSS coding framework. In other words, it is a framework based on sass. As I understand it, compass is like a library function or framework for SASS, providing a lot of sass excellent modules, functions, and so on. You can choose not to use it, but using it will bring a lot of convenience for you to write sass files, such as some reusable CSS modules, some very popular CSS grid layout framework, our common reset/normalizing, and so on.

Sass's official address: http://sass-lang.com/
Compass's official address: http://compass-style.org/
GitHub Address: Https://github.com/Compass/compass
Before continuing, the point to be clarified is that sass and compass will not help you write CSS better, they will only give you a great convenience in writing CSS, and the real final CSS to write the effect of how to see your own degree of mastery of them. As though there are many excellent JS library functions to call you, if you do not master the knowledge of JS library functions, JS you write the same pulpy.

Download and installation of Sass and compass

Before introducing downloads and installations, the only thing to say is that sass and compass are all developed based on the Ruby language. Of course, it doesn't matter if you're as ignorant about Ruby as I am, because knowing how to use them has little to do with how they are developed. So we need to install Ruby before installing sass and compass. All right, start downloading and installing.

Ruby Download and Installation: https://www.ruby-lang.org/en/downloads/. Download down after installation can be, because very simple process does not table. After installation, you can check for success by entering the following command at the command line:

RUBY-V//Output Ruby 1.9.3p551
So now to download the installation sass and compass. Also open the command line and enter the following command to install SASS and compass separately:

For SASS
Gem Install Sass

For Compass
Gem Install Compass
The above command needs to explain the gem. Personal sense of gem is like the NPM in node, package management tools. Do not know whether to understand correctly or not. If you successfully install, you can also check the corresponding version of the information to see if the installation is successful:

For SASS
Sass-v//sass 3.4.13 (selective Steve)

For Compass
COMPASS-V//Compass 1.0.3 (Polaris) ..... (Some other copyright information, etc.)
The use of SASS

Sass is very convenient to use, open the Command Line window and switch to the corresponding working directory, if the current directory has a scss file you write (demo.scss), then enter the following command: Sass demo.scss Command Line window will display demo.css. If you want to save it to a directory, use the following command: Sass demo.scss demo.css. Sass's compilation has four different output options, namely nested, expanded, compact, compressed. It may be said that each style is difficult to understand in words, so look at an example to know.

Sass Code:

#main {
Color: #999;
. Content {
Color: #bfbfbf;
}
}
Select nested compilation style:

/* Line 2, ... /SASS/DEMO.SCSS *
#main {
Color: #999; }
/* Line 4, ... /SASS/DEMO.SCSS *
#main. Content {
Color: #bfbfbf; }
Compact style:

/* Line 2, ... /SASS/DEMO.SCSS *
#main {color: #999;}
/* Line 4, ... /SASS/DEMO.SCSS *
#main. Content {color: #bfbfbf;}
Compressed style:

#main {color: #999} #main. Content{color: #bfbfbf}
Expanded style (default):

/* Line 2, ... /SASS/DEMO.SCSS *
#main {
Color: #999;
}
/* line4, ... /SASS/DEMO.SCSS *
#main. Content {
Color: #bfbfbf;
}
Configuration of different parameters, you can compile a different style of CSS. To see a person's preferences, in terms of development phase, expanded feel very good, the release of the time you can choose compressed.

The basic grammar of sass (real dry goods)

Declaration and reference of variables

Declaring a variable is simple, and the syntax is as follows:

$varname: Varvalue;
What, looks abstract, then look at an example:

$highlight-color: #abcdef;
Above we declare a variable Highlight-color with a $ beginning to declare a variable. Its corresponding value is after the colon. Let's take a look at the following:

. danger-box:hover {
Background-color: $highlight-color;
}
It's as simple as that. Here, the point is that variables are generally declared in the head of the Sass file, of course, if there are enough variables, it is recommended to build a separate file to save the variable (what? More files will add HTTP requests!) Well, we'll talk about this question for a while, so we can maintain it. Perhaps this example does not seem necessary, because in order to a color we circuitous so long, but also as a direct write CSS a value is enough.

Well, if you think so, then the pattern Tucson broken. If you have enough space in your project to use such a color value, then it is very convenient for us to maintain it after you have defined the variables elsewhere. Imagine if we change the style, is not in a place to change the color value of the whole project using this value has changed?!!!

CSS nesting Selector

Take a look at the first example:

#content article h1 {color: #333}
#content Article p {margin-bottom:1.4em}
#content aside {background-color: #eee}
is not very familiar with, no accident words in your code is also filled with such code, look at the above we repeatedly write #content\article and so on. Of course, you will feel that this is not much, wake up, open a real project to see, the amount of repetition is n level so that you are always busy CTRL + C feel irritable. So why not lower your work a little simpler and see how the nested selector in SASS syntax works:

#content {
article{
h1 {color: #333}
p {Margin-bottom:1.4em}
}
Aside {background-color: #eee}
}
Have not found, very concise! It's kind of like when we're programmed to keep nesting functions (a bit of a sense of programming). Sass compiled this file will form the same as the CSS we wrote before. The compiler works like this: it appends the child selector to the parent selector and applies the corresponding rule, as in the example H1 appended after the parent selector article and then appended to the article's parent selector to form the #content article h1 {color: #333}. Notice the spaces between the selectors.

If you have enough mechanism here, you might think that referencing some pseudo class is not going to work. Yes, so SASS provides the parent selector &. As follows:

#content {
&:hover {font-size:20px;}
}
The following are compiled as CSS files:

#content: hover{
font-size:20px;
}
Property nesting

Continue to see examples:

nav{
border:{
Style:solid;
width:1px;
Color: #ccc;
}
}
The following are compiled as CSS files:

nav{
Border-style:solid;
border-width:1px;
Border-color: #ccc;
}
Good! is very convenient, and later do not have to bother more so much code.

Import file

CSS files allow us to introduce other CSS files, as you can see with CSS. However, because of performance problems, few people do so in a system that is normally published. Because although the file is not large, but it has increased the HTTP request after all, the establishment and shutdown of each request will inevitably increase the page congestion loading time. Thus causing performance degradation. See here should understand, the above we mentioned the question.

Introducing a file using SASS does not add too much HTTP requests, since it will eventually be compiled into a file by loading the imported files into the imported file. This has great benefits, so that we can also manage our CSS files (specifically sass files) into modules. The Scss file for the variable definition, the layout-related file, the reset file, and so on are all in different files, so it will be convenient to modify the maintenance in the future.

For example, the following style.scss file:

@import "Compass";
@import "Partials/variables";
@import "Partials/mixins";
@import "Partials/fonts";
@import "Partials/normalize";
@import "Partials/base";
@import "Partials/placeholders";
@import "Partials/layout";
@import "Partials/modules";
The above file introduces many other files, with the default format for file names. Scss can be omitted. See here, you may have questions, this will not increase the sass file compiled as a CSS file time also caused a waste of CSS file! Listen to me, it won't, as long as you define each file as an underscore plus filename. For example, the Mixins file above can be defined as _MIXINS.SCSS. So sass will not compile it as a separate CSS file, understand it is to the other file reference. Note that the filename definition has an underscore reference and can still be underlined as above.

Comments

If you've learned JS, then annotate me without saying it. Sass file Comments Support the two types of JS comments, as follows:

This is a line of comments
/* This is another line of comments * *
It should be emphasized here that when compiling the Sass style compressed, the annotation is omitted. However, we all know that when we release the system, even in CSS we also want to leave our copyright information. At this point, you can use another annotation style used by sass:

/*! This is a comment and will not disappear after compiling.
No matter what style, this annotation will never be lost in the CSS file!

Mixins

Sass supports a very convenient syntax, that is, mixins. Similar to defining a variable, it simply defines a property, and the following defines the mixins named Rounded-corners:

@mixin Rounded-corners {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
So when you use the rounded corners, you can use this:

. danger-box {
color:red;
@include rounded-corners; Referencing Mixins
}
How does it feel to be very convenient?! Oh, there are more convenient! Also look at the above example:

@mixin rounded-corners ($rounded-size:default-size) {
-moz-border-radius: $rounded-size;
-webkit-border-radius: $rounded-size;
Border-radius: $rounded-size;
}
Above, we added the parameters that were passed in when the mixins was used, for example:

. danger-box{
@include rounder-corners (5px)
}
. warning-box{
@include rounder-corners (8px)
}
We can pass in different values according to our different needs. Of course, you can set the default default-size to ensure that there is still a default value even if the value is not passed.

Inherited

It is better to look at examples, such as the following, Warning-box, Success-box, Info-box classes inherit the properties of the box class and can override its properties:

Box
. box {
Padding:2em;
Color: $color 10;
Background-color: $color 11;
}
Warning Box
. warning-box {
@extend. Box;
border:2px dotted $color 1;
}
Success Box
. success-box {
@extend. Box;
border:2px dotted $color 4;
}
Information Box
. info-box {
@extend. Box;
border:2px dotted $color 7;
}
The compiled CSS file looks like this:

. box,. Warning-box,. Success-box,. Info-box {
Padding:2em;
Color:black;
Background-color:white;
}
. warning-box {
border:2px dotted red;
}
. success-box {
border:2px dotted chartreuse;
}
. info-box {
border:2px dotted blue;
}
Is there a kind of bunker feeling!

The use of Compass

After finishing the use of sass and grammar, let's look at compass how to use it?!

Open the Command Line window and enter: Compass Create MyProject. Can initialize the project, its catalogue is as follows:

IFriU3

The sass file is the Sass file that we write, and the compiled CSS file will run to stylesheets. Of course, you can configure these content in CONFIG.RB. You know, CONFIG.RB is some configuration information for compass.

I think you and I do not want to write a little bit sass code every time you get a command line window to manually execute the compile command, so you can open the Command Line window input under current project: Compass watch. It will automatically help us to compile the changed files into CSS files.

The usefulness of Compass

Now let's see what we're doing with compass.

Reset or call normalize.

As we all know, browsers define some default styles for each HTML tag. In order to use these tags, we will generally reset these styles to the most basic or familiar style, which we call reset or normalize. Usually copy and paste a lot of CSS reset style, here we need only one line of code can:

@import "Compass/reset";
Of course, this is a set of reset code provided by compass. If you do not like or maintain your own set of reset, you can download it to your Sass folder Partials directory, and introduced to your sass file, such as I fork someone else's normalize style: https://github.com/ Front-thinking/normalize.scss. After downloading the same line in your sass file:

@import "Partials/normalize";
CSS3 Module

As we all know, CSS3 is still not fully implemented, so many of these suggestions are only implemented by the browsers themselves, and in order to identify a browser vendor, they prefix the corresponding attributes. This causes a lot of inconvenience to the people who write the code, each time in order to be compatible with each browser will be the same rules to write the implementation of different browsers, but also the prefix of each rule plus them. For example:

button,a.button{
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
However, we can write this after using compass:

@import "COMPASS/CSS3";
. notice{
@includeborder-radius (5px);
}
How is it, very convenient?!!!

Many of the new features of CSS3 are defined in compass, and you can view them in the Official document!

Grid layout

Compass provides a very convenient way to grid layout. We all know that if we do not use the CSS framework of the third party, we can realize our own grid layout, we need to calculate different width, gap, padding and so on according to different columns quantity. So most of our work is wasted in these boring calculations, and after using compass, we just need to define a few simple variables to implement our grid layout without having to do these tedious computational problems ourselves. Compass provides a lot of grid layout frameworks, such as Blueprint\960.gs\susy. You can see the following and choose according to your personal preferences.

Spiting

As we all know, in order to reduce HTTP requests, we'll put some common UI components in a larger image, then set different heights, widths, and intervals, and then define their rules in CSS. However, this is as cumbersome and technical as the computational workload of grid layouts. Using compass, you can save a lot of time to concentrate on what you need to do without wasting your life on it. The specific use of the method, no longer written here, space is not enough. Have time to open the post alone later.

Other

Compass defines a very large number of commonly used excellent modules, but also a lot of community maintenance of good plug-ins, can only you use