官网: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. atitit.提升软件开发的生产力关健点-------大型开发工具最关健

    atitit.提升软件开发的生产力关健点-------大型开发工具最关健 1. 可以创作出更好的工具遍历自己 1 2. 大型工具包括哪些方面 2 2.1. ide 2 2.2. dsl 2 2.3.  ...

  2. xUtils工具实现下载功能

    private String download_url="http://192.168.2.8:80/DownZip/*****.zip";//下载的路径 public  Stri ...

  3. 集合运算 蓝桥杯 set容器

    题目描述 给出两个整数集合A.B,求出他们的交集.并集以及B在A中的余集. 输入格式 第一行为一个整数n,表示集合A中的元素个数. 第二行有n个互不相同的用空格隔开的整数,表示集合A中的元素. 第三行 ...

  4. SAP ECC6安装系列五:安装后 License 的处理

    原作者博客 http://www.cnblogs.com/Michael_z/ ======================================== 我发现我确实比较懒,先和各位说声抱歉了 ...

  5. echarts 百度图表

    手册说明 http://echarts.baidu.com/option.html 3.0版本加了很多新属性可以看以上链接  此文用的3.x版本 第一步 引入 <script src=" ...

  6. 这不是bug,而是语言特性

    分析编程语言缺陷的一种方法是把所有的缺陷归于3类:不该做的做了,该做的没做,该做但做得不合适. 在使用switch case时,如果使用缺省的 fall through,请一定在旁边注释,因为97%的 ...

  7. 示例 - 如何在ASP.NET中应用Spider Studio生成的DLL?

    >> 接前文 "示例 - 如何在Console应用程序中应用SpiderStudio生成的DLL?", 将其运用到ASP.NET中: 1. 创建WebApplicati ...

  8. hive表分区的修复

    hive从低版本升级到高版本或者做hadoop的集群数据迁移时,需要重新创建表和表分区,由于使用的是动态分区,所以需要重新刷新分区表字段,否则无法查看数据. 在hive中执行中以下命令即可自动更新元数 ...

  9. 小贝_redis 高级应用-事务

    redis高级应用-事务 一.redis的事务 二.redis实现事务 三.redis事务问题 一.redis的事务 事务提供了一种"将多个命令打包,然后一次性.按顺序地运行"的机 ...

  10. C#string数组转换到int数组并得到最大最小值

    string[] input = { "1", "2", "3", "4", "5", " ...