定义:

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 的:

Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。
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 语法

$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量 body
font: 100% $font-stack
color: $primary-color

SCSS 语法

$font-stack: Helvetica, sans-serif;
$primary-color: #333; body {
font: 100% $font-stack;
color: $primary-color;
}

编译出来的 CSS

body {
font: 100% Helvetica, sans-serif;
color: #333;
}

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

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

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

Sass 和 CSS 写法有差别:

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

Sass写法:

body
color: #fff
background: #f36

而在 CSS 我们是这样书写:

body{
color:#fff;
background:#f36;
}

SCSS 和 CSS 写法无差别:

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

1-1 sacc(scss)入门的更多相关文章

  1. scss 入门

    scss 入门 1. scss 引入其他文件 引入其他 .scss 文件 @import 'index.scss' 这样的话,文件在编译后,会自动把引入的文件和当前文件合并为一个. scss 文件 引 ...

  2. scss入门学习(一)

    sass的文件后缀名 sass是目前流行的css预处理语言.sass有两种后缀文件,一种是.sass,不允许使用大括号和分号:另一种是.SCSS,允许使用大括号和分号,类似于我们平时写css的语法习惯 ...

  3. scss 入门基础

    在一个项目中,样式是必不可少的一部分,而对于一个完整的项目来说是有个基准色调的.在项目需求变化不大的情况下,可以直接在css中写这些颜色值之类的东西.但是如果遇到一个朝令夕改的领导或者甲方,那会变得相 ...

  4. sacc scss less

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  5. sass或scss入门

    1.sass环境搭载: 安装ruby 安装sass 安装compass 配置webstorm 如果只是使用sass的话,就配置sass命名监听就好了 如图: sass目录如下: 如果配置了compas ...

  6. SCSS入门

    1. CSS预处理器 定义了一种新的专门的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代码的维护等诸多好处 ...

  7. Sass&Scss入门 选择器 混合器 导入 条件判断 迭代

    Sass 基于ruby的一种将脚本解析成CSS的脚本语言.也可以说是一种预处理语言. Sass在css的语法基础上增加了变量.嵌套.混合.继承.导入等高级功能. 使用Sass与Sass样式库(如com ...

  8. SCSS详解

    SCSS入门 CSS预处理器 定义了一种新的专门的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代码的维护等 ...

  9. web前端知识总结

    前言: 一直想着整理一下关于前端的知识体系和资料,工作忙了些,挤挤总会有的,资料很多,就看你能不能耐下心坚持去学了,要多学多敲多想,祝你进步~ 学习之前首先要大概了解什么是HTML ,CSS , JS ...

随机推荐

  1. java批量解压文件夹下的所有压缩文件(.rar、.zip、.gz、.tar.gz)

    // java批量解压文件夹下的所有压缩文件(.rar..zip..gz..tar.gz) 新建工具类: package com.mobile.utils; import com.github.jun ...

  2. iOS开发-实现相机app的方法[转载自官方]

    This brief code example to illustrates how you can capture video and convert the frames you get to U ...

  3. maven搭建ssm初级框架

    喜欢的朋友可以关注下,粉丝也缺. 前言: 想必大家对smm框架已经熟悉的不能再熟悉了,它是由Spring.SpringMVC.MyBatis三个开源框架整合而成,常作为数据源较简单的web项目的框架. ...

  4. flask_mail发送邮件(附源码)

    文章介绍如何用flask_mail发送QQ邮件,发送其它邮箱简单的更改相应配置即可 传送门:源代码 源代码地址:https://github.com/1417766861/flask_mail 首先展 ...

  5. odoo开发笔记 -- wkhtmltox打印不显示中文 --ubuntu字体安装

    wkhtmltox 是一个开源的将网页内容转换成PDF的软件包,常嵌套在网页页面里边做打印功能. 以微软雅黑字体为例(其他的宋体.黑体等点阵字体都一样的),我们的雅黑字体文件是:Yahei.ttf(放 ...

  6. Scanner的概述与String类的构造和使用_DAY12

    1:Scanner的概述(理解) 1)Scanner是JDK5以后出现的方便我们从键盘接受数据的类. 2)Scanner的构造格式: Scanner sc = new Scanner(System.i ...

  7. (转) argparse — 解析命令参数和选项

    原文地址:https://pythoncaff.com/docs/pymotw/argparse-command-line-option-and-argument-parsing/166 https: ...

  8. Linux驱动:I2C驱动编写要点

    继续上一篇博文没讲完的内容“针对 RepStart 型i2c设备的驱动模型”,其中涉及的内容有:i2c_client 的注册.i2c_driver 的注册.驱动程序的编写. 一.i2c 设备的注册分析 ...

  9. python特殊的数据类型

    lsit 列表是一种有序的数据集合,允许数据类型不一致! 1.定义:l=[1,"s",'2',True,u"您好"] 或者 l=list() 2.访问:l[0] ...

  10. 分析NonfairSync加锁/解锁过程

    类继承关系: NonfairSync => Sync => AbstractQueuedSynchronizer 类NonfairSync final void lock() { if ( ...