CSS预处理器 Less Sass,Scss 编译 Sourcemap调试

sass、less和stylus的安装使用和入门实践     SASS用法指南    Sass Basics

CSS预处理器

css preprocessor

预处理器即preprocessor,预处理程序。 

它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。（因为浏览器支持的还是CSS）

Less 

 LESS基本用法

Sass,Scss 

Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS，在Sass3之后的版本都支持这种语法规则。

Less,Sass,Scss编译

Sass,Scss

这是 安装sass

gem install sass

安装之后可以如下操作：

可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）

sass test.scss

如果要将显示结果保存成文件，后面再跟一个.css文件名。

sass test.scss test.css

SASS 提供四个不同的编译风格：

   * nested：嵌套缩进的css代码，它是默认值。

　　* expanded：没有缩进的、扩展的css代码。

　　* compact：简洁格式的css代码。

　　* compressed：压缩后的css代码。

生产环境当中，一般使用最后一个选项。

　　sass --style compressed test.sass test.css

你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

　　// watch a file

　　sass --watch input.scss:output.css

　　// watch a directory

　　sass --watch app/sass:public/stylesheets

当然，编译工具Koala最方便了

对Less,Sass都是支持的

 Sourcemap调试

利用sourcemap来调试sass     JavaScript Source Map 详解      Source Maps 101

Source Map

In today's modern workflow, the code that we author in our development environments is considerably different(有很大的不同) from the production code, after running it through compilation, minification, concatenation, or various other optimization processes.

This is where source maps come into play, by pointing out the exact mapping in our production code to the original authored code. （即指出源码和最终代码之间的对应关系）

Source Map，它是一个独立的map文件。

简单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。

启用 Source Map

只要在转换后的代码尾部，加上一行就可以了。

/*# sourceMappingURL=style.css.map */