sass

最新推荐文章于 2024-10-15 20:45:55 发布

转载最新推荐文章于 2024-10-15 20:45:55 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lichun123/p/4948816.html

Sass是一种CSS扩展语言，增加了变量、嵌套规则等功能，使CSS更加强大、优雅。支持两种语法：SCSS和缩排语法。Sass兼容CSS3，有助于保持大型样式表结构良好。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Sass (Syntactically Awesome StyleSheets)

Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。它允许你使用变量、嵌套规则、 mixins、导入等众多功能，并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好，同时也让你能够快速开始小型项目，特别是在搭配 Compass 样式库一同使用时。

特色

完全兼容 CSS3
在 CSS 语言基础上添加了扩展功能，比如变量、嵌套 (nesting)、混合 (mixin)
对颜色和其它值进行操作的{Sass::Script::Functions 函数}
函数库控制指令之类的高级功能
良好的格式，可对输出格式进行定制
支持 Firebug

语法

Sass 有两种语法。第一种被称为 SCSS (Sassy CSS)，是一个 CSS3 语法的扩充版本，这份参考资料使用的就是此语法。也就是说，所有符合 CSS3 语法的样式表也都是具有相同语法意义的 SCSS 文件。另外，SCSS 理解大多数 CSS hacks 以及浏览器专属语法，例如IE 古老的 filter 语法。这种语种语法的样式表文件需要以 .scss 扩展名。

第二种比较老的语法成为缩排语法（或者就称为 "Sass"），提供了一种更简洁的 CSS 书写方式。它不使用花括号，而是通过缩排的方式来表达选择符的嵌套层级，I 而且也不使用分号，而是用换行符来分隔属性。很多人认为这种格式比 SCSS 更容易阅读，书写也更快速。缩排语法具有 Sass 的所有特色功能，虽然有些语法上稍有差异；这些差异在{file:INDENTED_SYNTAX.md 所排语法参考手册}中都有描述。使用此种语法的样式表文件需要以 .sass 作为扩展名。

任一语法都可以导入另一种语法撰写的文件中。只要使用 sass-convert 命令行工具，就可以将一种语法转换为另一种语法：

# 将 Sass 转换为 SCSS
$ sass-convert style.sass style.scss

# 将 SCSS 转换为 Sass
$ sass-convert style.scss style.sass

使用 Sass

Sass 有三种使用方式：命令行工具、独立的 Ruby 模块，以及包含 Ruby on Rails 和 Merb 作为支持 Rack 的框架的插件。所有这些方式的第一步都是安装 Sass gem：

gem install sass

如果你使用的是 Windows，就需要先安装 Ruby。

如果要在命令行中运行 Sass ,只要输入

sass input.scss output.css

你还可以命令 Sass 监视文件的改动并更新 CSS ：

sass --watch input.scss:output.css

如果你的目录里有很多 Sass 文件，你还可以命令 Sass 监视整个目录：

sass --watch app/sass:public/stylesheets

使用 sass --help 可以列出完整的帮助文档。

在 Ruby 代码中使用 Sass 是非常容易的。安装 Sass gem 之后，你可以执行 require "sass" ，然后就可以像这样使用 {Sass::Engine} ：

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)
engine.render #=> "#main { background-color: #0000ff; }\n"

转载于:https://www.cnblogs.com/lichun123/p/4948816.html