开发手册 欢迎您!
软件开发者资料库

使用Sass

使用Sass - 从简单和简单的步骤学习Sass,从基本到高级概念,包括概述,安装,语法,使用Sass,CSS扩展,评论,Sass脚本,@ -Rules和Directives,控制指令和表达式,Mixin指令,功能指令,输出样式,扩展Sass。

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样式.它使用三个值 :

  • :auto : 它包含相对URI.如果没有相对URI,则使用"file:"URI.

  • :file : 它使用"file:"URI,它在本地工作,而不是在远程服务器上工作.

  • :inline : 它包含源地图中的源文本,用于创建大型源地图文件.

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 声明.