使用 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 声明语句。

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

瀏覽器快取影片在哪個資料夾在日常使用網路瀏覽器時,我們經常會觀看各種線上視頻,例如在YouTube上看音樂影片或在Netflix上觀看電影等。而這些影片在載入過程中會被瀏覽器快取下來,以便日後再次播放時能夠快速載入。那麼問題來了,這些快取的影片實際上儲存在哪個資料夾中呢?不同瀏覽器的快取視訊資料夾保存位置是不同的。以下我們將分別介紹幾種常見的瀏覽器以及它們

DNS(DomainNameSystem)是網際網路中用來將網域名稱轉換為對應IP位址的系統。在Linux系統中,DNS快取是一種將網域名稱和IP位址的映射關係儲存在本地的機制,可提高網域解析速度,減輕DNS伺服器的負擔。 DNS快取允許系統在之後存取相同網域名稱時快速檢索IP位址,而不必每次都向DNS伺服器發出查詢請求,從而提高網路效能和效率。本文不念將和大家一起探討如何在Linux上查看和刷新DNS緩存,以及相關的詳細內容和範例程式碼。 DNS快取的重要性在Linux系統中,DNS快取扮演關鍵的角色。它的存在

Guava缓存入门指南:加速你的应用程序Guava缓存是一个高性能的内存缓存库,它可以显著提高应用程序的性能。它提供了多种缓存策略,包括LRU(最近最少使用)、LFU(最近最不经常使用)和TTL(生存时间)。1.安装Guava缓存在你的项目中添加Guava缓存库的依赖。com.goog

標題:HTML檔案的快取機制及程式碼範例導語:在撰寫網頁時,我們常會遇到瀏覽器快取的問題。本文將詳細介紹HTML檔案的快取機制,並提供一些具體的程式碼範例,以幫助讀者更好地理解並應用此機制。一、瀏覽器快取原理在瀏覽器中,每當造訪一個網頁時,瀏覽器會先檢查快取中是否有該網頁的副本。如果有,則直接從快取獲取網頁內容,這就是瀏覽器快取的基本原理。瀏覽器快取機制的好處

CPU(中央處理器)、記憶體(隨機存取記憶體)以及快取之間存在著緊密的相互作用,它們合力構成了電腦系統的關鍵組成部分。它們之間的協調配合,確保了電腦的正常運作和高效性能。 CPU作為電腦的大腦,負責執行各種指令和資料處理;記憶體則用於臨時儲存資料和程序,提供了快速的讀寫存取速度;而快取則起到了緩衝作用,加快了資料的存取速度,提高了電腦的CPU是電腦的核心元件,負責執行各種指令、算術運算和邏輯操作。它被稱為電腦的"大腦",承擔著處理資料和執行任務的重要角色。記憶體是電腦中重要的儲存設備,

PHPAPCu(替代php快取)是加速PHP應用程式的opcode快取和資料快取模組。理解其高級功能對於充分利用其潛力至關重要。 1.批次操作:APCu提供批次操作方法,可同時處理大量鍵值對。這對於大規模快取清除或更新非常有用。 //批次取得快取鍵$values=apcu_fetch(["key1","key2","key3"]);//批次清除快取鍵apcu_delete(["key1","key2","key3"]);2 .設定快取過期時間:APCu允許您為快取項目設定過期時間,以便在指定時間後自

SpringBoot是一款廣受歡迎的Java框架,以其簡單易用和快速開發而聞名。然而,隨著應用程式的複雜性增加,效能問題可能會成為瓶頸。為了幫助您打造疾風般快速的springBoot應用,本文將分享一些實用的效能優化秘訣。優化啟動時間應用程式的啟動時間是使用者體驗的關鍵因素之一。 SpringBoot提供了多種最佳化啟動時間的途徑,例如使用快取、減少日誌輸出和最佳化類別路徑掃描。您可以透過在application.properties檔案中設定spring.main.lazy-initialization

瀏覽器快取的影片怎麼匯出來隨著網路的快速發展,影片已經成為人們日常生活中不可或缺的一部分。而在瀏覽網頁時,我們常常會遇到想要儲存或分享的影片內容,但是有時候我們卻無法找到影片檔案的來源,因為它們可能只存在於瀏覽器的快取中。那麼,如何匯出瀏覽器快取中的影片呢?本文將為您介紹幾種常用的方法。首先,我們需要明確一個概念,即瀏覽器快取。瀏覽器快取是瀏覽器為了提高用
