Sass (Syntactically Awesome StyleSheets)
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)的更多相关文章
- Sass(Syntactically Awesome Stylesheets)——概述(待续)
官网地址:http://sass.bootcss.com/ Sass(Syntactically Awesome Stylesheets) Sass 是成熟.稳定.强大的 CSS 扩展语言. 特征 兼 ...
- sass/scss 和 less的区别
一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...
- Sass与Web组件化相关的功能
Sass https://en.wikipedia.org/wiki/Sass_(stylesheet_language) Sass (Syntactically Awesome Stylesheet ...
- [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 ...
- sass 使用入门教程
我们都知道,css没有变量,也没有条件语句,在开发过程中,难免有些麻烦,因此有了CSS预处理器(css preprocessor),Sass便是其中之一. 一.什么是Sass Sass (Syntac ...
- 动态样式语言Sass&Less介绍与区别
一. Sass/Scss&Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写, ...
- SASS简介及使用方法
一.什么是Sass Sass (Syntactically Awesome StyleSheets)是css的一个扩展开发工具,它允许你使用变量.条件语句等,使开发更简单可维护.这里是官方文档. 二. ...
- [转]SCSS 和 SASS 和 HAML 和CoffeeScript
Asset Pipeline 提供了内建直接使用 Sass 撰写 CSS 的功能. 你也许会生出这样的疑惑:什么是 Sass? Why should I care? Sass (Syntactical ...
- 常用css框架 Sass/Less
Bootstrap less/sass Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量.嵌 ...
随机推荐
- 使用digitalocean搭建v·p·s
这几天digitalocean开始猛卡,一顿操作之后连不上了=_=遂复习了一下怎么搭vps 准备工作 事先准备好Putty,直接百度搜索下载即可(也可直接使用digitalocean的access c ...
- CXAnimation类
#include "XAnimation.h" CXAnimation::CXAnimation(void) { m_strName = ""; m_nFram ...
- iPhone4 降级6.12教程 无须SHSH 不装插件 不睡死[转载] by 轻鸢
无shsh降级电脑系统,细节操作等其它影响因素较多,不确保每个人都能成功,楼主发帖前刷机几十次均成功.步骤有些繁琐,按照步骤每一步都正确可保证最后不睡死 注意一下,无SHSH降级都是不完美的,开机需要 ...
- Handler实例
Handler使用例1这个例子是最简单的介绍handler使用的,是将handler绑定到它所建立的线程中.本次实验完成的功能是:单击Start按钮,程序会开始启动线程,并且线程程序完成后延时1s会继 ...
- 裸的lcs
最长公共子串,裸的复杂度N^2 #include<bits/stdc++.h> using namespace std; ][]; int main() { ]; ]; scanf(&qu ...
- Cookie、Session详解
讲解的很全面 https://www.cnblogs.com/andy-zhou/p/5360107.html
- linux进程同步机制_转
转自:Linux进程同步机制 具体应用可参考:线程同步 IPC之信号量 为了能够有效的控制多个进程之间的沟通过程,保证沟通过程的有序和和谐,OS必须提供一 定的同步机制保证进程之间不会自说 ...
- 由于内部错误,服务器无法处理该请求。有关该错误的详细信息,请打开服务器上的 IncludeExceptionDetailInFaults (从 ServiceBehaviorAttribute 或从 <serviceDebug> 配置行为)以便将异常信息发送回客户端,或打开对每个 Microsoft .NET Framework SDK 文档的跟踪并检查服务器跟踪日志。
客户端调用WCF的时候报上面的错误,WCF只能序列化基础的数据类型,不能直接序列化SqlParameter类型,需要使用自定义类,然后在WCF服务端转换的方式解决: 自定义类代码如下: using S ...
- windows下端口占用解决方法-查看和杀死占用端口进程
在Windows下启动程序时有时会遇到端口被占用的情况,由于一个端口同时只能运行一个进程,所以要想启动新的程序就要先把占用该端口的进程给kill掉,具体的命令分为以下三步, 以杀死占用了80端口的进程 ...
- 标签响应javascript的href处理[转载]
为了给一个<a />标签绑定javascript,但又不让它跳转链接,大家习惯上用的都是 <a href="javascript:;" onclick=" ...