📅  最后修改于: 2020-10-20 05:40:07             🧑  作者: Mango
SASS更加强大和稳定,它通过使用CSS扩展为基本语言提供了强大的功能。您可以通过三种不同的方式使用SASS-
如果在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. |
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
如下表所述, SASS和SCSS提供了一些选项-
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 −
|
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声明。