Css--sass & Compass

Good code habits: it should be a comment that takes up 2/3 of the entire length.

Web Study notes: (http://www.imooc.com/learn/364)

1. Theoretical basis:

sass_syntactically Awesome stylesheets

Sass is like a hammer, compass is like a hammer, and CSS is the perfect product for hammers and nails.

Benefits of sass and compass:

• Use sass and compass to write more excellent CSS;
• Solve the problem of pain points in the process of CSS writing, such as sprite graph map problem;
• Effectively organize project elements such as styles, pictures, fonts, and more.

2.sass installation and command-line use

Introduction

Official website: http://sass-lang.com/

. SASS-Class Ruby syntax

. SCSS-Class CSS syntax, after 3.0

"Installation

Installing the ruby Environment www.ruby-lang.org/en/

Installing RVM Rvm.io

Installing GPG2 using Brew installation (Cakebrew)

After installing Ruby:

Gem install sass (--version=3.3.0)

"Sass compiled , but generally do not use sass compile, generally use compass.

Sass Xxx.scss Xxx.css

"Compass compass-style.org

Compass is an open-source CSS Authoring Framework. is an open-source CSS Writing tool

Mixin similar functions

> Install compass (requires root permission, write to repository file)

sudo gem install compass

> Create a catalog and then create the project (the last parameter is the project name)

Compass Create Learn-compass-init

echo the last passage:

_ The file is a local file, does not generate a separate CSS file for the introduction of other files;

CONFIG.RB files are used for configuration projects;

Compass compile (can be executed directly under the current path, plus file path)

Compass Watch (monitor changes in the project and automatically compile)

"Sass Convert Scss and Sass files

Sass-convert Main.scss Main.sass

Introduction to 2.Sass grammar-Basic article

Target page:

1 "Fonts: Using @import to introduce _ File implementation:

Compass uses plug-in mechanism to introduce normalize to replace reset

2 "Compass inherits the import mechanism of CSS, but is further optimized to use CSS native import mechanism only in the following 4 cases

The import optimization mechanism of Compass:

Note: There are underscores and no underscores that are considered to have the same name and are not allowed. The introduction of _ file can not write _

3 "notes. Project structure:

4 "category nested form, note: Hover to add &, so as to remove the default space in CSS

Attribute nesting is also supported

Generated CSS file:

Advanced articles and high-level articles temporarily do not learn, and other practical applications to learn, or else will forget.  

Css--sass & Compass