f盘创建：sassDemo
执行命令：sass 文件名（含路径的文件）
sass sassDemo\sass\test.scss
执行命令：sass scss文件 css文件（内容保存的地方）
sass sassDemo\sass\test.scss sassDemo\stylesheets\test.css
stylesheets文件夹中显示内容：
注意：
要把css放在某文件里面时，需要先创建这个文件夹（如stylesheets），否则会报错
* nested：嵌套缩进的css代码，它是默认值。 * expanded：没有缩进的、扩展的css代码。 * compact：简洁格式的css代码。 * compressed：压缩后的css代码。
生产环境当中，一般使用最后一个选项。
sass --style compressed test.sass test.css
你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。
输入命令:sass --watch sass文件(test.scss):css文件（test.css ）
eg:sass --watch sassDemo\sass\test.scss:sassDemo\stylesheets\test.css
当.scss文件夹中的文件发生变化时,会更新.css文件
输入命令: sass --watch sass文件夹名:css文件夹名
eg: sass --watch sassDemo\sass:sassDemo\stylesheets
当.scss文件夹中的文件发生变化时,会更新.css文件,同时命令行输出提示:
SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子。
ctrl+c关闭监听
Compass由SASS的核心团队成员Chris Eppstein创建，是一个非常丰富的样式框架，包括大量定义好的mixin，函数，以及对SASS的扩展。
①在f盘创建文件mySass文件
②打开运行命令，执行
compass create mySass\sass
出现下面：
解释是：
// 结果:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 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="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> <!--[if IE]> <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" /> <![endif]--> </head> 将编译后的文件引入到HTML页面中;
f:mySass文件中出现
③开启监听编译
a./进入项目文件夹, 执行命令：
cd mySass\sass
b.开启监听，执行命令
compass watch
④编辑css,在screen.scss （主要针对屏幕的sass文件）
运行命令中会出现
而stylesheets/screen.css （ scss文件编译后对应的css文件;最终将引入到HTML中的文件;）
自动编译成css
(3).在项目中使用，创建index.html
在html中引入的文件还是css文件，是scss自动编译后的文件
预览
