官网:https://www.sass.hk/docs/

Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。

1. 特色功能 (Features)

  • 完全兼容 CSS3
  • 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
  • 通过函数进行颜色值与属性值的运算
  • 提供控制指令 (control directives)等高级功能
  • 自定义输出格式

2. 语法格式 (Syntax)

Sass 有两种语法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 这种格式仅在 CSS3 语法的基础上进行拓展,所有 CSS3 语法在 SCSS 中都是通用的,同时加入 Sass 的特色功能。此外,SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax),以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。

另一种也是最早的 Sass 语法格式,被称为缩进格式 (Indented Sass) 通常简称 "Sass",是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器,用 “换行” 代替 “分号” 分隔属性,很多人认为这样做比 SCSS 更容易阅读,书写也更快速。缩进格式也可以使用 Sass 的全部功能,只是与 SCSS 相比个别地方采取了不同的表达方式,具体请查看 the indented syntax reference。这种格式以 .sass 作为拓展名。

任何一种格式可以直接 导入 (@import) 到另一种格式中使用,或者通过 sass-convert 命令行工具转换成另一种格式:

# Convert Sass to SCSS
$ sass-convert style.sass style.scss # Convert SCSS to Sass
$ sass-convert style.scss style.sass

Sass (Syntactically Awesome StyleSheets)的更多相关文章

  1. Sass(Syntactically Awesome Stylesheets)——概述(待续)

    官网地址:http://sass.bootcss.com/ Sass(Syntactically Awesome Stylesheets) Sass 是成熟.稳定.强大的 CSS 扩展语言. 特征 兼 ...

  2. sass/scss 和 less的区别

    一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...

  3. Sass与Web组件化相关的功能

    Sass https://en.wikipedia.org/wiki/Sass_(stylesheet_language) Sass (Syntactically Awesome Stylesheet ...

  4. [Ruby on Rails系列]5、专题:Talk About SaSS

    This is my presentation in the Rails lecture of Hosei University. I will introduce SaSS by 5 example ...

  5. sass 使用入门教程

    我们都知道,css没有变量,也没有条件语句,在开发过程中,难免有些麻烦,因此有了CSS预处理器(css preprocessor),Sass便是其中之一. 一.什么是Sass Sass (Syntac ...

  6. 动态样式语言Sass&Less介绍与区别

    一. Sass/Scss&Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写, ...

  7. SASS简介及使用方法

    一.什么是Sass Sass (Syntactically Awesome StyleSheets)是css的一个扩展开发工具,它允许你使用变量.条件语句等,使开发更简单可维护.这里是官方文档. 二. ...

  8. [转]SCSS 和 SASS 和 HAML 和CoffeeScript

    Asset Pipeline 提供了内建直接使用 Sass 撰写 CSS 的功能. 你也许会生出这样的疑惑:什么是 Sass? Why should I care? Sass (Syntactical ...

  9. 常用css框架 Sass/Less

    Bootstrap less/sass Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量.嵌 ...

随机推荐

  1. Sphider + SCWS 打造完美PHP中文搜索引擎

    今日需要为几个网站做个全文搜索引擎,找了几个PHP开源项目,先试了一下Sphinx ,可惜是基于数据库的,相当于数据库搜索的扩展.Sphider还不错,不过中文的分词不行,基本只能靠空格和符号进行分词 ...

  2. 喵神 onevcat 的直播首秀

    喵神 onevcat 的直播首秀   王巍在圈内人称喵神,我和他在网上很早就认识,平时多有交流.在我眼中,他是一个幽默风趣高手.虽然他的博客中主要内容是 iOS 开发,但是他实际上涉及的技术领域还包括 ...

  3. Debian8.0 搭建leanote

    参考了官方wiki以及中文博客 https://github.com/leanote/leanote/wiki http://leanote.leanote.com/post/Leanote-manu ...

  4. python文件目录操作大全

    python只获取当前目录下的文件夹及文件名 list = os.listdir(rootdir)#列出目录下的所有文件和目录 for line in list: filepath = os.path ...

  5. python操作excel之 模块 xlrd (详解)

    二.使用介绍 1.导入模块 import xlrd 2.打开Excel文件读取数据 data = xlrd.open_workbook('excelFile.xls') 3.使用技巧 获取一个工作表 ...

  6. Unity3D学习(十一):关于UI销毁后图集仍然无法释放问题的解决办法

    前言 最近进行项目性能优化的时候发现的问题. 问题 从大厅进到单局的过程中,会经过选择英雄和加载两个流程,这两个流程对应的UI界面都会有一张几mb左右的贴图作为背景,在进入单局游戏后这两个UI已经销毁 ...

  7. zabbix的agent端的主动模式关键三个参数

    如多主机超过300+和队列内容过多,就采用主动模式. [root@web03 zabbix]# egrep -v "^#|^$" zabbix_agentd.conf PidFil ...

  8. Easy UI分页控件修改刷新方法后触发两次请求

    今天我在做分页的时候,有这样的一个现象: 我重写了分页的刷新和改变页面大小的方法,发现给服务器提交了两次post,问题出现在哪里的?经过alert调试,发现原因是: 刷新和改变页面大小的事件执行的时候 ...

  9. JVM与外界通过数据通道进行数据交换

    使用I/O流访问file中的内容. JVM与外界通过数据通道进行数据交换. 分类: 按流分为输入流和输出流: 按传输单位分为字节流和字符流: 还可以分为节点流和过滤流. 节点流:负责数据源和程序之间建 ...

  10. (转)FS_S5PC100平台上Linux Camera驱动开发详解(二)

    4-3 摄像头的初始化流程及v4l2子设备驱动 这个问题弄清楚了以后下面就来看获得Camera信息以后如何做后续的处理: 在fimc_init_global调用结束之后我们获得了OV9650的信息,之 ...