搜索
首页web前端html教程使用 Sass (Using Sass)-插件,缓存,配置选项,语法选择及编码格式_html/css_WEB-ITnose

翻译自官方文档: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass

Sass 有三种使用方式:作为命令行工具,作为独立的 Ruby 模块 (Ruby module),或者作为 Rack-enabled 框架的插件,包括 Ruby on Rails 与 Merb。无论使用哪种方式都需要首先安装 Sass gem :

gem install sass

如果你使用的是Windows ,你可能首先需要 安装Ruby。

如果要在命令行中运行 Sass ,只要使用

sass input.scss output.css

你还可以使用Sass命令来监视某个Sass文件的改动,并自动编译来更新 CSS :

sass --watch input.scss:output.css

如果你的目录里有很多 Sass 文件,你也可以使用Sass命令来监视整个目录:

sass --watch app/sass:public/stylesheets

使用 sass --help可以列出完整的帮助文档。

在 Ruby 中使用 Sass 也非常容易,Sass gem 安装完毕后,用它运行 require "sass", 然后按照下面的方法使用 Sass::Engine:

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)engine.render #=> "#main { background-color: #0000ff; }\n"

Rack/Rails/Merb 插件(Plugin)

在 Rails 3 之前的版本中启用 Sass,需要在 environment.rb 文件中添加一行代码:

config.gem "sass"

对于 Rails 3,则是把这一行加到 Gemfile 中:

gem "sass"

要在 Merb 中启用 Sass,需要在 config/dependencies.rb文件中添加一行代码:

dependency "merb-haml"

在 Rack 应用中启用 Sass,需要在 config.ru文件中添加以下代码:

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

Sass 样式表跟视图(views)的工作方式不同。 它不包含任何动态内容, 因此只需要在 Sass 文件更新时生成 CSS 即可。 默认情况下, .sass和 .scss文件是放在 public/stylesheets/sass 目录下的(这可以通过选项进行配置)。 然后,在需要的时候,它们会被编译成相应的 CSS 文件并被放到 public/stylesheets 目录下。 例如,public/stylesheets/sass/main.scss 文件将会被编译为 public/stylesheets/main.css 文件。

缓存 (Caching)

默认情况下,Sass 会自动缓存编译后的模板(template)与,这样做能够显著提升重新编译的速度,在处理 Sass 模板被切割为多个文件并通过导入,形成一个大文件时效果尤其显著。

如果不使用框架的情况下,Sass 将会把缓存的模板放入 .sass-cache目录。 在 Rails 和 Merb 中,缓存的模板将被放到 tmp/sass-cache目录。 此目录可以通过选项进行自定义。 如果你不希望 Sass 启用缓存功能, 可以将选项设置为 false。

配置选项 (Options)

选项可以通过设置的 Sass::Plugin#optionshash,具体设置在Rails中的 environment.rb或者Rack中的 config.ru的文件中:

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

或者,如果你使用Merb,那么可以在 init.rb文件中设置 Merb::Plugin.config[:sass]hash :

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

或者通过传递一个选项 (options) hash 给 Sass::Engine#initialize,

所有相关的选项也可通过标记在 sass和 scss命令行可执行文件中使用。可用选项有:

选项 描述
:style 设置输出CSS的代码风格,可以查看。
:syntax 输入文件的语法, :sass表示缩进语法, :scss表示CSS扩展语法。只有在你自己构造 Sass::Engine实例的情况下有用;当你使用 Sass::Plugin时,它会自动设置正确的值。默认设置为 :sass。
:property_syntax 强制缩进语法文档使用一个属性语法。如果不使用正确的语法,将抛出一个错误。 :new值表示强制在属性名后面使用一个冒号。例如: color: #0f3或者 width: $main_width。 :old值表示强制在属性名前面使用一个冒号。例如: :color #0f3或者 :width $main_width。默认请客下,两种语法都是有效的。该选项对于SCSS( .scss)文档是无效的。
:cache 解析 Sass 时是否应该缓存,允许更快的编译速度。默认设置为 true。
:read_cache 如果设置了这个选项,而没有设置 :cache选项,那么缓存存在就只读 Sass 缓存,如果没有没有缓存,那就不会编译。
:cache_store 如果该选项设置为 Sass::CacheStores::Base的子类的实例,该缓存存储将被用于存储和检索缓存编译结果。默认设置为 Sass::CacheStores::Filesystem,初始化使用。
:never_update CSS文件永远不应该被更新,即使是模板(template)文件改变。将其设置为 true可能会带来小的性能提升。它总是默认为 false。该选项只有在Rack,Ruby on Rails,或Merb中有意义。
:always_update CSS文件总是应该进行更新,即使是在每一个控制器被访问时,而不是只当模板被修改时更新。默认为 false。该选项只有在Rack,Ruby on Rails,或Merb中有意义。
:always_check Sass模板总是应该被检查是否更新,即使是在每一个控制器被访问时,而不是只在服务启动时。如果一个Sass模板(template)被更新,它会被重新编译并且覆盖相应的CSS文件。在生产模式中默认为 false,否则 true。该选项只有在Rack,Ruby on Rails,或Merb中有意义。
:poll 如果为 true,始终使用 Sass::Plugin::Compiler#watch后端轮询而不是本机文件系统的后端。
:full_exception Sass代码中错误是否应该在生成的CSS文件中提供详细的说明。如果设置为 true,这个错误将显示在CSS文件的注释中 和页面顶部(支持的浏览器),错误内容包括行号和源代码片段。 否则,异常将在Ruby代码中提醒。在生产模式中默认为 false,否则 true。
:template_location 一个路径,应用根目录中Sass模板(template)的目录。如果散列, :css_location将被忽略,并且这个选项指定输入和输出目录之间的映射。也可以给定二元列表,代替散列(hash)。默认为 css_location + "/sass"。该选项只有在Rack,Ruby on Rails,或Merb中有意义。请注意,如果指定了多个模板位置,它们全部都放置在导入路径中,允许你在它们之间进行导入。

需要注意的是,由于它可以采用许多可能的格式,这个选项应该只直接设置,不应该被访问或修改。使用 Sass::Plugin#template_location_array,

Sass::Plugin#add_template_location,

Sass::Plugin#remove_template_location方法来代替。

:css_location CSS文件输出的路径,当 :template_location选项为一个散列(hash)时,这个选项将被忽略。默认设置为 "./public/stylesheets"。该选项只有在Rack,Ruby on Rails,或Merb中有意义。
:cache_location 其中,高速缓存 sassc文件应写入的路径。在Rails和Merb中默认为 "./tmp/sass-cache",否则默认为 "./.sass-cache"。如果设置了,这个将被忽略。
:unix_newlines 如果为true,写入文件时使用Unix风格的换行符。只有在Windows上,并且只有当Sass被写入文件时有意义(在 Rack, Rails, 或 Merb中,直接使用 Sass::Plugin时,或者使用命令行可执行文件时)。
:filename 被渲染文件的文件名。这完全是用于报告错误,使用Rack, Rails, or Merb时自动设置。
:line Sass模板(template)第一行的行号。用于报告错误的行号。如果Sass模板(template)嵌入一个Ruby文件中,这个设置是很有用的。
:load_paths 一个数组,包含文件系统 或 通过指令导入的 Sass模板(template)路径。他们可能是字符串, Pathname(路径名)对象或者是 Sass::Importers::Base的子类。该选项默认为工作目录,并且在Rack, Rails, 或 Merb中,该选项无论如何值都是 :template_location。加载路径也可以由 Sass.load_paths和 SASS_PATH环境变量通知。
:filesystem_importer 一个 Sass::Importers::Base的子类,用来处理普通字符串的加载路径。这应该从文件系统导入文件。这应该是一个通过构造函数带一个字符串参数(加载路径),继承自 Sass::Importers::Base的Class对象。默认为 Sass::Importers::Filesystem。
:sourcemap 控制如何生产sourcemap。这些sourcemaps告诉浏览器如何找到Sass样式,从而生成每一个CSS样式。该选项有三个有效值: :auto 在可能的情况下使用相对URI,假设在你使用的任何服务器上提供的源样式,那么它们的相对位置将和本地文件系统是相同的。如果一个相对URI不可用,那么将被”file:”替换。 :file 总是使用”file:” URI,这将在本地工作,但不能被部署到一个远程服务器。 :inline 包含sourcemap中完整的源文本,这是最方便的,但是可能生产非常大的sourcemap文件。 最后, :none 会导致总是不会生成sourcemap文件。
:line_numbers 当设置为 true的时候,定义的选择器的行号和文件名 将被作为注释注入到编译的CSS中。这对调试来说是有用的,特别是使用和的时候。这个选项有个别名叫做 :line_comments。当使用 :compressed输出样式或使用 :debug_info/ :trace_selectors选项时这个选项将自动禁用。
:trace_selectors 当设置为 true的时候,将在每个选择器之前注入和的完整轨迹。在浏览器中调试通过和包含进来的样式表时是很有用的。此选项将取代 :line_comments选项,并且被 :debug_info选项取代。当使用 :compressed输出样式时,这个选项将自动禁用。
:debug_info 当设置为 true的时候,定义的选择器的行号和文件名 将被注入到编译后的CSS中,可以被浏览器所识别。用于 FireSass Firebug 扩展,以显示Sass文件名和行号。当使用 :compressed输出样式时,这个选项将自动禁用。
:custom 这个选项可用于单个应用程序设置以使数据可用于 定制Sass功能。
:quiet 当设置为 true的时候,导致禁用警告信息。

语法选择(Syntax Selection)

Sass命令行工具将使用文件扩展名以确定你使用的是哪种语法,但并不总是一个文件名。 sass命令行程序默认为缩进语法,但如果输入应该被解析为SCSS语法,你可以传递 --scss选项给她。此外,你可以使用 scss命令行程序,它和 sass程序完全一样,但是他的默认语法为SCSS。

编码格式 (Encodings)

在 Ruby 1.9 及以上环境中运行 Sass 时,Sass 对文件的编码格式比较敏感,首先会根据 CSS spec判断样式文件的编码格式, 如果失败则检测 Ruby 字符串编码。也就是说,Sass 首先检查 Unicode 字节顺序标记,然后是 @charset声明,最后是 Ruby 字符串编码,假如都没有检测到,默认使用 UTF-8 编码。

要明确指定样式表的编码,与 CSS 相同,使用 @charset声明。在样式文件的起始位置(前面没有任何空白与注释)插入 @charset "encoding-name";, Sass 将会按照给定的编码格式编译文件。注意,无论你使用哪种编码,它必须可以转换为 Unicode 字符集。

默认情况下,Sass 总会以UTF-8编码输出 CSS 文件。当且仅当输出文件包含非ASCII字符时,才会在输出文件中添加 @charset声明,在压缩模式中,而在压缩模式下 (compressed mode) 使用 UTF-8字节顺序标记代替 @charset 声明语句。

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
如何修复 Outlook 中缺少的 Microsoft Teams 插件如何修复 Outlook 中缺少的 Microsoft Teams 插件May 11, 2023 am 11:01 AM

团队在Outlook中有一个非常有用的加载项,当您在使用Outlook2013或更高版本的应用程序时安装以前的应用程序时,它会自动安装。安装这两个应用程序后,只需打开Outlook,您就可以找到预装的加载项。但是,一些用户报告了在Outlook中找不到Team插件的异常情况。修复1–重新注册DLL文件有时需要重新注册特定的Teams加载项dll文件。第1步-找到MICROSOFT.TEAMS.ADDINLOADER.DLL文件1.首先,您必须确保

如何在 Windows 10 中清除地址解析协议 (ARP) 缓存如何在 Windows 10 中清除地址解析协议 (ARP) 缓存Apr 13, 2023 pm 07:43 PM

地址解析协议 (ARP) 用于将 MAC 地址映射到 IP 地址。网络上的所有主机都有自己的 IP 地址,但网络接口卡 (NIC) 将有 MAC 地址而不是 IP 地址。ARP 是用于将 IP 地址与 MAC 地址相关联的协议。所有这些条目都被收集并放置在 ARP 缓存中。映射的地址存储在缓存中,它们通常不会造成任何损害。但是,如果条目不正确或 ARP 缓存损坏,则会出现连接问题、加载问题或错误。因此,您需要清除 ARP 缓存并修复错误。在本文中,我们将研究如何清除 ARP 缓存的不同方法。方法

0x80070246 Windows更新错误:6修复方法0x80070246 Windows更新错误:6修复方法May 20, 2023 pm 06:28 PM

根据几位Windows10和Windows11用户的说法,他们在尝试安装Windows更新时遇到了错误0x80070246。此错误阻止他们升级PC并享受最新功能。值得庆幸的是,在本指南中,我们列出了一些最佳解决方案,可帮助您解决Windows0PC上80070246x11的Windows更新安装错误。我们还将首先讨论可能引发问题的原因。让我们直接进入它。为什么我会收到Windows更新安装错误0x80070246?您可能有多种原因导致您在PC上收到Windows11安装错误0x80070246。

如何在Mac上清除图标缓存?如何在Mac上清除图标缓存?Apr 22, 2023 pm 07:49 PM

如何在Mac上清除和重置图标缓存警告:因为您将使用终端和rm命令,所以在继续执行任何操作之前,最好使用TimeMachine或您选择的备份方法备份您的Mac。输入错误的命令可能会导致永久性数据丢失,因此请务必使用准确的语法。如果您对命令行不满意,最好完全避免这种情况。启动终端并输入以下命令并按回车键:sudorm-rfv/Library/Caches/com.apple.iconservices.store接下来,输入以下命令并按回车键:sudofind/private/var

如何修复 Microsoft Teams 错误代码 caa70004 问题如何修复 Microsoft Teams 错误代码 caa70004 问题Apr 14, 2023 am 09:25 AM

尝试在其设备上启动 Microsoft Teams 桌面客户端的用户在空白应用页面中报告了错误代码 caa70004。错误代码说:“我们很抱歉——我们遇到了问题。”以及重新启动 Microsoft Teams 以解决问题的选项。您可以尝试实施许多解决方案并再次加入会议。解决方法——1. 您应该尝试的第一件事是重新启动 Teams 应用程序。只需在错误页面上点击“重新启动”即可。

如何在 Windows 11上显示所有缓存的 DNS 条目如何在 Windows 11上显示所有缓存的 DNS 条目May 21, 2023 pm 01:01 PM

Windows操作系统使用缓存来存储DNS条目。DNS(域名系统)是用于通信的互联网核心技术。特别是用于查找域名的IP地址。当用户在浏览器中键入域名时,加载站点时执行的首要任务之一是查找其IP地址。该过程需要访问DNS服务器。通常,互联网服务提供商的DNS服务器会自动使用,但管理员可能会切换到其他DNS服务器,因为这些服务器可能更快或提供更好的隐私。如果DNS用于阻止对某些站点的访问,则切换DNS提供商也可能有助于绕过Internet审查。Windows使用DNS解

如何在 Windows 11 上清理缓存:详细的带图片教程如何在 Windows 11 上清理缓存:详细的带图片教程Apr 24, 2023 pm 09:37 PM

什么是缓存?缓存(发音为ka·shay)是一种专门的高速硬件或软件组件,用于存储经常请求的数据和指令,这些数据和指令又可用于更快地加载网站、应用程序、服务和系统的其他部分。缓存使最常访问的数据随时可用。缓存文件与缓存内存不同。缓存文件是指经常需要的文件,如PNG、图标、徽标、着色器等,多个程序可能需要这些文件。这些文件存储在您的物理驱动器空间中,通常是隐藏的。另一方面,高速缓存内存是一种比主内存和/或RAM更快的内存类型。它极大地减少了数据访问时间,因为与RAM相比,它更靠近CPU并且速度

vue的缓存有几种实现方式vue的缓存有几种实现方式Dec 22, 2021 pm 06:00 PM

vue缓存数据有4种方式:1、利用localStorage,语法“localStorage.setItem(key,value)”;2、利用sessionStorage,语法“sessionStorage.setItem(key,value)”;3、安装并引用storage.js插件,利用该插件进行缓存;4、利用vuex,它是一个专为Vue.js应用程序开发的状态管理模式。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中