📜  使用Sass

📅  最后修改于: 2020-10-20 05:40:07             🧑  作者: Mango


SASS更加强大和稳定,它通过使用CSS扩展为基本语言提供了强大的功能。您可以通过三种不同的方式使用SASS-

  • 作为命令行工具
  • 作为Ruby模块
  • 作为Rack enable Framework的插件

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

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

S. No. Command & Description
1

sass input.scss output.css

It is used to run the SASS code from the command line.

2

sass –watch input.scss:output.css

It informs SASS to watch the file and update the CSS whenever SASS file changes.

3

sass –watch app/sass:public/stylesheets

It is used to watch the entire directory, if SASS contains many files in a directory.

机架/栏杆/ Merb插件

Rack是一个Web服务器界面,用于在Ruby中开发Web应用程序。有关机架的信息,请访问此链接

您可以使用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和面向对象编程的基础知识。在此处了解有关Rails框架的更多信息。

如果您想在机架应用程序中启用SASS,请将以下行添加到config.ru文件中,该文件位于应用程序的根目录中-

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

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

您可以通过在config / dependencies.rb文件中添加以下行来在Merb中启用SASS:

dependency "merb-haml"

快取

SASS缓存文档,例如模板和部分文档,除非已更改,否则无需解析它们就可以重用它们。当模板分为单独的文件时,它可以更快地编译SASS文件,甚至可以更好地工作,这些文件均被导入一个大文件中。如果删除缓存的文件,则下次编译时将再次生成它们。

选件

您可以使用以下行在Rails的environment.rb文件或Rack应用程序的config.ru文件中设置选项-

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

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

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

如下表所述, SASSSCSS提供了一些选项-

S. No. Option & Description
1

:style

It displays style of the output.

2

:syntax

You can use indented syntax for sass and CSS extension syntax for scss.

3

:property_syntax

It uses indented syntax to make use of properties. If it is not correct, then it will throw an error. For instance, consider “background: #F5F5F5” in which background is a property name and #F5F5F5 is its property value. You must use colon after the property name.

4

:cache

It speeds up compilation of SASS files. It is set to true by default.

5

:read_cache

It read only SASS files if cache is not set and read_cache is set.

6

:cache_store

It can be used to store and access the cached result by setting it to an instance of Sass::CacheStores::Base.

7

:never_update

It should never update the CSS file if the template files changes. By default it is set to false.

8

:always_update

It should update the CSS file whenever the template files changes.

9

:always_check

It should check for the updates whenever the server starts. It will recompile and overwrite the CSS file, if there is an update in the SASS template file.

10

:poll

It uses polling backend for Sass::Plugin::Compiler#watch (which watches the template and updation of CSS files) by setting it to true.

11

:full_exception

It displays the error description whenever an exception occurs in SASS code within generated CSS file. It displays a line number where an error occurred along with source in the CSS file.

12

:template_location

It provides the path for the template directory in the application.

13

:css_location

It provides the path for the CSS stylesheets in the application.

14

:unix_newlines

It provides Unix style newlines when writing files by setting it to true.

15

:filename

It is name of the filename being displayed and used for reporting errors.

16

:line

It specifies the first line of the SASS template and displays the line numbers for errors.

17

:load_paths

It is used to load the paths for SASS template which are included using @import directive.

18

:filesystem_importer

It is used to import files from file system that uses Sass::Importers::Base sub class to handle string load paths.

19

:sourcemap

It generates source maps which instructs browser to find the SASS styles. It uses three values −

  • :auto − It contains relative URIs. If there is no relative URI, then uses “file:” URI.

  • :file − It uses “file:” URIs, which work locally, not on remote server.

  • :inline − It contains source text in the source map which is used to create large source map files.

20

:line_numbers

It displays the line number for errors reported in the CSS file by setting it to true.

21

:trace_selectors

It helps to trace the selectors of imports and mixins when it is set to true.

22

:debug_info

It provides debug information of SASS file using line number and file when it is set to true.

23

:custom

It makes data available to SASS functions in the separate applications.

24

:quiet

It disables the warnings by setting it to true.

语法选择

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

编码方式

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

  • 首先,它检查Unicode字节,然后检查@charset声明,然后检查Ruby字符串编码。

  • 接下来,如果未设置任何内容,则它将字符集编码视为UTF-8

  • 通过使用@charset声明显式确定字符编码。只需在样式表的开头使用“ @charset编码名称”,SASS就会假定这是给定的字符编码。

  • 如果SASS的输出文件包含非ASCII字符,则它将使用@charset声明。