0 0 0 0

simple build

1. Innovation project.

F discCreate:sassDemo

2. Compiling css files.

Display the css code for the conversion of the scss file on the command screen

Command: sass file name ( file containing path )

Sass sassdemosasstest. Scss.

②. Show css content results saved as files

Command: sass scss file css file ( where content is saved )

Sass sassDemosasstest.scss sassdemostylesheetstest. Css.

In stylesheets folderDisplayContent:


If you want to put css in a file, you need to create this folder ( such as stylesheets ).

Sass provides four compilation styles

* nested: nested indented css code, which is the default.
Expanded, expanded css code with no indent.
* compact: css code.
* compression: compressed css code.

In the production environment, the last option is generally used.

Sass --style compressed test.sass test. Css.

3. Enable listening compilation (. Automatic build compilation )

You can also enable sass to listen to a file or directory, and automatically generate a compiled version once the source file has changed.

Sass single file listening

Input command: sass --watch Sass file ( Test. Scss ): css file ( css file ).Test. Css.)

Eg: sass --watch sassdemosasstest. Scss: sassdemostylesheetstest. Css.

When the file in the scss folder changes, the css file is updated.

Sass folder listening

Input command: sass --watch sass folder name: css folder name

Eg: sass --watch sassdemosass: sassdemostylesheets

When the file in the scss folder changes, the css file is updated, and the command line output prompts:

Sass 's website, providing a online converter. You can go there and run the following examples.

4. Close listening.

Ctrl + c close listening

Two. Use compass to build the project.

( 1 ). What's compass.

Compass 's core team member chris eppstein created, a style framework, including a large number of well-defined mixins, functions, and.

( 2 ). CompassBuild project

Create a file mysass file in the f disk

Open the run command, execute

compass create mySasssass

The following:


//结果:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 5 
directory sass/
directory sass/sass///sass文件所在目录;
directory sass/stylesheets///css文件所在目录;
create sass/config.rb//项目配置文件;
create sass/sass/screen.scss//主要针对屏幕的sass文件;
create sass/sass/print.scss//主要针对打印设备;
create sass/sass/ie.scss//主要针对IE浏览器;
write sass/stylesheets/ie.css
write sass/stylesheets/print.css
write sass/stylesheets/screen.css//scss文件编译后对应的css文件;最终将引入到HTML中的文件;
You may now add and edit sass stylesheets in the sass subdirectory of your project.
Sass files beginning with an underscore are called partials and won't be compiled to CSS,
but they can be imported into other sass stylesheets.
You can configure your project by editing the config.rb configuration file.
You must compile your sass stylesheets into CSS when they change.
1. To compile on demand://直接编译; 
compass compile [path/to/project]
2. To monitor your project for changes and automatically recompile: 
compass watch [path/to/project]//监听项目变化并且自动编译; 
To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<link href="" media="screen, projection" rel="stylesheet" type="text/css"/>
<link href="" media="print" rel="stylesheet" type="text/css"/>
<!--[if IE]>
 <link href="" media="screen, projection" rel="stylesheet" type="text/css"/>

F: mysass file appears

A./enter the project folder to execute the command:

cd mySasssass

B. Open listening, execute command.

compass watch

Edit css, in screen. Scss ( primarily for the sass file ).

Run the command to appear

And stylesheets screen. Css ( the corresponding css file after the scss file is compiled; eventually, it'll be introduced into the html file; ).

Automatic compilation of css

( 3 ). Use in the project to create index. Html.

Files that are introduced in html or css files are files that scss automatically compiles.


Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs