Sass,compass Let development efficiency fly

Recently began to learn and use, found using it to write CSS is really a variety of cool

Installing Sass,compass

1. Sass is dependent on Ruby, you must first install ruby, click Download
2. After you download ruby, use the command line to install the Sass gem install sass
3. Using the command, Sass-v compass-v to see if the installation was successful

The installation is successful if the situation occurs

the use and advantages of sass

• SASS Official Website: http://www.w3cplus.com/sassguide/
• Sass Features:

Define variables, numeric calculations (scss files on the left, CSS files after compilation on the right)

Easy to know who is the child element without having to write a bunch of duplicate tags

can also be used as a function, you can pass parameters, you can set the default parameters

This is not enough, and if sass is not used with compass, it is difficult to demonstrate the power of its function.

Use of Compass

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

Features of the 2.compass

• Easy Browser compatibility
• Full support CSS3
• Provide massive use of functions, color processing, access to client data, etc.
• Easily scale

3. Common functions:

[Email protected] (merging CSS files for modularity)

You can split the styles of each part of the project into _HEAD.SCSS,_BODY.SCSS,_FOOT.SCSS (note!) To start with _, these files will not be compiled into a CSS file.

Achieve results

Using the method, in Main.scss, add the following code

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

Execute the compilation, you can implement

2.CSS3 compatibility

No need to repeat multiple browser prefixes each time, just write the @include in front (this is written in the normal CSS3 mode)

3. Merging Sprite Chart

Description: A CSS sprite is a way to reduce the HTTP request by flattening several images into a single image, and can increase the speed of the site loading

The directory structure is as follows: Share directory of images that have not been merged, the picture in the images directory is the merged picture

How to use:

Enter the following 3 lines of code in SHARE.SCSS

1 @import "Compass/utilities/sprites";   2 @import "Share/*.png";   Note the path here, * that matches all images in PNG format 3 @include all-share-sprites;   The middle share is the name of the directory where the files are not merged,

And then do the compilation, such as the next, casually tested, a little ugly hey

And, in the Share.css file, but also the location of the picture is calculated, very convenient to use, as follows

Bugs that have occurred:

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: Picture name, don't have numbers, Chinese, etc.

4. Browser normalize.css (solve the problem of various browser styles not unified)

(1) Description: Normalize.css is a kind CSS reset of alternative.

(2) Advantages:

• Protect useful Browser default styles instead of completely removing them
• Generalized style: Provides for most HTML elements
• Fix bugs in browser itself and ensure consistency of each browser
• Optimize the usability of CSS: with some tips
• Explain the code: use annotations and detailed documentation to

(3) Official document Https://github.com/ksmandersen/compass-normalize

(4) Installing the Gem install Compass-normalize

(5) How to use

• Create a new project

compass create <my_project> -r compass-normalize --using compass-normalize

• Add in an existing project

Add require ' compass-normalize ' to config.rb

• The use of standardized plug-ins, only need to introduce @import "normalize"; This is for the whole introduction

Under normal circumstances is to select the required modules, introduced separately, to prevent code redundancy, as follows

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, Compass compilation

Said so much, still poorly compiled

1. Compile with visual Tools for example: Koala (real-time compilation, compression, multi-language support, easy to use)

, click Download

2. Use the command line

Create a project compass create MyProject click into the created directory and the following 3 files appear

Compile compass compile (used under the project root , compile files in the Sass directory to css,css path to Css-dir configured in CONFIG.RB)

Common command lines are as follows

3. Using the front-end automation tool Gulp

(A gulp article will be written next, not to be continued)

Sass,compass Let development efficiency fly