Sass的使用

SASS更强大和更稳定,可提供强大基本语言使用来扩展CSS。可以以三种不同的方式使用SASS:
  • 作为一个命令行工具
  • 作为一个Ruby模块
  • 作为一个插件机架启用框架

如果您在Windows上使用SASS,那么需要先安装Ruby。有关安装Ruby的更多信息,参考SASS安装 章节。

下表显示了用于执行SASS代码的命令:
S.N.
命令和说明
1 sass input.scss output.css
用来运行命令行SASS代码
2 sass --watch input.scss:output.css
它通知SASS监视文件,每当SASS文件更改时更新CSS
3 sass --watch app/sass:public/stylesheets
它用于监视整个目录,如果SASS包含在目录中许多文件

Rack/Rails/Merb插件

机架(Rack)是用于开发Web应用程序在Ruby中的Web服务器界面。有关机架的信息,访问该链接:这里 。

在Rails3版本可以使用config文件夹environment.rb文件。启用Rails的3SASS使用下面命令行:
config.gem "sass"
您可以使用以下行为Rails 3的Gemfile(及以上版本),如:
gem "sass"
Rails是使用Web标准,如用于的JSON,HTML,CSS和JavaScript到用户界面的一个开源Web框架。要使用Rails来工作,需要有Ruby的基本知识和面向对象编程。
如果要启用机架应用SASS,添加以下行到config.ru文件,该文件存在于应用程序的根目录下:
require 'sass/plugin/rack'
use Sass::Plugin::Rack
Merb是一个Web应用程序框架,它提供速度和模块化到Rails。
可以通过添加下面一行到 config/dependencies.rb 文件中,使 SASS 在 Merb 中启用:
dependency "merb-haml"

缓存

SASS缓存文件,如模板和泛音可以在不分析它们,除非它们已更改被重用。当模板被分成全都导入到一个大文件单独的文件这使得SASS文件编译更快,工作得甚至更好。如果删除缓存文件,它们下一次生成时将被重新编译。

选项

可以使用以下行在 environment.rb 或文件 config.ru 文件设置的 RailsRack 应用的选项:
Sass::Plugin.options[:style] = :compact
还可以通过使用下面一行设置Merb的init.rb文件选项:
Merb::Plugin.config[:sass][:style] = :compact
有在如下表所述可用SASS和SCSS一些选项:
S.N.
选项和说明
1 :style
显示输出的样式
2 :syntax
可以使用缩进语法SASS和CSS扩展语法
3 :property_syntax
属性使用缩进语法。如果它不正确,那么就会抛出一个错误。例如,考虑“background: #F5F5F5”,这里是一个属性名是background,而#F5F5F5是它的属性值。在属性名后,必须使用冒号。
4 :cache
加快了SASS文件的编译。它默认设置为true
5 :read_cache
只读SASS文件,如果缓存中没有设置和 read_cache 设置
6 :cache_store
可以被用来存储和通过将其设置到 Sass::CacheStores::Base 实例相应访问高速缓存的结果
7 :never_update
不应该更新CSS文件,如果模板文件的变化。默认情况下它设置为 false
8 :always_update
每当模板文件有变化它会更新CSS文件
9 :always_check
应检查每当服务器启动更新。它将重新编译并覆盖 CSS 文件,如果在 SASS 模板文件的更新
10 :poll
采用后端Sass::Plugin::Compiler#watch(模板和CSS文件更新)将其设置为true。
11 :full_exception
显示每当一个例外SASS代码生成 CSS 文件的错误描述。它显示发生源代码 CSS 文件的错误行号
12 :template_location
提供了应用程序的模板目录的路径
13 :css_location
提供了在应用程序中的CSS样式表的路径
14 :unix_newlines
通过将其设置为 true,写入文件时提供 Unix 样式的换行符
15 :filename
正在显示和用于报告错误的文件名的名称
16 :line
指定SASS模板的第一线和显示错误的行号
17 :load_paths
使用@import加载被包括指令的路径SASS模板
18 :filesystem_importer
它是用来导入从Sass::Importers::Basesub类来处理字符串加载路径文件系统中的文件
19 :sourcemap
产生指示浏览器找到SASS样式源代码映射。它使用三个值:
  • :auto包含相对URI。如果没有相对的URI,那么使用“file:”URI

  • :file使用“file:”在本地工作,而不是远程服务器上的URI

  • :inline包含在用于sourcemap源文本创建大sourcemap文件

20 :line_numbers
显示了通过将其设置为true来报告在CSS文件中的错误行号
21 :trace_selectors
当它被设置为true,它有助于追踪导入和混入选择器
22 :debug_info
它提供SASS文件的使用的行号和文件当它的调试信息被设置为true
23 :custom
在不同的应用程序提供数据给SASS函数
24 :quiet
通过将其设置为true,禁用警告

语法选择

您可以决定SASS模板,所使用的语法是使用SASS命令行工具。通过默认SASS使用缩进语法,这是一种替代基于SCSS的CSS语法。可以使用SCSS命令行程序,它类似于SASS程序,但默认情况下使用SCSS语法

编码

SASS使用样式表的字符编码通过指定以下CSS规范:
  • 首先,它会检查Unicode字节,接下来@charset声明,再进行Ruby字符串编码
  • 接下来如果没有设置,则认为字符编码为UTF-8
  • 通过使用@charset声明明确字符编码。只要使用“@charset编码名称”的样式表开磁,SASS将认为这是按给定字符编码。
  • 如果SASS输出文件中包含非ASCII字符,那么它将使用@charset 声明。

上一篇: Sass语法 下一篇: Sass嵌套规则