Sass 사용

SASS는 CSS 확장을 사용하여 기본 언어에 힘을 제공하는 더 강력하고 안정적입니다. 세 가지 방법으로 SASS를 사용할 수 있습니다.

명령 줄 도구로
Ruby 모듈로
랙 활성화 프레임 워크 용 플러그인으로

Windows에서 SASS를 사용하는 경우 다음을 설치해야합니다. Ruby먼저. Ruby 설치에 대한 자세한 내용은 SASS 설치 장을 참조하십시오 .

다음 표는 SASS 코드를 실행하는 데 사용되는 명령을 보여줍니다.

S. 아니.	명령 및 설명
1	sass input.scss output.css 명령 줄에서 SASS 코드를 실행하는 데 사용됩니다.
2	sass --watch input.scss:output.css SASS에 파일을 감시하고 SASS 파일이 변경 될 때마다 CSS를 업데이트하도록 알립니다.
삼	sass --watch app/sass:public/stylesheets SASS가 디렉토리에 많은 파일을 포함하는 경우 전체 디렉토리를 감시하는 데 사용됩니다.

랙 / 레일 / Merb 플러그인

RackRuby에서 웹 애플리케이션을 개발하는 데 사용되는 웹 서버 인터페이스입니다. 랙에 대한 자세한 내용은이 링크를 참조하십시오 .

SASS를 활성화 할 수 있습니다. Rails 3 사용하는 버전 environment.rb 아래에있는 파일 config폴더. 다음 코드를 사용하여 Rails 3에 대해 SASS를 활성화합니다.

config.gem "sass"

Rails 3 (이상 버전)의 Gemfile에 다음 줄을 사용할 수 있습니다.

gem "sass"

Rails사용자 인터페이스를 표시하기 위해 JSON, HTML, CSS 및 JavaScript와 같은 웹 표준을 사용하는 오픈 소스 웹 프레임 워크입니다. Rails를 사용하려면 Ruby 및 객체 지향 프로그래밍에 대한 기본 지식이 있어야합니다. 여기 에서 on Rails 프레임 워크에 대해 자세히 알아보세요 .

SASS를 활성화하려는 경우 Rack 응용 프로그램에 다음 줄을 추가하십시오. config.ru 앱의 루트 디렉토리에있는 파일-

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

MerbRails에 속도와 모듈성을 제공하는 웹 애플리케이션 프레임 워크입니다. Merb에 대해 자세히 알아 보려면이 링크를여십시오 .

SASS를 활성화 할 수 있습니다. Merb 다음 줄을 추가하여 config/dependencies.rb 파일-

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. 아니.	옵션 및 설명
1	:style 출력 스타일을 표시합니다.
2	:syntax sass 에는 들여 쓰기 구문을 , scss에는 CSS 확장 구문을 사용할 수 있습니다 .
삼	:property_syntax 속성을 사용하기 위해 들여 쓰기 된 구문을 사용합니다. 정확하지 않으면 오류가 발생합니다. 예를 들어 배경 이 속성 이름이고 # F5F5F5 가 속성 값인 "배경 : # F5F5F5"를 고려하십시오 . 속성 이름 뒤에 콜론을 사용해야합니다.
4	:cache SASS 파일 컴파일 속도를 높입니다. 기본적으로 true로 설정됩니다.
5	:read_cache cache 가 설정되지 않고 read_cache 가 설정된 경우 SASS 파일 만 읽습니다 .
6	:cache_store 캐시 된 결과를 Sass :: CacheStores :: Base 인스턴스로 설정하여 저장하고 액세스하는 데 사용할 수 있습니다 .
7	:never_update 템플릿 파일이 변경되면 CSS 파일을 업데이트해서는 안됩니다. 기본적으로 false로 설정됩니다.
8	:always_update 템플릿 파일이 변경 될 때마다 CSS 파일을 업데이트해야합니다.
9	:always_check 서버가 시작될 때마다 업데이트를 확인해야합니다. SASS 템플릿 파일에 업데이트가있는 경우 CSS 파일을 다시 컴파일하고 덮어 씁니다.
10	:poll 그것은 true로 설정하여 Sass :: Plugin :: Compiler # watch (템플릿 및 CSS 파일 업데이트를 감시)에 폴링 백엔드를 사용 합니다.
11	:full_exception 생성 된 CSS 파일 내의 SASS 코드에서 예외가 발생할 때마다 오류 설명을 표시합니다. CSS 파일의 소스와 함께 오류가 발생한 줄 번호를 표시합니다.
12	:template_location 응용 프로그램의 템플릿 디렉토리 경로를 제공합니다.
13	:css_location 애플리케이션에서 CSS 스타일 시트의 경로를 제공합니다.
14	:unix_newlines True로 설정하여 파일을 작성할 때 Unix 스타일의 줄 바꿈을 제공합니다.
15	:filename 오류보고에 표시되고 사용되는 파일 이름의 이름입니다.
16	:line SASS 템플릿의 첫 번째 줄을 지정하고 오류에 대한 줄 번호를 표시합니다.
17	:load_paths @import 지시문을 사용하여 포함 된 SASS 템플릿의 경로를로드하는 데 사용됩니다 .
18	:filesystem_importer 문자열로드 경로를 처리하기 위해 Sass :: Importers :: Base 하위 클래스를 사용하는 파일 시스템에서 파일을 가져 오는 데 사용됩니다 .
19	:sourcemap 브라우저에 SASS 스타일을 찾도록 지시하는 소스 맵을 생성합니다. 그것은 세 가지 값을 사용합니다- :auto− 상대 URI를 포함합니다. 상대 URI가 없으면 "file :"URI를 사용합니다. :file − 원격 서버가 아닌 로컬에서 작동하는 "파일 :"URI를 사용합니다. :inline − 대용량 소스 맵 파일을 생성하는 데 사용되는 소스 맵에 소스 텍스트가 포함되어 있습니다.
20	:line_numbers true로 설정하여 CSS 파일에보고 된 오류의 행 번호를 표시합니다.
21	:trace_selectors true로 설정된 경우 import 및 mixin의 선택자를 추적하는 데 도움이됩니다.
22	:debug_info true로 설정된 경우 라인 번호와 파일을 사용하여 SASS 파일의 디버그 정보를 제공합니다.
23	:custom 별도의 애플리케이션에서 SASS 기능에 데이터를 사용할 수 있습니다.
24	:quiet true로 설정하여 경고를 비활성화합니다.

구문 선택

SASS 명령 줄 도구를 사용하여 SASS 템플릿에서 사용중인 구문을 확인할 수 있습니다. 기본적으로 SASS는 CSS 기반 SCSS 구문의 대안 인 들여 쓰기 구문 을 사용 합니다. SASS 프로그램과 유사한 SCSS 명령 줄 프로그램을 사용할 수 있지만 기본적으로 구문을 SCSS로 간주합니다.

인코딩

SASS는 다음 CSS 사양을 지정하여 스타일 시트의 문자 인코딩을 사용합니다.

먼저 유니 코드 바이트, 다음 @charset 선언 및 Ruby 문자열 인코딩을 확인합니다.
다음으로 아무것도 설정되지 않으면 charset 인코딩을 UTF-8 로 간주 합니다.
@charset 선언 을 사용하여 명시 적으로 문자 인코딩을 결정합니다 . 스타일 시트 시작 부분에 "@charset encoding name"을 사용하면 SASS는 이것이 주어진 문자 인코딩이라고 가정합니다.
SASS의 출력 파일에 비 ASCII 문자가 포함 된 경우 @charset 선언 을 사용합니다 .