什么是 CSS 预处理器?

定义:

CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。

通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量简单的逻辑程序函数(如右侧代码编辑器中就使用了变量$color)等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁适应性更强可读性更佳更易于代码的维护等诸多好处。

其它 CSS 预处理器语言:

CSS 预处理器技术已经非常的成熟,而且也涌现出了很多种不同的 CSS 预处理器语言,比如说:

  • Sass(SCSS)
  • LESS
  • Stylus
  • Turbine
  • Swithch CSS
  • CSS Cacheer
  • DT CSS

如此之多的 CSS 预处理器,那么“我应该选择哪种 CSS 预处理器?”也相应成了最近网上的一大热门话题,在 LinkedinTwitterCSS-Trick知乎以及各大技术论坛上,很多人为此争论不休。相比过去我们对是否应该使用 CSS 预处理器的话题而言,这已经是很大的进步了。

到目前为止,在众多优秀的 CSS 预处理器语言中就属 SassLESS 和 Stylus 最优秀,讨论的也多,对比的也多。本教程将着重向大家介绍 CSS 预处理器中的 Sass。相信前端开发工程师会喜欢的。

什么是 Sass?

Sass 官网上是这样描述 Sass 的:

  1. Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。
  2. Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。

Sass 前世今生:

Sass 是最早的 CSS 预处理语言,有比 LESS 更为强大的功能,不过其一开始的缩进式语法(Sass 老版本语法,后面课程会详细介绍 )并不能被大众接受,不过由于其强大的功能和 Ruby on Rails 的大力推动,还是有很多开发者选择了 Sass。

Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML(一种缩进式 HTML 预编译器)而设计的,因此有着和 HTML 一样的缩进式风格。

为什么早期不如 LESS 普及?

虽然缩进式风格可以有效缩减代码量,强制规范编码风格,但它一方面并不为大多数程序接受,另一方面无法兼容已有的 CSS 代码。这也是 Sass 虽然出现得最早,但远不如 LESS 普及的原因。

Sass 和 SCSS 有什么区别?

Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:

  1. 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
  2. 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

先来看一个示例:

Sass 语法

  1. $font-stack: Helvetica, sans-serif //定义变量
  2. $primary-color: #333 //定义变量
  3.  
  4. body
  5. font: 100% $font-stack
  6. color: $primary-color

SCSS 语法

  1. $font-stack: Helvetica, sans-serif;
  2. $primary-color: #333;
  3.  
  4. body {
  5. font: 100% $font-stack;
  6. color: $primary-color;
  7. }

编译出来的 CSS

  1. body {
  2. font: 100% Helvetica, sans-serif;
  3. color: #333;
  4. }

提示:小伙伴们可以看出来,我们的右侧代码使用的是 SCSS 语法方式(我们的代码编辑器不支持 Sass 语法方式噢!)。

Sass/SCSS 和纯 CSS 写法差很多吗?

写法差很多吗?这是很多初学者会问的一个问题。那么借此机会简单了解一下。

Sass 和 CSS 写法有差别:

Sass 和 CSS 写法的确存在一定的差异,由于 Sass 是基于 Ruby 写出来,所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号,其主要是依靠严格的缩进方式来控制的。如:

Sass写法:

  1. body
  2. color: #fff
  3. background: #f36

而在 CSS 我们是这样书写:

  1. body{
  2. color:#fff;
  3. background:#f36;
  4. }

SCSS 和 CSS 写法无差别:

SCSS 和 CSS 写法无差别,这也是 Sass 后来越来越受大众喜欢原因之一。简单点说,把你现有的“.css”文件直接修改成“.scss”即可使用。

文章来自:http://www.imooc.com/code/6374

第1章 Sass简介的更多相关文章

  1. Windows程序设计(第五版)学习:第二章 Unicode简介

    第二章 Unicode简介 1,Windows通过双字节技术DBCS解决这个问题,代码页定义不同的字符集,称为ANSI字符集,比如日文为CP932,韩文为CP949,繁体中文为CP950,简体中文为C ...

  2. 《深入浅出Node.js》第1章 Node简介

    @by Ruth92(转载请注明出处) 第1章 Node简介 一.Node的起源 高性能Web服务器的要点:事件驱动.非阻塞I/O. 选择JavaScript的原因:高性能.符合事件驱动.没有历史包袱 ...

  3. 第一章 C++简介

    第一章  C++简介 1.1  C++特点 C++融合了3种不同的编程方式:C语言代表的过程性语言,C++在C语言基础上添加的类代表的面向对象语言,C++模板支持的泛型编程. 1.2  C语言及其编程 ...

  4. <算法图解>读书笔记:第1章 算法简介

    阅读书籍:[美]Aditya Bhargava◎著 袁国忠◎译.人民邮电出版社.<算法图解> 第1章 算法简介 1.2 二分查找 一般而言,对于包含n个元素的列表,用二分查找最多需要\(l ...

  5. 《gradle 用户指南中文版》 第1章、简介

    第1章.简介 目录 1.1 关于本用户指南 Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建工具. 这里我们将介绍Gradle,我们认为gradle让java项 ...

  6. 第1章WCF简介(WCF全面解析读书笔记2)

    第1章 WCF简介 面向服务架构(SOA)是近年来备受业界关注的一个主题,它代表了软件架构的一种方向.顺应SOA发展潮流,微软于2006年年底推出了一种新的分布式通信框架Windows Communi ...

  7. python 教程 第一章、 简介

    第一章. 简介 官方介绍: Python是一种简单易学,功能强大的编程语言,它有高效率的高层数据结构,简单而有效地实现面向对象编程.Python简洁的语法和对动态输入的支持,再加上解释性语言的本质,使 ...

  8. ArcGIS for Desktop入门教程_第二章_Desktop简介 - ArcGIS知乎-新一代ArcGIS问答社区

    原文:ArcGIS for Desktop入门教程_第二章_Desktop简介 - ArcGIS知乎-新一代ArcGIS问答社区 1 Desktop简介 1.1 ArcGIS for Desktop ...

  9. 第1章 JavaScript 简介

    第1章 JavaScript 简介 1.1 JavaScript简史 1.2 JavaScript实现 1.2.1 ECMAScript 1.2.2 文档对象模型(DOM) 1.2.3 浏览器对象模型 ...

随机推荐

  1. php count()函数用法 及其 一个坑

    用法 count() 函数返回数组中元素的数目. count(array,mode); [mode] 0 - 默认.不计算多维数组中的所有元素. 1 - 递归地计算数组中元素的数目(计算多维数组中的所 ...

  2. CSS元素居中的常用方法

    只有普通流和绝对定位的元素可以设置居中,浮动元素是不存在居中的. 1.块级元素居中 1) 普通流元素(position : static 或 position : relative) 水平居中:{ m ...

  3. 【OpenWRT】【RT5350】【三】MakeFile文件编写规则和OpenWRT驱动开发步骤

    一.Makefile文件编写 http://www.cnblogs.com/majiangjiang/articles/3218002.html 可以看下上面的博客,总结的比较全了,在此不再复述 二. ...

  4. Spring注解@Resource和@Autowired区别对比

    转载:http://www.cnblogs.com/think-in-java/p/5474740.html @Resource和@Autowired都是做bean的注入时使用,其实@Resource ...

  5. ipad互动教学

  6. LazyMan的Promise解法

    背景 见上一篇. 面向对象的链式调用中,掺杂了 一个一部动作, 对于这种工作链, 是非同步执行的链. LazyMan("Hank").sleep(1).eat("dinn ...

  7. yii框架的理解

    Yii Framework是一个基于组件.用于开发大型 Web 应用的高性能 PHP 框架.Yii提供了今日Web 2.0应用开发所需要的几乎一切功能.Yii是最有效率的PHP框架之一. yii框架里 ...

  8. Django知识(二)

    上一部链接 django入门全套(第一部) 本章内容 Django model Model 基础配置 django默认支持sqlite,mysql, oracle,postgresql数据库. < ...

  9. TortoiseGit 连接oschina不用每次输入用户名和密码的方法

    每次git clone 和push 都要输入用户名和密码.虽然安全,但在本机上每次都输有些麻烦,如何记住用户名和密码呢? 在网上看了各种方法,太杂,很多可能环境不一样,一直行不通.最后找到一种有效的方 ...

  10. Application Engine

    Exit(1) : Terminate the AE immediately and rollback all DB changes madeexit(0) : Terminate the AE im ...