官网: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. Delphi映射模式实验

    unit FrmMappingMode; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Contro ...

  2. redmine 的安装

    https://bitnami.com/stack/redmine/installer#官方地址 安装很简单,给权限 chmod +x bitnami-redmine-3.3.0-1-linux-x6 ...

  3. Visual Studio:error MSB8020

    状况如下: error MSB8020: The builds tools for v120 (Platform Toolset = 'v120') cannot be found. To build ...

  4. MySQL 5.7.16 zip包配置

    截止2016/10/16 最新版本Mysql为5.7.16,之前写过一篇APMW搭建的文章(传送门:http://www.cnblogs.com/airoot/p/4131906.html)里面介绍的 ...

  5. dp之完全背包poj3181(高精度背包)

    这个题目要用到大数的加法,其他的,我没有感觉到有什么难想的......比较水的背包题,掠过..... #include<iostream> #include<stdio.h> ...

  6. session监听器HttpSessionBindingListener

    首先我在网上查了一下session的真正销毁条件: 1调用 session.invalidate();方法 2 session到了设置或者默认的超时时间,自动销毁(关闭浏览器此session还未销毁, ...

  7. RIP动态路由的配置

    RIP其实相对比会比静态路由会简单的多,只需要使用rip命令添加邻居的网络号即可. 命令: Router(config)#ip route rip Router(config-router)#netw ...

  8. ftok函数例子

    #include <stdio.h>#include <sys/types.h>#include <sys/ipc.h>int main( void ){ int ...

  9. VB.NET &amp; 策略模式(下机用户类型选择)

    上篇文章讲述了对于下机操作和基本数据设定的时间联系,今天主要就是应用"策略模式"来了解了解对于固定用户,以及暂时用户之间的选择,看学习设计模式的时候自己对于策略模式的理解,我们能够 ...

  10. C#连接手机安装软件和发送信息

    今天突然想到怎么用winform程序连接自己的安卓手机,然后做发送短信的操作,查了很多资料 发现用ADB.exe 这个安卓自带的调试库 可以实现挺多功能的 前提是你自己手机已经和你电脑连接成功过,就是 ...