Sass(스타일 시트 언어)

Sass (style sheet language)
"SaaS"로 알려진 소프트웨어 배포 체계에 대해서는 서비스로서의 소프트웨어를 참조하십시오.
사스
Sass Logo Color.svg
설계자햄프턴 캐틀린
개발자나탈리 바이젠바움, 크리스 엡스타인
처음 등장2006년 11월 28일; 16년 전 (2006-11-28)
안정적 방출
1.54.0[1] / 2022년 7월 7일, 11개월 전(2022-07-07)[1]
타이핑 분야역학
OS크로스 플랫폼
면허증.MIT 라이선스
파일 이름 확장명.vmdk, .scss
웹사이트sass-lang.com
주요 구현
다트
의 영향을 받은
CSS("인던트" 및 SCSS 모두)

YAML 및 Haml( 들여쓰기 구문)

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

Sass( 구문적으로 멋진 스타일 시트의 줄임말)는 CSS(Cascading Style Sheet)로 해석되거나 컴파일되는 전처리기 스크립팅 언어입니다.SassScript는 스크립트 언어 자체입니다.

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

CSS3는 일련의 선택기와 이들에 적용되는 규칙을 그룹화하는 유사 선택기로 구성됩니다.Sass(두 구문 모두의 큰 맥락에서)는 CSS를 확장하여 더 전통적인 프로그래밍 언어, 특히 객체 지향 언어에서 사용할 수 있는 몇 가지 메커니즘을 제공하지만 CSS3 자체에서는 사용할 수 없습니다.SassScript가 해석될 때 Sass 파일에 정의된 대로 다양한 선택기에 대한 CSS 규칙 블록을 만듭니다.Sass 인터프리터는 SassScript를 CSS로 변환합니다.또는 Sass는 .sass 또는 .scss 파일을 모니터링하여 .sass 또는 .scss 파일이 [3]저장될 때마다 출력 .css 파일로 변환할 수 있습니다.

들여쓰기된 구문은 금속 언어입니다.유효한 CSS는 동일한 의미를 갖는 유효한 SCSS이므로 SCSS는 중첩된 금속 언어이자 CSS의 상위 집합입니다.

SassScript는 변수, 중첩, 믹스인 및 선택기 [2]상속과 같은 메커니즘을 제공합니다.

역사

Sass는 처음에 Hampton Catlin에 의해 설계되었고 Natalie [4][5]Weizenbaum에 의해 개발되었습니다.초기 버전 이후, Weizenbaum과 Chris Eppstein은 Sass 파일에 사용되는 스크립트 언어인 SassScript로 Sass를 계속 확장해 왔습니다.

주요 구현

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

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

특징들

변수

Sass를 사용하면 변수를 정의할 수 있습니다.변수는 달러 기호($) 변수 할당은 콜론(:).[16]

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

  • 숫자(단위 포함)
  • 문자열(따옴표 포함 또는 없음)
  • 색상(이름 또는 이름)
  • 불란

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

SCSS 사스 컴파일된 CSS
$원색: #3bbfce; $176: 16px;  .내용-해석 {   테두리 색의: $원색의;   색.: 을 어둡게 하다($원색의, 10%); }  .경계 {   패딩: $여백 / 2;   여백: $여백 / 2;   테두리 색의: $원색의; } 
$원색: #3bbfce $176: 16px  .내용-해석   테두리 색의: $원색   색.: 을 어둡게 하다($원색, 10%)  .경계   패딩: $176/2   여백:  $176/2   테두리 색의: $원색 
:뿌리{     -- 원색:#3bbfce;     -- 2차색:#2b9eab;     --비공식적인:8px; }   .콘텐츠 편집 {   테두리 색의: 넝쿨(-- 2차색)   색.: 넝쿨(-- 2차색); }  .경계 {   패딩: 8px;   여백: 넝쿨(--비공식적인);   테두리 색의: #3bbfce; }

네스팅

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

SCSS 사스 컴파일된 CSS
테이블.hl {   여백: 2em 0;   td.tg. {     텍스트 정렬: 맞다;   } }  리 {   폰트: {     가족: 세리프;     체중: 대담한;     크기: 1.3em;   } } 
테이블.hl    여백: 2엠 0   td.tg.      텍스트 정렬: 맞다    리    폰트:      가족: 세리프     체중: 대담한     크기: 1.3엠 
테이블.hl {   여백: 2엠 0; } 테이블.hl td.인 {   텍스트 정렬: 맞다; }  리 {   서체족: 세리프;   폰트급의: 대담한;   글꼴 크기의: 1.3엠; }

네임스페이스 중첩 및 상위 참조를 포함한 보다 복잡한 중첩 유형에 대해서는 Sass [16]설명서에서 설명합니다.

SCSS 사스 컴파일된 CSS
@에 섞다테이블 베이스 {   th의 {     텍스트 정렬: 중심;     폰트급의: 대담한;   }   td, th의 {     패딩: 2장;   } }  #자료 {   @지옥의테이블 베이스; } 
= 테이블 베이스   th의     텍스트 정렬: 중심     폰트급의: 대담한   td, th의     패딩: 2px  #자료   + 테이블 베이스 
#데이터. th의 {   텍스트 정렬: 중심;   폰트급의: 대담한; } #데이터. td, #데이터. th의 {   패딩: 2px; }

루프

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

사스 컴파일된 CSS
$squareCount: 4 @때문에 $i 부터 1 로. $squareCount    #제곱-#{$i}     배경색의: 빨간.    폭: 50px * $i    높이: 120px / $i 
#제곱-1의 {   배경색의: 빨간.;   폭: 50px;   높이: 120px; }  #제곱2의 {   배경색의: 빨간.;   폭: 100px;   높이: 60px; }  #제곱 3의 {   배경색의: 빨간.;   폭: 150px;   높이: 40px; }

논쟁들

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

사스 컴파일된 CSS
=좌($dist)    흘러가다: 왼쪽   왼쪽 끝의: $dist  #자료    +왼쪽(10px) 
#데이터. {   흘러가다: 왼쪽;   왼쪽 끝의: 10px; }

조합하여

사스 컴파일된 CSS
= 테이블 베이스   th의     텍스트 정렬: 중심     폰트급의: 대담한   td, th의      패딩: 2px  =좌($dist)    흘러가다: 왼쪽   왼쪽 끝의: $dist  #자료    +왼쪽(10px)   + 테이블 베이스 
#데이터. {   흘러가다: 왼쪽;   왼쪽 끝의: 10px; } #데이터. th의 {   텍스트 정렬: 중심;   폰트급의: 대담한; } #데이터. td, #데이터. th의 {   패딩: 2px; }

셀렉터 상속

CSS3은 DOM(Document Object Model) 계층을 지원하지만 선택기 상속은 허용하지 않습니다.Sass에서 상속은 코드 블록 내부에 @extend 키워드를 사용하고 다른 선택기를 참조하는 줄을 삽입하여 이루어집니다.확장 선택기의 특성이 호출 [2]선택기에 적용됩니다.

사스 컴파일된 CSS
.오류   경계: 1px #f00   배경: #fdd  .error.dll    글꼴 크기의: 1.3엠   폰트급의: 대담한  .badError    @지옥의 .오류   국경 너비의: 3px 
.오류, .나쁜 오류 {   경계: 1px #f00;   배경: #fdd; }  .오류.침입, .나쁜 오류.침입 {   글꼴 크기의: 1.3엠;   폰트급의: 대담한; }  .나쁜 오류 {   국경 너비의: 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가 있을 것입니다.지금 바로 파이어폭스로 옮겨서 파이어폭스를 만들면 거기서 컴파일이 됩니다.우리는 그것이 [21]가능한지 확인하기 위해 처음부터 우리만의 파서를 썼습니다."

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

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

IDE 통합

Sass의 IDE 통합
IDE 소프트웨어
어도비 드림위버 CC 2017
이클립스
에맥스 엽기적인
제트브레인 인텔리J IDEA(최종판)
제트브레인스톰
제트브레인 루비마인
제트브레인즈 웹스톰
마이크로소프트 비주얼 스튜디오 마인드스케이프
마이크로소프트 비주얼 스튜디오 새시 스튜디오
마이크로소프트 웹 매트릭스
넷빈즈
빔 haml.zip
아톰
비주얼 스튜디오 코드
숭고함
편집+

참고 항목

레퍼런스

  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.{{cite web}}CS1 유지보수: url-status(링크)
  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::스크립트:함수 Sass 함수
  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". Archived from the original on 2013-08-06. 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.

외부 링크