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


Note:

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:


Explanation:

//结果:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 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文件的子文件中(screen.scss/print.scss/ie.scss)添加和编辑项目的样式表;
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.
Sass文件以"_"开头的叫做局部文件,不会被编译成CSS;但它们可以被引入到其他Sass文件中;
You can configure your project by editing the config.rb configuration file.
你可以通过编辑config.rb配置文件来配置项目信息; 
You must compile your sass stylesheets into CSS when they change.
当Sass文件被修改后,必须要编译Sass文件到CSS;
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:
<head>
<link href="http://blog.csdn.net//stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css"/>
<link href="http://blog.csdn.net//stylesheets/print.css" media="print" rel="stylesheet" type="text/css"/>
<!--[if IE]>
 <link href="http://blog.csdn.net//stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css"/>
<![endif]-->
</head>
将编译后的文件引入到HTML页面中;


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.


Preview







Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs