CSS预处理器 Less Sass,Scss 编译 Sourcemap调试
2016-06-10 17:33
176 查看
sass、less和stylus的安装使用和入门实践 SASS用法指南 Sass Basics
预处理器即preprocessor,预处理程序。
它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。(因为浏览器支持的还是CSS)
如果要将显示结果保存成文件,后面再跟一个.css文件名。
SASS 提供四个不同的编译风格:
生产环境当中,一般使用最后一个选项。
你也可以让SASS监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本。
当然,编译工具Koala最方便了
对Less,Sass都是支持的
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就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。
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 101Source 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 */
相关文章推荐
- css清除浮动
- css scrollbar 滚动条样式
- 《CSS权威指南》学习记录——定位(二)
- pt,px,rem和em之间区别总结
- CSS笔记二
- webstorm下搭建编译less环境 以及设置压缩css
- CSS3回顾系列0
- 视图控制器父类是使用Xib创建的,子类如何继承父类的样式
- 【CSS笔记三】CSS选择器
- 理解 position:relative 与 position:absolute
- CSS3实现炫酷进度条
- 创建一个纯CSS下拉菜单,支持三级菜单
- 【CSS笔记二】CSS样式基本知识
- CSS——CSS特性及选择器
- 【CSS笔记一】开始学习CSS,为网页添加样式
- 《CSS权威指南》学习记录——定位(一)
- css:float之清浮动
- 《CSS权威指南》学习记录——浮动
- scss使用后的简单入门总结
- CSS笔记