[转]SCSS 和 SASS 和 HAML 和CoffeeScript
Asset Pipeline 提供了内建直接使用 Sass 撰写 CSS 的功能。
你也许会生出这样的疑惑:什么是 Sass? Why should I care?
Sass (Syntactically Awesome Stylesheets) 原先是内建在 Haml 中的一个副功能。
利用缩排设计避免製造难以 debug 的 syntax error
Haml
要谈 Sass,就不得不先来谈 Haml 这个 project。 Haml 全名为 HTML Abstract Markup Language,它是提供网页设计师撰写 HTML 的另外一条途径。
透过 Haml,你可以很快的使用它的 syntax 写出结构稳固的 HTML。
网页设计师经常有一个烦恼:在撰写 HTML 时要是忘记关一个 TAG,在浏览器中整个版面可能就会大爆炸,而这样的 Bug 却是很难被抓出来的。
Haml 主要就是让开发者,能够使用缩排的方式撰写 HTML,轻鬆做到永不忘记关 Tag 的效果。以下是 Haml 范例:
- %h1= "Hello World"
产生出来的 HTML 就会长这样
- <h1>Hello World</h1>
而
- %ul{:id => "list", :class => "menu"}
- %li= "Item 1"
- %li= "Item 2"
- %li= "Item 3"
会产生出来这样的 HTML
- <ul id="list" class="menu">
- <li>Item 1</li>
- <li>Item 2</li>
- <li>Item 3</li>
- </ul>
使用 Haml 撰写 HTML 的好处
Haml 是需要使用缩排撰写,再行 compile 的 markup language。它可以让你:
阻绝撰写出错误结构的 HTML TAG 的机会
只要 syntax 一错误,编译就无法成功。利用这样的特性,很容易阻绝写出会在浏览器因为 TAG 结构错误而难以 debug 出的 HTML。
轻鬆调整排版
在网页设计开发阶段,若要大幅调整 HTML 结构,对网页设计师也是很伤脑筋的一件事。因为大幅的搬动 HTML,通常有时候会造成:「少剪到一个 TAG」或 「改了开头 TAG ,却忘了改关闭 TAG 」的憾事。
在 Haml 中,这些状况都不会发生。因为 Haml 本身就属于「块状结构」、「自我 close」。因此不论怎样搬动和调整,只要符合缩排,几乎都不会爆炸。
使用 Haml 撰写 HTML 的坏处
如此 powerful 的 markup language 为何没有风行?反倒是原先属于副功能的 Sass 大红特红。
原因就在于 Haml 的特性:不只需要被机器 compile,它也需要被人脑 compile。
HTML 本身就是一门相当直观的 markup language。
在撰写 Haml 时,排版虽然相当轻鬆。但接手维护 Haml 版面的人,却通常痛苦不堪。因为「非常不直观」。
这也是 Haml 的反对者,批评最力的地方。
多数人无法接受维护不直观的「任何东西」,加上撰写 Haml 需要另外学习特殊的 syntax。没有压倒性的好处,一般人是不会贸然进行技术投资的。这也是为什么 Haml 始终处是小众技术的主要原因。
Sass / SCSS
拉回来谈 Sass,Sass 原先是附属在 Haml 裡面的一个副功能。这也是 sass-convert 这个指令必须要安装 haml 这个 gem 才能使用的原因。
Sass 的原理,是让开发者可以透过「缩排」的方式去撰写维护 CSS,同样可以避免忘记关 TAG 而大爆炸的糗事。
而因为 CSS 的结构特性,造成了 Sass 与 Haml 截然不同的命运。多数人反对 Haml,是因为 Haml 反而造成了 HTML 在阅读上的不直观。
而 Sass 的语法
- .content
- margin: 2em 0
- h1
- font-size: 2em
产生出
- .content{
- margin: 2em 0;
- }
- .content h1{
- font-size: 2em;
- }
反倒让 CSS 的维护变得直观了。
接触 Sass / SCSS 后的不少开发者甚至认为,缩排 block 的撰写方式才是 CSS 在被发明时应该被设计出来的样子。
现在撰写 CSS 的方式,有一个绝大缺点:只要在结构上涉及巢状或多个 class,维护者就必须複製贴上 style。不少人认为这真是愚蠢至极且烦人透顶的设计。
内建 Killer features 让维护 CSS 变得更简单
Sass 也提供了其他便利功能,如变数、函数、数学、继承、mixin …等等功能。
在进行网页 protyping 时,更改全站配色或者是直接提供两个以上的设计,对设计师来说是家常便饭的事。
但更改全站配色却是相当麻烦的一件事,因为「寻找 + 全数取代」,并不能保证最后会有正确的结果。很有可能:你更改了所有 CSS 中涉及连结的颜色,却发现在全数取代的过程中,不小心也改到边框的颜色。
若能使用变数去指定特定 style 的颜色,该有多好。
变数 ( Variables )
- $border-color: #3bbfce
- $link-color: #3bbfcf
- .content
- border-color: $border-color
- a
- color: $link-color
CSS
- .content{ border-color: #3bbfce; }
- .content a{color: #3bbfcf; }
数学
在调整区块宽度时,你也希望:每次调整宽度时,可不可以不要每次都按计算机,再全数手动修改…
- .content
- width: (500px/2);
- .content{ width: 250px; }
内建函式
在调整颜色亮度时,你希望可否无需再开调色盘,直接改 CSS 就让 style 暗一点?
- $color = darken(#800, 20%)
- .content
- $color
- .content{ #200; }
这都还只是 Sass 所提供的当中一小部分基础功能而已,却足以让网页设计师惊艳十足了。加上撰写维护时十分直观,这也难怪为何 Sass 只是 Haml 中的副功能,后继的声势浪头却远高于 Haml 本身。
SCSS
那 SCSS 又与 Sass 有什么差别,他们看起来好像是类似的东西?
是这样的,Sass 原先使用的缩排,对于网页设计师来说,还是相当不直观。而且实务上也不能直接将旧有的 CSS 直接贴进 Sass 中。其实还是存在一定的不方便度。也因此 Sass 进行了进化,改良了 syntax,而 Sass 3 后来就被称为 SCSS ( Sassy CSS)。
它的 syntax 与 CSS 原有的 syntax 完全 compatible,使用了 { } 去取代原先的缩排方式。
比如说原有的
- .content
- margin: 2em 0
- h1
- font-size: 2em
在 SCSS 中变成了
- .content{
- margin: 2em 0;
- h1 {font-size: 2em }
- }
在撰写上,更加无比的直观,同时也能将旧有的 CSS 直接贴进去,完全没问题!SCSS 更新增了不少关于 CSS3 的 feature 函式。
就拿我最爱的背景渐变色来说好了,原先要做渐变色,CSS 必须要这样写:
- #linear-gradient {
- background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
- background-image: -webkit-linear-gradient(left top, #ffffff, #dddddd);
- background-image: -moz-linear-gradient(left top, #ffffff, #dddddd);
- background-image: -o-linear-gradient(left top, #ffffff, #dddddd);
- background-image: -ms-linear-gradient(left top, #ffffff, #dddddd);
- background-image: linear-gradient(left top, #ffffff, #dddddd);
- }
因为你必须支援所有的 Browser。
但在 SCSS 中,一行就搞定了!
- #linear-gradient { @include background-image(linear-gradient(left top, white, #dddddd)); }
小结
为什么 Rails 3.1 鼓励推行 Sass?因为 Sass / SCSS 实在可以大幅节省 网页设计师 / 开发者维护网站程式的功夫。
而在这章中,其实我还没讲到 Rails 3.1 真正整合 Sass 的重点:「Compass」。「Compass」是一套 SCSS 的 Framework。它才是最强大的工具。images
http://upgrade2rails31.heroku.com/sass-scss/
[转]SCSS 和 SASS 和 HAML 和CoffeeScript的更多相关文章
- Scss 与 Sass 是什么,他们的区别在哪里?
转载自:http://yunkus.com/difference-between-scss-sass/ 要想了解Scss 与 Sass 是什么以及他们的区别又在哪里,我们不过不先从他们各自的定义说起. ...
- SCSS 与 Sass 异同
SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能.也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件.另外,SCSS 还 ...
- SCSS(SASS、CSS)学习
看的这篇文章 http://www.frostsky.com/2014/07/sass-scss/ 写的还比较清晰 SASS是CSS3的一个扩展,增加了规则嵌套.变量.混合.选择器继承等等.通过使用命 ...
- scss和sass最大的区别
重新接触了一下sass语法,在vscode的用的easysass插件.ctrl+S就可以自动编译成css文件.需要自己配置生成css路径 遇到的一个坑就是sass官网几乎全是写的sass,示例中全部是 ...
- css预处理器less和scss之sass介绍(二)
本来打算整理jQuery Mobile来着,但是没有研究明白,所以接着上个周的继续介绍... [scss中的基础语法] 1.scss中的变量 ①声明变量:$变量名:变量值 $width:100px ...
- scss、sass、less的对比与区别
什么是Sass和Less? sass和less都属于CSS预处理器. css预处理定义了一种新的语言,其基本思想是,用一种专门的编程语言,为css增加了一些编程的特性,将CSS作为目标生成文件,然后开 ...
- scss(sass)
- 分享15款很实用的 Sass 和 Compass 工具
Sass 是 CSS 的扩展,增加了嵌套规则,变量,混入功能等很多更多.它简化了组织和维护 CSS 代码的成本.Compass 是一个开源的 CSS 框架,使得使用 CSS3 和流行的设计模式比以往任 ...
- gulp常用插件之gulp-inject使用
更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-inject这个插件的作用与wiredep类似,不同的是可以自己任意指定需要插入文件的列表.它同样是利用注释来寻找插入的位置.获取源文件 ...
随机推荐
- iOS解决导航引起视图高度问题
经过导航栏跨越的坑,总结出有两种方法可以无痕解决(前提>=iOS7版本)(TabBar与导航栏类似) 1.通过设置导航栏的透明度实现(这种方式的控制器view的起始坐标是充(0,64)开始的) ...
- 通过Safari获取iOS设备的UUID,远程发送更是便捷
1.获取UUID (1)在Safari上输入:http://fir.im/udid (2)点击安装描述文件,然后就可以获取到UUID了 2.fir.im提供一个非常好用的内侧平台 详情使用见:http ...
- Java编程中的一些常见问题汇总
转载自 http://macrochen.iteye.com/blog/1393502 每天在写Java程序,其实里面有一些细节大家可能没怎么注意,这不,有人总结了一个我们编程中常见的问题.虽然一般 ...
- Android N API预览
Android N for Developers 重要的开发人员功能 多窗体支持 通知 JIT/AOT 编译 高速的应用安装路径 外出瞌睡模式 后台优化 Data Saver 高速设置图块 API 号 ...
- IONIC3 打包安卓apk详细过程(大量图文)
经历三天的踩坑,跳坑,相信绝大多数的问题都已经覆盖到了,请仔细按照流程来对照操作及检查. 1.基本依赖环境 nodejs环境 (作为一个前端相信你已经有了) 最好提前配置好node的环境变量,便于全 ...
- (转载)DataTable与List<T>相互转换
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- iOS 动态修改导航栏颜色 UINavigationBar
示例 所谓动态修改 意思是 在当前页面滚动的过程中 亦或 是在 触发返回事件\进入一个新的页面 导航栏的动态变化 由于系统级别的navBar 高度集成 很多自己想实现的功能 很不好弄 如果是通过 ...
- shiro2
mapper接口:根据用户id查询用户权限的菜单 service接口:根据用户id查询用户权限的菜单 获取用户权限范围的url 思路: 在用户认证时,认证通过,根据用户id从数据库获取用户权限范围的u ...
- ubuntu android studio 编译及运行错误Error retrieving parent for item: No resource found that matches the given name
安装好android studio并且安装其它需要的SDK或组件后,根据向导生成新的项目, 编译或运行时可能会出现下面的错误: Error:Error retrieving parent for it ...
- 《程序员代码面试指南》第三章 二叉树问题 判断t1 树中是否有与t2 树拓扑结构完全相同的子树
题目 判断t1 树中是否有与t2 树拓扑结构完全相同的子树 java代码 package com.lizhouwei.chapter3; /** * @Description: 判断t1 树中是否有与 ...