使用 Sass

🌙
手机阅读
本文目录结构

SASS是更强大和稳定,通过使用CSS的扩展提供基本语言的力量。您可以使用三种不同的方式使用SASS:

  • 作为命令行工具

  • 作为一个Ruby模块

  • 作为Rack启用框架的插件

如果您在Windows上使用SASS,则需要先安装 Ruby 。 有关安装Ruby的更多信息,请参阅 SASS安装一章。

下表显示了用于执行SASS代码的命令:

序号 命令和描述
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。使用以下行为Rails 3启用SASS:

config.gem "sass"

您可以使用以下行到Rails 3(和以上版本)的Gemfile,如下所示:

gem "sass"

Rails 是一个开放源代码的Web框架,它使用JSON,HTML,CSS和JavaScript等Web标准来显示用户界面。 要使用Rails,您需要具有Ruby和面向对象编程的基本知识。

如果您要在 Rack 应用程序中启用SASS,请将以下行添加到应用程序根目录中的 config.ru 文件中:

require 'sass/plugin/rack'
use Sass::Plugin::Rack

Merb 是一个Web应用程序框架,可为Rails提供速度和模块化。 要了解有关Merb的更多信息;

您可以在 Merb 中启用SASS,方法是在 config / dependencies.rb 文件中添加以下行:

dependency "merb-haml"

缓存

SASS缓存诸如模板和分支的文档,可以重用它们而不解析它们,除非它们已经改变。它使得SASS文件的编译更快,并且当模板被分割成单独的文件并且被导入到一个大文件中时,工作更好。如果您删除缓存的文件,它们将在下次编译时再次生成。

选项

您可以在Rack应用程序的Rails或 config.ru 文件的 environment.rb 文件中设置选项,方法如下:

Sass::Plugin.options[:style] = :compact

您还可以使用以下行在Merb的 init.rb 文件中设置选项:

Merb::Plugin.config[:sass][:style] = :compact

有一些选项可用于 SASSSCSS ,如下表所述:

序号 选项和描述
1 :style
它显示输出的样式。
2 :语法
您可以为 sass 使用缩进语法,并为 scss 使用CSS扩展语法。
3 :property_syntax
它使用缩进语法来使用属性。 如果它不正确,那么它会抛出一个错误。 例如,考虑“background:#F5F5F5",其中背景是属性名称,#F5F5F5 是其属性值。 您必须在属性名称后面使用冒号。
4 :缓存
它加速了SASS文件的编译。 默认情况下,它设置为true。
5 :read_cache
如果未设置 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 :poll
它通过将 Sass :: Plugin :: Compiler#watch(监视模板和CSS文件的更新)的轮询后端设置为true来使用轮询后端。
11 :full_exception
每当在生成的CSS文件中的SASS代码中发生异常时,它显示错误描述。 它在CSS文件中显示与源一起发生错误的行号。
12 :template_location
它提供了应用程序中模板目录的路径。
13 :css_location
它提供了应用程序中CSS样式表的路径。
14 :unix_newlines
当通过将文件设置为true来编写文件时,它提供Unix样式换行符。
15 :filename
它是显示的文件名,用于报告错误。
16 :行
它指定SASS模板的第一行并显示错误的行号。
17 :load_paths
它用于加载使用 @import 指令包含的SASS模板的路径。
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
它提供SASS文件的调试信息使用行号和文件时,它设置为true。
23 :custom
它使数据可用于单独应用程序中的SASS函数。
24 :quiet
它通过将警告设置为true来禁用警告。

语法选择

您可以使用SASS命令行工具确定您在SASS模板中使用的语法。默认情况下,SASS使缩进语法,它是基于CSS的SCSS语法的替代。您可以使用类似于SASS程序的SCSS命令行程序,但默认情况下它认为语法是SCSS。

编码

SASS通过指定以下CSS规范使用样式表的字符编码:

  • 首先它检查Unicode字节,下一个@charset声明,然后检查Ruby字符串编码。
  • 接下来如果没有设置,则认为字符集编码为UTF-8。
  • 通过使用@charset声明明确地确定字符编码。只需在样式表的开头使用“@charset encoding name”,SASS将假设这是给定的字符编码。
  • 如果SASS的输出文件包含非ASCII字符,那么它将使用@charset声明。

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了