如何让ruby 自动生成css 文件

html-css012

如何让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。

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

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