Uncover the mysteries of sass and Compass

Uncover the mysteries of sass and Compass

Probably before you, like me, had no knowledge of sass and compass, and it might be better to know that they were used as pre-processing for CSS. So, please come with me today to learn some of the basics of sass and compass, including what they are, how they are installed, why they are used, basic grammar, and so on. What I need to explain is that I am only just touching sass and compass, and some advanced usage will not be covered by this article. After a week of contact, sass and compass are found to be of great use and are intended to be introduced and applied in the project in the future. Hope after reading, you and I like to sass and compass to bring you something very happy, also eager! Okay, no more nonsense, here we begin!

1. What is sass and compass?

Before we talk about this, let's introduce the following CSS. I believe you, like me, after several periods of development is 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 of CSS programming is the wrong drop. CSS contains a number of selectors and application style rules, which do not include variables, functions, inheritance, and so on in all of the general programming language we have rules. So it's a different feeling when you're writing CSS and other programming languages. Later, to facilitate their use, developers added a lot of programming ideas, such as the variables, functions, statements, and so on, which we referred to as pre-processors. There are many excellent CSS preprocessor, including sass, less, stylus and so on.

So back to the topic, what's sass? Sass officially defines it as a CSS-based meta language. In my opinion, in fact, Sass is a superset of CSS, but also a CSS development tool. Its rich knowledge of grammar makes it possible for developers to add a lot of programming elements to the CSS. We can use our usual programming ideas to write sass files (i.e.. scss files). To add, sass is free and does not require a certificate or authorization to be used by anyone.

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, which provides a lot of sass good modules, functions, etc. You can choose not to use it, but using it will give you great convenience in writing sass files, such as some reusable CSS modules, some very popular CSS grid layout frameworks, our common reset/normalizing, and so on.

Sass's official address: http://sass-lang.com/

Compass's official address: http://compass-style.org/its corresponding github address: Https://github.com/Compass/compass

Before continuing, the point to clarify is that sass and compass will not help you write CSS better, they will only give you a lot of convenience in writing CSS, and the real final CSS to write out how the effect or to see your own degree of mastery of them. As if, although there are many excellent JS library functions to give you the same call, if you do not know the JS library functions, JS you write the same.

2. Download and installation of Sass and compass

Before the introduction of the download and installation, the only thing to illustrate is that both sass and Compass were developed based on the Ruby language. Of course, it doesn't matter if you know anything about Ruby as much as I do, because it's not a big relationship with how they're developed. So we need to install Ruby before installing sass and compass. OK, start downloading and installing.

Ruby downloads and installs: https://www.ruby-lang.org/en/downloads/. Download it down and install it, due to the very simple process not table. After installation, you can enter the following command at the command line to check for success:

RUBY-V//Output Ruby 1.9.3p551

Then download and install sass and compass now. Also open the command line and enter the following command to install SASS and compass separately:

For Sassgem install sass//for Compassgem Install Compass

The above command needs to explain the gem. Personal feeling gem is like the NPM in node, the management tool of the package. I don't know if I understand right or wrong. If the installation is successful, you can also check the appropriate version information to see if the installation was successful:

For sasssass-v     //sass 3.4.13 (selective Steve)//For compasscompass-v   //Compass 1.0.3 (Polaris) .... (Some other copyright information, etc.)

3, 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 (demo.scss) You write, then enter the following command: Sass demo.scss command-line window will show 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 poorly understood in words, so look at an example.

Sass Code:

#main {    color: #999;    . Content {        color: #bfbfbf;    }}    

Choose 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:

Expanded style (default):

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

Configure different parameters, you can compile a different style of CSS. Looking at a person's liking, in the development phase, expanded feel very good, release can choose compressed.

4, the basic grammar of sass (real dry goods)

Declaration and reference of the ① variable

Declaring variables is very 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 to represent a declared variable with a $ start. Its corresponding value is after the colon. Let's look at how to use:

. danger-box:hover {    background-color: $highlight-color;}

It's so simple. It is emphasized here that variables are generally declared in the head of the sass file, and of course, if the variables are large enough, it is recommended to build a separate file to hold the variable (what? More files will increase the HTTP request!) Well, we'll talk about this for a while, for maintenance. Perhaps this example does not seem necessary, because in order to a color we circuitous so long time, it is not as good as their own directly write CSS a value is enough. Well, if you think so, then the pattern Tucson broken. If there are enough places in your project to use such a color value, then it is not very convenient for us to maintain it after a variable is defined elsewhere. Imagine if we revise the style, is not in a place to change the color value of the whole project to use the value of the place has changed?!!

②css Nested selectors

Let's look at an example to begin with:

#content article h1 {color: #333} #content Article p {margin-bottom:1.4em} #content aside {background-color: #eee}

is not very familiar, no accident, your code is also flooded with such code, look at the above we repeat the #content\article and so on. Of course you will think this is not much, wake up, just open a real project to see, repetition is n level so that you always feel irritable Ctrl + C. So why not make your job a little easier, and see how nested selectors do in the SASS syntax:

#content {     article{         h1  {color: #333}         P   {margin-bottom:1.4em}    }    aside { Background-color: #eee}}        

There is no discovery, very concise! It's kind of like nesting functions (a little bit of programming feeling) as we're programming them. Sass compiled this file will form the same as the one we wrote before. The compiler works this way: it appends the child selector to the parent selector and applies the corresponding rule, such as the example above H1 appended after the parent selector article and appended to the parent selector of article, forming a #content article h1 {color: #333}. Note the spaces between selectors.

If you have enough mechanism here, you may think that it is impossible to quote some pseudo-class. Yes, so SASS provides the parent selector &. As follows:

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

After compiling as a CSS file, the following:

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

③ Property Nesting

　　Continue to see examples:

nav{    border:{        style:solid;        width:1px;        Color: #ccc;    }}    

After compiling as a CSS file, the following:

nav{    border-style:solid;    border-width:1px;    Border-color: #ccc;}

Good! is very convenient, in the future no more laborious more so many code.

④import file

Using CSS, we know that CSS files allow us to introduce other CSS files. However, due to performance problems, few people do so in a system that is formally released. Because although the file is not big, but after all, it increases the HTTP request, each time the establishment and shutdown of the request will increase the page congestion loading time. resulting in performance degradation. See here should understand, the above we mentioned that question. Using SASS to introduce files does not increase the number of HTTP requests, because they are eventually compiled to form a file only when the imported files are loaded into the file being introduced. This has great benefits, so that we can manage our CSS files (exactly the Sass file) in a modular way. It is very convenient to modify maintenance in the future by putting the variable definition scss file, the file about the layout, the file about reset, and so on in different files.

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, the default format for file names. Scss can be omitted. See here, you may have doubts, so do not increase the sass file compiled into a CSS file time also caused a waste of CSS files! Listen to me, no, as long as you define each file as an underscore and a filename. For example, the Mixins file above can be defined as _MIXINS.SCSS. This way, Sass does not compile it as a CSS file, knowing that it is meant to be referenced to other files. Note that the file name is defined with an underscore and can still be underlined as above.

⑤ notes

If you have learned JS, then I don't have to comment on it. The Sass file comment supports two types of JS annotations, as follows:

This is a line of comments/* This is another line of comments */

It should be emphasized that the comments are omitted when the compiled Sass style is selected as compressed. However, we all know that when we publish the system, even in CSS we want to leave our copyright information. At this point, you can use another style of annotation that SASS uses:

/*! This is a comment, and will not disappear after compilation */

Regardless of style, this comment will never be lost in the CSS file!

⑥mixins

Sass supports a very convenient syntax, namely mixins. Similar to defining a variable, it simply defines a block of properties, as defined by the mixins named Rounded-corners:

@mixin rounded-corners {    -moz-border-radius:5px;   -webkit-border-radius:5px;    border-radius:5px;}

This can be used when you use the rounded corners:

. danger-box {  color:red;  @include rounded-corners;    Reference Mixins}

How, do you feel 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 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.

⑦ inheritance

Or look at examples, as follows, Warning-box, Success-box, Info-box classes inherit the properties of the box class and can override their properties:

Box.box {    padding:2em;    Color: $color ten;    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!

5. Use of Compass

After we finish the use and grammar of sass, let's look at how compass is used.

Open a command-line window, enter: Compass create MyProject. The project can be initialized with the following directory:

Where the sass file is the Sass file we wrote, the compiled CSS file will run into stylesheets. Of course, you can configure the content in CONFIG.RB. You know, CONFIG.RB is some configuration information for compass.

I think you, like me, don't want to get a command-line window every time you write a sass code to manually execute a compile command, so you can open a command-line window input under the current project: Compass watch. It will automatically help us to compile the modified file into a CSS file.

6. Use of Compass

Let's see what we're doing with compass.

①reset or called normalize.

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

@import "Compass/reset";

Of course, this is a set of reset code provided by compass. If you don't like or maintain your own set of reset, you can simply download it to your Sass folder's partials directory and introduce it to your sass file, such as the normalize style of my fork: 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 browser itself, and in order to identify a browser vendor, they all add their own prefixes in front of the corresponding attributes. This has caused a lot of inconvenience to the person who wrote the code, and each time the same rules were written to implement the different browsers in order to be compatible with each browser, each rule was preceded by a prefix. For example:

button,a.button{    -webkit-border-radius:5px;    -moz-border-radius:5px;    border-radius:5px;}

However, with compass we can write this:

@import "COMPASS/CSS3";. notice{    @includeborder-radius (5px);}

How, very convenient?!!

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

③ Grid Layout

Compass provides a very convenient way to grid layout. We all know that without a third-party CSS framework, if we implement our own grid layout, we need to calculate different widths, gaps, padding, etc. depending on the number of columns. So much of our work is wasted on these silly calculations, and with compass we just need to define simple variables to implement our grid layout without having to do these tedious computational problems ourselves. Compass provides a very many framework for grid layout, such as Blueprint\960.gs\susy. You can see the next few and choose according to your preferences.

④spiting

As we all know, in order to reduce HTTP requests, we will put some common UI components in a large image, then set different heights, widths and intervals, and then define their rules in CSS. However, this is the same computational effort as calculating the raster layout, which is cumbersome and without technical content. With compass, you can save yourself a lot of time to focus 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. There is time to open the post separately.

⑤ Other

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

6. Concluding remarks

All right, it's been two or three hours and the words are finished. There must be a lot of mistakes in the place, but also please see the children's shoes, welcome to spit Groove.

　　

Uncover the mysteries of sass and Compass