Sass and compass make development efficiency fly-beidan

Sass and compass make development efficiency fly-beidan has recently started to learn and use it, and found that using it to write css is really a variety of great

Install sass and compass

1. Sass depends on ruby. You must first install Ruby and click to download it.
2. After downloading ruby, use the command line to install sass gem install sass
3. Run the sass-v compass-v command to check whether the installation is successful.

If this happens, the installation is successful.

Sass usage and advantages

• Sass Official Website: http://www.w3cplus.com/sassguide/
• Api documentation http://sass-lang.com/documentation/file.SASS_REFERENCE.html
• Sass function:

Define the variable and calculate the value (the scss file on the left and the compiled css file on the right)

It is easy to know who is the child element, and there is no need to write a lot of repeated labels

You can also use it like a function. You can pass parameters and set default parameters.

This is far from enough. If sass is not used with compass, it is difficult to reflect its powerful functionality.

Use of compass

1. Official Document http://compass-style.org/help/tutorials/production-css/

2. compass features

• Easy browser compatibility
• Full support for css3
• Provides massive usage functions, color processing, and client data retrieval.
• Easy scaling

3. Common functions:

1. @ import (merge css files to implement modularization)

You can split the style of each part of the project into _ head. scss, _ body. scss, _ foot. scss(Note! It must start with _, so that these files will not be compiled into css files)

Effect

In main. scss, add the following code:

1 @import "base/head";2 @import "base/body"; 3 @import "base/foot";

Execute compilation to implement

2.css 3 compatibility

You do not need to repeat multiple browser prefixes each time. You only need to write @ include in front of the browser (normally written in css3 mode)

3. Merge sprites

(CSS sprite combines several images to reduce HTTP requests and increase website loading speeds .)

The directory structure is as follows: the share directory contains unmerged images, and the images under the images directory are merged images.

Usage:

Enter the following three lines of code in share. scss:

1 @ import "compass/utilities/sprites"; 2 @ import "share /*. png "; // note the path here. * Indicates matching all images in png Format 3 @ include all-share-sprites; // The share in the middle is the name of the directory for storing unmerged files,

Execute the compilation, as shown in the following figure. It's ugly to test it.

In addition, in the share.css file, the image location is also calculated, which is very convenient to use, as shown below:

Bugs:

1 error sass/screen.sccc (c:/Ruby22-x64/lib/ruby/gems/2.2.0/compass-1.0.3/lib/compass/sass_extensions/functions/sprite.rb:137:in 'sprite_does_not_have_parent':undefined 'parent' for nil:NilClass)

Solution: The image name should not contain numbers or Chinese Characters

4.browser normalize.css (solve the problem of inconsistent browser styles)

(1) Description:Normalize.cssYesCSS reset.

(2) Advantages:

• Protect useful browser default styles instead of removing them completely
• General style: provided for most HTML elements
• Fix browser bugs and ensure the consistency of various browsers
• Optimize CSS availability: Tips
• Code explanation: Use comments and detailed documents

(3) Official Document https://github.com/ksmandersen/compass-normalize

(4) install gem install compass-normalize

(5) Usage

• Create a new project

compass create -r compass-normalize --using compass-normalize

• Add an existing project

Add require 'compass-normalize 'to config. rb'

• To use a standardized plug-in, you only need to introduce @ import "normalize"; // This Is All introduced

Normally, select the required module and introduce it separately to prevent code redundancy, as shown below:

1 @import 'normalize/html5';2 @import 'normalize/base';3 @import 'normalize/links';4 @import 'normalize/typography';5 @import 'normalize/embeds';6 @import 'normalize/groups';7 @import 'normalize/forms';8 @import 'normalize/tables';

Scss compilation and compass Compilation

With so much said, compilation is still poor.

1. Compile with a visual tool, for example, koala (Real-Time compilation, compress, multi-language support, simple to use)

, Click to download

2. Use the command line

Create a project compass create myproject click to enter the Created directory, the following three files appear

Compile compass compile (inProject root directoryTo compile the files in the sass Directory into css. the css path is the css-dir configured in config. rb)

Common command lines are as follows:

3. Use the front-end automation tool gulp

(Next I will write an article on gulp, which is to be continued)