목차
Rack/Rails/Merb 插件(Plugin)
缓存 (Caching)
配置选项 (Options)
语法选择(Syntax Selection)
编码格式 (Encodings)
웹 프론트엔드 HTML 튜토리얼 使用 Sass (Using Sass)-插件,缓存,配置选项,语法选择及编码格式_html/css_WEB-ITnose

使用 Sass (Using Sass)-插件,缓存,配置选项,语法选择及编码格式_html/css_WEB-ITnose

Jun 21, 2016 am 08:54 AM

翻译自官方文档: 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으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

비디오 파일은 브라우저 캐시의 어디에 저장됩니까? 비디오 파일은 브라우저 캐시의 어디에 저장됩니까? Feb 19, 2024 pm 05:09 PM

브라우저는 어떤 폴더에 동영상을 캐시하나요? 우리는 매일 인터넷 브라우저를 사용하다 보면 유튜브에서 뮤직비디오를 보거나 넷플릭스에서 영화를 보는 등 다양한 온라인 동영상을 자주 보게 됩니다. 이러한 비디오는 나중에 다시 재생할 때 빠르게 로드할 수 있도록 로드 프로세스 중에 브라우저에 의해 캐시됩니다. 그렇다면 문제는 캐시된 동영상이 실제로 어느 폴더에 저장되어 있느냐는 것입니다. 브라우저마다 캐시된 비디오 폴더를 다른 위치에 저장합니다. 아래에서는 몇 가지 일반적인 브라우저와 해당 브라우저를 소개합니다.

Linux에서 DNS 캐시를 보고 새로 고치는 방법 Linux에서 DNS 캐시를 보고 새로 고치는 방법 Mar 07, 2024 am 08:43 AM

DNS(DomainNameSystem)는 인터넷에서 도메인 이름을 해당 IP 주소로 변환하는 데 사용되는 시스템입니다. Linux 시스템에서 DNS 캐싱은 도메인 이름과 IP 주소 간의 매핑 관계를 로컬로 저장하는 메커니즘으로, 도메인 이름 확인 속도를 높이고 DNS 서버의 부담을 줄일 수 있습니다. DNS 캐싱을 사용하면 시스템이 매번 DNS 서버에 쿼리 요청을 보낼 필요 없이 이후에 동일한 도메인 이름에 액세스할 때 IP 주소를 신속하게 검색할 수 있으므로 네트워크 성능과 효율성이 향상됩니다. 이 문서에서는 Linux에서 DNS 캐시를 보고 새로 고치는 방법과 관련 세부 정보 및 샘플 코드에 대해 설명합니다. DNS 캐싱의 중요성 Linux 시스템에서 DNS 캐싱은 중요한 역할을 합니다. 그 존재

애플리케이션 속도 향상: Guava 캐싱에 대한 간단한 가이드 애플리케이션 속도 향상: Guava 캐싱에 대한 간단한 가이드 Jan 31, 2024 pm 09:11 PM

Guava Cache 시작하기: 애플리케이션 속도 향상 Guava Cache는 애플리케이션 성능을 크게 향상시킬 수 있는 고성능 인메모리 캐싱 라이브러리입니다. LRU(최근에 사용됨), LFU(최근에 사용됨), TTL(Time to Live)을 포함한 다양한 캐싱 전략을 제공합니다. 1. Guava 캐시를 설치하고 프로젝트에 Guava 캐시 라이브러리의 종속성을 추가합니다. com.goog

HTML 파일이 캐시되나요? HTML 파일이 캐시되나요? Feb 19, 2024 pm 01:51 PM

제목: HTML 파일의 캐싱 메커니즘 및 코드 예제 소개: 웹 페이지를 작성할 때 브라우저 캐싱 문제에 자주 직면합니다. 이 기사에서는 HTML 파일의 캐싱 메커니즘을 자세히 소개하고 독자가 이 메커니즘을 더 잘 이해하고 적용할 수 있도록 몇 가지 특정 코드 예제를 제공합니다. 1. 브라우저 캐싱 원리 브라우저에서는 웹페이지에 액세스할 때마다 먼저 캐시에 웹페이지 복사본이 있는지 확인합니다. 있는 경우 웹페이지 콘텐츠를 캐시에서 직접 가져옵니다. 이것이 브라우저 캐싱의 기본 원칙입니다. 브라우저 캐싱 메커니즘의 이점

PHP APCu의 고급 활용: 숨겨진 힘의 잠금 해제 PHP APCu의 고급 활용: 숨겨진 힘의 잠금 해제 Mar 01, 2024 pm 09:10 PM

PHPAPCu(php 캐시 대체)는 PHP 애플리케이션을 가속화하는 opcode 캐시 및 데이터 캐시 모듈입니다. 잠재력을 최대한 활용하려면 고급 기능을 이해하는 것이 중요합니다. 1. 일괄 작업: APCu는 동시에 많은 수의 키-값 쌍을 처리할 수 있는 일괄 작업 방법을 제공합니다. 이는 대규모 캐시 삭제 또는 업데이트에 유용합니다. //일괄적으로 캐시 키 가져오기 $values=apcu_fetch(["key1","key2","key3"]) //일괄적으로 캐시 키 지우기 apcu_delete(["key1","key2","key3"]) ;2 .캐시 만료 시간 설정: APCu를 사용하면 캐시 항목의 만료 시간을 설정하여 지정된 시간 후에 자동으로 만료되도록 할 수 있습니다.

브라우저 캐시에서 로컬로 비디오 파일을 저장하는 방법 브라우저 캐시에서 로컬로 비디오 파일을 저장하는 방법 Feb 23, 2024 pm 06:45 PM

브라우저 캐시 동영상을 내보내는 방법 인터넷의 급속한 발전으로 동영상은 사람들의 일상생활에서 없어서는 안 될 부분이 되었습니다. 웹을 탐색할 때 저장하거나 공유하고 싶은 비디오 콘텐츠를 자주 접하지만 비디오 파일이 브라우저의 캐시에만 존재할 수 있기 때문에 비디오 파일의 소스를 찾을 수 없는 경우가 있습니다. 그렇다면 브라우저 캐시에서 비디오를 어떻게 내보내나요? 이 기사에서는 몇 가지 일반적인 방법을 소개합니다. 먼저 브라우저 캐시라는 개념을 명확히 해야 합니다. 브라우저 캐시는 브라우저에서 사용자 경험을 개선하는 데 사용됩니다.

PHP 개발의 캐싱 메커니즘 및 응용 실습 PHP 개발의 캐싱 메커니즘 및 응용 실습 May 09, 2024 pm 01:30 PM

PHP 개발에서 캐싱 메커니즘은 자주 액세스하는 데이터를 메모리나 디스크에 임시 저장하여 데이터베이스 액세스 횟수를 줄여 성능을 향상시킵니다. 캐시 유형에는 주로 메모리, 파일 및 데이터베이스 캐시가 포함됩니다. 캐싱은 내장 함수나 캐시_get() 및 Memcache와 같은 타사 라이브러리를 사용하여 PHP에서 구현할 수 있습니다. 일반적인 실제 응용 프로그램에는 쿼리 성능을 최적화하기 위한 데이터베이스 쿼리 결과 캐싱과 렌더링 속도를 높이기 위한 페이지 출력 캐싱이 포함됩니다. 캐싱 메커니즘은 웹사이트 응답 속도를 효과적으로 향상시키고, 사용자 경험을 향상시키며, 서버 부하를 줄입니다.

PHP 캐싱 기술 심층 분석: 웹사이트 성능 가속화의 핵심 PHP 캐싱 기술 심층 분석: 웹사이트 성능 가속화의 핵심 Jan 23, 2024 am 08:37 AM

PHP 캐싱 기술 탐색: 웹 사이트 성능을 향상시키는 강력한 도구, 특정 코드 예제가 필요합니다. 소개: 오늘날 인터넷의 급속한 발전으로 인해 웹 사이트 성능은 사용자 경험과 검색 엔진 순위에 매우 중요합니다. PHP는 일반적으로 사용되는 프로그래밍 언어로서 웹 사이트 개발에 널리 사용됩니다. PHP 웹 사이트의 성능을 향상시키는 방법은 개발자에게 긴급한 문제가 되었습니다. 매우 중요한 솔루션 중 하나는 PHP 캐싱 기술을 사용하는 것입니다. 이 기사에서는 PHP 캐싱의 개념과 구체적인 기술을 살펴보고 독자의 이해를 돕기 위한 코드 예제를 제공합니다.

See all articles