如何让ruby 自动生成css 文件

html-css018

如何让ruby 自动生成css 文件,第1张

编译sass文件

在命令行下进入到sass文件所在目录，

运行>compass

compile

也可以指定要编译的文件

>compass

compile

fileName.scss

#sass文件夹下会有个config文件指定编译后的css存放位置。

普遍的三款 CSS 预处理器框架，分别是 Sass、Less CSS、Stylus。

CSS 预处理器概述：CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。

总结来讲就是用编程的方法来写CSS样式，而不是手工一行行码，相当于从手工业时代进化到工业时代。

三种CSS 预处理器（框架）简介：

A、SASS2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。

B、LESS2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。

C、Stylus，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS。

Stylus主要优点：

1. 简短直观，缩进让CSS的层次非常直观。

2. At 属性引用可以减少维护量。

3. 函数和Mixin，重用的利器。

CSS 预处理器优缺点：

A、可以把PostCSS和预处理器(Sass、Stylus或LESS)结合起来使用。

B、部分PostCSS插件配合预处理器将功能添加到你的工作流中，让你工作变得更加轻松。如果只使用一个预处理器，而不使用这些插件，工作流至少会变得更加困难。

C、PostCSS插件和喜欢的预处理器(Sass、Stylus或LESS)之一结合在一起使用。

D、在常规的预处理器通过使用混合宏或函数特性像程序一样处理代码，达到类似的结果。不过不同的是CSS代码，而其他一切通过插件去处理，而这个过程中不需要调用函数，也没有混合宏等等。

使用技巧：Sass看起来在提供的特性上占有优势，但是LESS能够让开发者平滑地从现存CSS文件过渡到LESS，而不需要像Sass那样需要将CSS文件转换成Sass格式。

1、html:负责定义页面的内容

2、css:负责定义页面的样式

3、javascript:负责控制页面的行为

以上三种为前端学习的基本课程

1、jquery:javascript框架，javascript函数库，极大简化了javascript。

2、bootstrap:一个用于快速开发 Web 应用程序和网站的前端框架。

3、AngularJS: 是一个 JavaScript 框架。

4、JSON: 是存储和交换文本信息的语法.

5、Ajax: 可以用于创建快速动态的网页。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

6、Angular 2:是一个开源的JavaScript框架

7、React: 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI .

8、LESS:是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。是一种动态样式表语言，扩展了CSS的功能

9、Vue.js ：是用于构建交互式的 Web 界面的库。

10、Node.js ：是运行在服务端的 JavaScript。

以上十种，是在实际工作应用中常用的，总结的这些希望对你有所帮助。

学习前端开发，推荐到北京尚学堂，雄厚的师资力量和科学的授课方式，会带给你最完美的学习体验。