SASS更强大,更稳定,通过使用CSS扩展为基本语言提供动力.你可以用三种不同的方式使用SASS :
作为命令行工具
As一个Ruby模块
作为Rack启用框架的插件
如果你在Windows上使用SASS,那么你需要先安装 Ruby .有关安装Ruby的更多信息,请参阅 SASS安装章节.
下表显示命令,用于执行SASS代码 :
S上.不. | 命令&描述 |
---|---|
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应用程序.有关Rack的信息.
您可以使用 config 文件夹下的 environment.rb 文件在 Rails 3 版本中启用SASS.使用以下代码启用RASS 3的SASS;
config.gem"sass"
您可以将以下行用于Rails 3(及以上版本)的Gemfile,为 :
gem"sass"
Rails 是一个开源Web框架,它使用Web标准,如JSON,HTML,CSS和用于显示用户界面的JavaScript.要使用Rails,您需要具备Ruby和面向对象编程的基本知识.
如果要在机架应用程序中启用SASS,请将以下行添加到 config.ru 文件中,该文件存在于应用程序的根目录中 :
require 'sass/plugin/rack'use Sass::Plugin::Rack
Merb 是一个Web应用程序框架,它为Rails提供了速度和模块化.
您可以通过将以下行添加到 config/dependencies.rb 文件中来启用 Merb 中的SASS ;
dependency "merb-haml"
缓存
SASS缓存模板和局部文件等文件,除非更改,否则可以重复使用而无需解析它们.它可以更快地编译SASS文件,并且当模板被分成单独的文件时可以更好地工作,这些文件都被导入到一个大文件中.如果删除缓存文件,下次编译时将再次生成它们.
选项
您可以在中设置选项通过使用以下行 : Rails的环境.rb 文件或 config.ru 文件.
Sass :: Plugin.options [:style] =:compact
您还可以在 init.rb 使用以下行 : 号的Merb文件;
Merb :: Plugin.config [:sass] [:style] =:compact
SASS 和 SCSS 有一些选项,如下表所示 :
S.不. | 选项&描述 |
---|---|
1 | :style 显示输出样式. |
2 | :语法 您可以为 sass 使用缩进语法,为使用CSS扩展语法scss . |
3 | :property_syntax 它使用缩进语法利用财产.如果不正确,则会抛出错误.例如,考虑"background:#F5F5F5",其中 background 是属性名称,#F5F5F5 是其属性值.您必须在属性名称后面使用冒号. |
4 | :缓存 它的速度编译SASS文件.默认设置为true. |
5 | :read_cache 它只读如果未设置缓存且设置了 read_cache ,则为SASS文件. |
6 | :cache_store 它可用于存储和访问缓存结果,方法是将其设置为 Sass :: CacheStores :: Base 的实例. |
7 | :never_update 如果模板文件发生变化,它永远不会更新CSS文件.默认情况下,它设置为false. |
8 | :always_update 它应该更新模板文件发生变化时的CSS文件. |
9 | :always_check 它应该每当服务器启动时检查更新.如果SASS模板文件中有更新,它将重新编译并覆盖CSS文件. |
10 | :民意调查 它通过将 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模板的路径i>指令. |
18 | :filesystem_importer 它用于从中导入文件文件系统使用 Sass :: Importers :: Base 子类来处理字符串加载路径. |
19 | :sourcemap 它会生成源地图,指示浏览器查找SASS样式.它使用三个值 :
|
20 | :line_numbers 它显示CSS文件中报告的错误的行号,方法是将其设置为true. |
21 | :trace_selectors 当它被设置为true时,它有助于跟踪导入和混合的选择器. |
22 | :debug_info 当设置为true时,它使用行号和文件提供SASS文件的调试信息. |
23 | :自定义 它使数据可用于S ASS在单独的应用程序中起作用. |
24 | :安静 它会禁用警告通过将其设置为true. |
语法选择
您可以使用SASS命令行工具确定在SASS模板中使用的语法.默认情况下,SASS使用缩进语法,这是基于CSS的SCSS语法的替代方法.您可以使用SCSS命令行程序,它类似于SASS程序,但默认情况下,它将语法视为SCSS.
编码
SASS使用样式表的字符编码,通过指定以下CSS规范 :
首先,它检查Unicode byte,next @chaetet 声明然后是Ruby字符串编码.
接下来,如果没有设置,则认为charset编码为 UTF-8 .
使用 @charset 声明明确确定字符编码.只需在样式表的开头使用"@charset编码名称",SASS就会假定这是给定的字符编码.
如果SASS的输出文件包含非ASCII字符,然后它将使用 @charset 声明.