Sass(스타일시트 언어)

Sass (stylesheet language)
「SaaS」라고 불리는 소프트웨어 배포 스킴에 대해서는, 「서비스로서의 소프트웨어」를 참조해 주세요.
새스
Sass Logo Color.svg
설계자햄프턴 캐틀린
개발자나탈리 바이젠바움, 크리스 엡스타인
처음 등장한2006년 11월 28일, 15년 전(2006년 11월 28일)
안정된 릴리스
1.54.0[1] / 2022년 7월 7일; 27일 전(2022-07-07)[1]
타이핑 분야역학
OS크로스 플랫폼
면허증.MIT 라이선스
파일 이름 확장자.scs, .scs
웹 사이트sass-lang.com
주요 구현
다트
영향을 받다
CSS('유효'와 SCSS 모두)

YAML 및 Haml(부호 구문)

더 적음(SCSS)
영향받은
덜, 스타일러스, 삼중수소, 부트스트랩 (v4+)

Sass(통사적으로 멋진 스타일시트의 줄임말)는 Cascading Style Sheet(CSS; 캐스케이드스타일시트)로 해석 또는 컴파일되는 프리프로세서스크립트 언어입니다SassScript는 스크립트 언어입니다.

Sass는 두 개의 구문으로 구성됩니다.원래 구문인 "Intended 구문"은 Haml과 [2]유사한 구문을 사용합니다.들여쓰기를 사용하여 코드 블록을 구분하고 줄 바꿈 문자를 사용하여 규칙을 구분합니다.새로운 구문인 "SCSS"(Sassy CSS)는 CSS와 같은 블록 형식을 사용합니다.코드 블록을 나타내려면 중괄호를 사용하고 블록 내의 규칙을 구분하려면 세미콜론을 사용합니다.들여쓰기 구문과 SCSS 파일에는 각각 .sass 및 .scss라는 확장자가 붙습니다.

CSS3는 일련의 셀렉터와 의사 셀렉터로 구성되어 있으며, 이 셀렉터에 적용되는 규칙을 그룹화합니다.Sass(양쪽 구문의 큰 맥락에서)는 보다 전통적인 프로그래밍 언어(특히 객체 지향 언어)에서 사용할 수 있는 몇 가지 메커니즘을 제공함으로써 CSS를 확장하지만 CSS3 자체에서는 사용할 수 없습니다.SassScript가 해석되면 Sass 파일에서 정의된 다양한 셀렉터의 CSS 규칙 블록이 생성됩니다.Sass 인터프리터는 SassScript를 CSS로 변환합니다.또는 Sass 또는 .scss 파일을 감시하고 .sass 또는 .scss 파일이 [3]저장될 때마다 출력 .css 파일로 변환할 수 있습니다.

들여쓰기된 구문은 메타 언어입니다.유효한 CSS는 동일한 의미론을 가진 유효한 SCSS이기 때문에 SCSS는 중첩된 메타 언어입니다.

SassScript는 변수, 네스팅, 믹스인 및 셀렉터 [2]상속의 메커니즘을 제공합니다.

역사

새스는 처음에 햄튼 캐틀린이 디자인했고 나탈리 와이젠바움이 [4][5]개발했다.초기 버전 이후 Weizenbaum과 Chris Eppstein은 Sass 파일에서 사용되는 스크립트 언어인 SassScript를 사용하여 Sass를 계속 확장해 왔습니다.

주요 구현

SassScript는 여러 언어로 구현되었으며 주목할 만한 구현은 다음과 같습니다.

  • 공식 오픈 소스 Dart 구현.[6]
  • npm의 공식 "sass" 노드 모듈. 이는 순수 JavaScript로 컴파일된 Dart Sass입니다.[7]
  • 네이티브 Dart 실행 [8]파일을 둘러싼 JavaScript 래퍼인 공식 "sass-embedded" 노드 모듈.
  • 2006년에 [6]작성된 오픈 소스 Ruby의 최초 구현은 유지보수가 부족하여 폐지되어 2019년 [9][10]3월에 종료되었습니다.
  • 공식 오픈 소스 C++ 구현인 libSass는 2020년 [11]10월에 폐지되었습니다.
  • 사용되지 않는 libSass를 기반으로 npm에서 사용되지 않는 "node-sass" 노드 모듈.[12]
  • JSass는 사용되지 않는 libSass에 [14]기반한 비공식 Java [13]구현입니다.
  • phamlp, [6]PHP의 비공식 SAS/SCSS 구현입니다.
  • Vaadin은 [15]Sass의 Java 구현을 가지고 있습니다.
  • Firebug는 웹 [16]개발을 위한 Firefox XUL("레거시") 확장입니다.이후 파이어폭스 자체에 통합된 개발자 도구에 대한 선호도가 낮아졌습니다.파이어폭스 57이 XUL 확장 지원을 중단한 이후 작동이 중지되었습니다.

특징들

변수

Sass를 사용하면 변수를 정의할 수 있습니다.변수는 달러 기호로 시작합니다.$변수 할당은 콜론( )을 사용하여 이루어집니다.:를 참조해 주세요.[16]

SassScript는 다음 4가지 데이터 [16]유형을 지원합니다.

  • 번호(단위 포함)
  • 문자열(따옴표 포함 또는 제외)
  • 색상(이름 또는 이름)
  • 부란스

변수는 사용 가능한 여러 함수 [17]중 하나에 대한 인수이거나 결과일 수 있습니다.변환 중에 변수 값이 출력 CSS [2]문서에 삽입됩니다.

SCSS 새스 컴파일된 CSS
$primary-color(원색): #3bbfce; $140: 16px;  .content-navigation {   테두리 색상의: $원색의;   색.: 어둡게 하다($원색의, 10%); }  .경계 {   패딩: $여백 / 2;   여백: $여백 / 2;   테두리 색상의: $원색의; } 
$primary-color(원색): #3bbfce $140: 16px  .content-navigation   테두리 색상의: $primary-color(원색)   색.: 어둡게 하다($primary-color(원색), 10%)  .경계   패딩: $140/2   여백:  $140/2   테두리 색상의: $primary-color(원색) 
.콘텐츠 내비게이션 {   테두리 색상의: #3bbfce;   색.: #2b9eab; }  .경계 {   패딩: 8px;   여백: 8px;   테두리 색상의: #3bbfce; }

네스트

CSS는 논리 네스트를 지원하지만 코드 블록 자체는 네스트되지 않습니다.Sass를 사용하면 중첩된 코드를 [2]서로 삽입할 수 있습니다.

SCSS 새스 컴파일된 CSS
테이블.hl {   여백: 2em 0;   td.ln {     텍스트 정렬: 맞다;   } }  리 {   폰트: {     가족: 세리프;     체중: 대담한;     크기: 1.3em;   } } 
테이블.hl    여백: 2em 0   td.ln      텍스트 정렬: 맞다    리    폰트:      가족: 세리프     체중: 대담한     크기: 1.3em 
테이블.hl {   여백: 2em 0; } 테이블.hl td.인 {   텍스트 정렬: 맞다; }  리 {   폰트 패밀리: 세리프;   폰트 무게의: 대담한;   폰트 사이즈: 1.3em; }

네임스페이스 네스트 및 부모 참조를 포함한 보다 복잡한 네스트 유형은 Sass [16]문서에서 설명합니다.

SCSS 새스 컴파일된 CSS
@paramin테이블 베이스 {   츠 {     텍스트 정렬: 중심;     폰트 무게의: 대담한;   }   td, 츠 {     패딩: 2px;   } }  데이터 {   @parames(@parames)테이블 베이스; } 
= 테이블 베이스   츠     텍스트 정렬: 중심     폰트 무게의: 대담한   td, 츠     패딩: 2px  데이터   + 테이블 베이스 
#데이터. 츠 {   텍스트 정렬: 중심;   폰트 무게의: 대담한; } #데이터. td, #데이터. 츠 {   패딩: 2px; }

루프

Sass는 변수를 반복할 수 있도록 합니다.@for,@each그리고.@while클래스 또는 ID가 유사한 요소에 다른 스타일을 적용하는 데 사용할 수 있습니다.

새스 컴파일된 CSS
$squalCount($squalCount): 4 @용 i달러 부터 1 통해. $squalCount($squalCount)    # 정사각형-#{i달러}     배경색: 빨간.    폭: 50px * i달러    높이: 120px / i달러 
#스퀘어 1 {   배경색: 빨간.;   폭: 50px;   높이: 120px; }  #정사각형 2 {   배경색: 빨간.;   폭: 100px;   높이: 60px; }  #스퀘어 3 {   배경색: 빨간.;   폭: 150px;   높이: 40px; }

논쟁들

또한 mixins는 [2]인수를 지원합니다.

새스 컴파일된 CSS
=왼쪽(먼 거리)    흘러가다: 왼쪽   여백 왼쪽의: 먼 거리  데이터    +왼쪽(10px) 
#데이터. {   흘러가다: 왼쪽;   여백 왼쪽의: 10px; }

조합하여

새스 컴파일된 CSS
= 테이블 베이스   츠     텍스트 정렬: 중심     폰트 무게의: 대담한   td, 츠      패딩: 2px  =왼쪽(먼 거리)    흘러가다: 왼쪽   여백 왼쪽의: 먼 거리  데이터    +왼쪽(10px)   + 테이블 베이스 
#데이터. {   흘러가다: 왼쪽;   여백 왼쪽의: 10px; } #데이터. 츠 {   텍스트 정렬: 중심;   폰트 무게의: 대담한; } #데이터. td, #데이터. 츠 {   패딩: 2px; }

선택기 상속

CSS3는 Document Object Model(DOM) 계층을 지원하지만 셀렉터 상속은 허용하지 않습니다.Sass에서는 @extend 키워드를 사용하여 다른 셀렉터를 참조하는 코드블록 내부에 행을 삽입함으로써 상속이 이루어집니다.확장 셀렉터의 Atribut이 콜 [2]실렉터에 적용됩니다.

새스 컴파일된 CSS
에러   경계: 1px #f00   배경: #fdd  .error.displaces    폰트 사이즈: 1.3em   폰트 무게의: 대담한  .bad 에러    @parames(@parames) 에러   테두리 폭: 3px 
.에러, .bad Er {   경계: 1px #f00;   배경: #fdd; }  .에러.침입, .bad Er.침입 {   폰트 사이즈: 1.3em;   폰트 무게의: 대담한; }  .bad Er {   테두리 폭: 3px; }

Sass는 다중 [16]상속을 지원합니다.

libSass

2012년 HTML5 개발자 컨퍼런스에서 Sass의 제작자인 Hampton Catlin은 Catlin, Aaron Leung 및 Moovweb의 엔지니어링 [18][19]팀이 개발한 Sass의 오픈 소스 C++ 구현인 libSass 버전 1.0을 발표했습니다.현재 Sass의 메인터넌스인 Chris Eppstein도 [20]공헌의사를 표명하고 있습니다.

Catlin에 따르면 libSass는 어떤 것이든 "드롭"할 수 있으며 Sass가 포함되어 있습니다.지금 바로 Firefox에 드롭하여 Firefox를 구축하면 컴파일됩니다.우리는 [21]그것이 가능한지 확인하기 위해 처음부터 우리만의 파서를 작성했습니다."

libSass의 설계 목표는 다음과 같습니다.

  • 성능 – 개발자들은 Sass의 [22]Ruby 구현에 비해 속도가 10배 향상되었다고 보고했습니다.
  • 통합의 용이성– libSass를 통해 Sass를 더 많은 소프트웨어에 쉽게 통합할 수 있습니다.libSass 이전에는 Sass를 언어 또는 소프트웨어 제품에 긴밀하게 통합하려면 Ruby 인터프리터 전체를 번들해야 했습니다.이와는 대조적으로 libSass는 외부 의존성이 전혀 없고 C와 같은 인터페이스를 가진 정적으로 링크 가능한 라이브러리이므로 Sass를 다른 프로그래밍 언어와 툴로 직접 랩하는 것이 용이합니다.예를 들어 Node, Go 및 [19]Ruby에 대한 오픈소스 libSass 바인딩이 존재합니다.
  • 호환성 – libSass의 목표는 Sass의 공식 Ruby 구현과의 완전한 호환성입니다.이 목표는 libsass 3.[23]3에서 달성되었습니다.

IDE 통합

Sass의 IDE 통합
IDE 소프트웨어
어도비 드림위버 CC 2017
이클립스
에맥스 SAS 모드
JetBrains IntelliJ IDEA (얼티밋 에디션)
JetBrains PhpStorm
JetBrains RubyMine
JetBrains WebStorm
Microsoft Visual Studio 마인드스케이프
Microsoft Visual Studio 새시 스튜디오
Microsoft Web Matrix
넷빈즈
VIM haml.zip
아톰
Visual Studio 코드
숭고함
편집+

「 」를 참조해 주세요.

레퍼런스

  1. ^ a b "Dart Sass - latest release". github.com.
  2. ^ a b c d e f Media Mark (3.2.12). "Sass - Syntactically Awesome Stylesheets". Sass-lang.com. Retrieved 2014-02-23.
  3. ^ Sass - 구문적으로 멋진 스타일시트 튜토리얼
  4. ^ "Sass: Syntactically Awesome Style Sheets". sass-lang.com. Archived from the original on 2013-09-01.
  5. ^ "Natalie Weizenbaum's blog". Archived from the original on 2007-10-11.
  6. ^ a b c "Sass / Scss". Drupal.org. 2009-10-21. Retrieved 2014-02-23.
  7. ^ "sass". www.npmjs.com.
  8. ^ "sass-embedded". www.npmjs.com.
  9. ^ Weizenbaum, Natalie. "Ruby Sass Has Reached End-Of-Life « Sass Blog". sass.logdown.com. Retrieved 2019-04-21.
  10. ^ "Sass: Ruby Sass". sass-lang.com. Retrieved 2019-04-21.
  11. ^ "LibSass is Deprecated". sass-lang.com. 26 October 2020.
  12. ^ "node-sass". www.npmjs.com.
  13. ^ "jsass - A Java implementation of the Sass compiler (and some other goodies). - Google Project Hosting". Retrieved 2014-02-23.
  14. ^ "JSass documentation". jsass.readthedocs.io.
  15. ^ "SassCompiler (Vaadin 7.0.7 API)". Vaadin.com. 2013-06-06. Archived from the original on 2014-04-21. Retrieved 2014-02-23.
  16. ^ a b c d e Sass(구사적으로 멋진 스타일 시트) SAS_REFERENCE
  17. ^ 모듈: Sass:: 스크립트:함수 Sas 함수
  18. ^ H. Catlin (2012-10-15). "Hampton's 6 Rules of Mobile Design". HTML5 Developer Conference. Archived from the original on 2021-12-15. Retrieved 2013-07-11.
  19. ^ a b M. Catlin (2012-04-30). "libsass". Moovweb Blog. Archived from the original on 2013-05-08. Retrieved 2013-07-11.
  20. ^ C. Eppstein [@chriseppstein] (2013-04-15). "Good resources on writing production, x-platform C++? I haven't coded any since college but I want to hack on libsass /cc @hcatlin @akhleung" (Tweet). Retrieved 2021-03-19 – via Twitter.
  21. ^ A. Stacoviak & A. Thorp (2013-06-26). "Sass, libsass, Haml and more with Hampton Catlin". Retrieved 2013-07-30.
  22. ^ D. Le Nouaille (2013-06-07). "Sassc and Bourbon". Retrieved 2013-07-11.
  23. ^ "Sass Compatibility". sass-compatibility.github.io. Retrieved 2019-11-29.

외부 링크

JSON 디코더 온라인 JSON 온라인 에디터