문서 보기문서 편집수정 내역 Sass (덤프버전으로 되돌리기) ||<-2> {{{+1 '''Sass'''}}}[br]{{{-1 Syntactically Awesome Style Sheets}}} || ||<-2> [[파일:Sass 로고.svg|width=70%]] || || '''종류''' ||[[스타일시트]] 언어 || || '''출시''' ||[[2006년]] [[11월 28일]] || || '''라이선스''' ||[[MIT 라이선스]] || || '''링크''' ||[[https://sass-lang.com/|[[파일:Sass 로고.svg|width=20]]]] [include(틀:GitHub 로고,링크=sass,크기=20)] [include(틀:트위터 로고,링크=SassCSS,크기=20)] || [목차] [clearfix] == 개요 == [[CSS]]의 단점을 보완하기 위해 만든 CSS 전처리기이다. 보통 CSS를 사용하다보면 단순 반복되는 부분이 많은 등, 불편함이 느껴지기 마련인데, SASS는 이 부분을 거의 완전히 해소시켜주는 [[CSS|스타일시트 언어]]다. SASS에는 Sass와 SCSS가 있다. 또한 CSS의 확장팩 같은 언어이기 때문에 CSS 파일 그 자체를 SCSS로 확장자만 바꾸어주어도 정상적으로 작동한다. 다만 SASS 자체는 개발자용 언어이기 때문에 웹브라우저가 읽을 수 없다. 따라서 중간에 컴파일러를 거쳐서 CSS로 변환하여 HTML에 연결한다. 비슷한 CSS 전처리기 언어로는 LESS, Stylus 등이 있다. 이 형식을 사용한 파일의 확장자는 .sass, .scss이다. Sass는 SCSS에서 중괄호를 없애서 용량을 줄일 수 있지만 실수로 인해 컴파일 에러가 뜰 확률이 꽤 크다. 따라서 일반적인 교육 사이트에서는 SCSS를 기준으로 설명한다. === SCSS === '''S'''assy '''CSS''' 말그대로 Sass한 [[CSS]]라는 뜻이다. 실제 뜻을 생각해보면 CSS한 Sass가 더 맞는 것 같다. 가장 큰 특징은 기존 Sass의 문법에서, CSS의 원래 문법에서 사용되는 [[중괄호]]를 사용하여 CSS만 알던 사람들이 처음 접해도 직관적으로 의미를 이해할 수가 있다. 단순히 가독성만이 아니라 Sass의 기존문법이 들여쓰기 및 줄바꿈에 의존하는 문법임에 비해, SCSS는 중괄호가 있기에 공백에 의해 컴파일에러가 발생할 확률히 현저히 적다. 따라서 대부분의 사용자들이 SCSS 문법을 사용하여 Sass의 공식 문법으로 사용되고 있다. == 개발 환경 == 여러 편집기와 [[https://sass-lang.com/install|여기]]에 명시된 컴파일러를 통해 사용이 가능하다. 본래 컴파일러가 [[Ruby]]로 되어 있어서 Ruby 인터프리터도 설치해야 했지만, 이후 [[C++]]로 제작된 libsass 컴파일러가 나오면서 한때는 메이저한 컴파일러 자리를 차지했다. [[npm]]에서도 libsass 컴파일러를 패키지 형태로 설치할 수 있는 node-sass가 있어서 한때 CUI 환경에서는 이 방법이 가장 많이 사용되었다. 그러다가 libsass가 2018년 11월 이후 제대로 개발이 되지 않자 [[https://sass-lang.com/blog/libsass-is-deprecated|libsass를 비권장(deprecate)하고]] 대신 [[https://sass-lang.com/dart-sass|Dart Sass]]를 밀고 있다. 많은 웹 관련 툴에서 Sass를 CSS로 컴파일해주는 기능을 제공한다. 주로 설정 화면에서 Sass 컴파일러와 작업 폴더를 지정해 주면 저장할 때마다 컴파일 해 주는 방식이다. [[JetBrains]]의 WebStorm이나 PHPStorm이 이 기능을 지원하고, [[어도비 드림위버]]도 지원한다. [[Visual Studio Code]]에서는 Live Sass Compiler라는 확장 기능을 사용하여 편집기에서 편집하고 저장만 하면 자동으로 CSS로 컴파일해주는 기능도 있다. [[React(라이브러리)|React]]에서는 터미널에서 프로젝트 디렉터리로 들어가 npm install sass 를 입력하면 SCSS 파일을 프로젝트에서 직접 불러올 수 있게 된다. 컴파일을 하면 보통 css 파일과 함께 map 파일을 같이 생성하는데[* 컴파일 할 때 생성하지 않도록 설정할 수 있다.], map 파일이 css 파일과 같은 폴더에 들어 있으면 웹 브라우저 디버그 모드에서 이 map 파일을 인식, 해당 부분이 scss 소스 어디에 있다는 것을 명시해준다. == 기능 == === 일반 기능 === * '''네스팅''' - 계층적으로 상속되는 CSS를 더욱 계층적으로 보이게 만드는 기능이다. 선택자에서 상위 계층을 적던 것을 정리하고 관련 요소들을 그룹으로 묶을 수 있게 되어 더욱 깔끔해진다. '''CSS''' {{{#!syntax css ul { list-style:none; width:1000px; margin:0 auto } ul li { float:left; } ul li a { color:black; padding:20px; display:block; } }}} '''SCSS''' {{{#!syntax css ul { list-style:none; width:1000px; margin:0 auto; li { float:left; a { color:black; padding:20px; display:block; } } } }}} * '''확장''' * '''특수 [[선택자]]''' === SassScript === * '''변수''' - $를 사용하여 변수를 지정한다. 중복된 단어를 변수로 치환하여 유지 보수가 쉬워진다. '''CSS''' {{{#!syntax css .dv1 {width:1000px;margin:0 auto;border:1px solid black} .dv2 {width:200px;border:1px solid black} .dv3 {width:500px;float:left;border:1px solid black} .dv4 {width:700px;position:relative;border:1px solid black} .dv5 {width:100px;position:absolute;border:1px solid black} }}} '''SCSS''' {{{#!syntax css $bLine:1px solid black; /* 여기만 바꾸면 5개의 클래스 값을 전부 바꿀 수 있다. */ .dv1 {width:1000px;margin:0 auto;border:$bLine} .dv2 {width:200px;border:$bLine} .dv3 {width:500px;float:left;border:$bLine} .dv4 {width:700px;position:relative;border:$bLine} .dv5 {width:100px;position:absolute;border:$bLine} }}} * '''연산''' - 값 대신 표현식을 지정할 수 있다. 값의 맥락을 명시할 때에 사용할 수 있다. 다만 상대값(% - px, vh - px 등)을 연산할 수는 없으므로 CSS에서 지원하는 calc() 함수를 써야 하며, 나눗셈의 / 기호 역시 CSS에서 grid-area 속성 등에서 사용하고 있기 때문에 나눗셈을 할 때에도 calc() 함수를 써야 한다. 다만 나눗셈에 쓰이는 calc()는 CSS가 아닌 SASS에서 따로 사용하는 함수이다. '''CSS''' {{{#!syntax css .dv1 {float:left;width:101.11111px;margin-right:10px} }}} '''SCSS''' {{{#!syntax css .dv1 {float:left;width:calc(1000px / 9) - 10;margin-right:10px} }}} * '''함수''' - 동일한 기능을 가진 코드를 그룹화하여 중복을 제거하거나 기능을 명시하여 유지관리에 도움을 준다. mixin과 function이 있는데, 하는 일이 좀 다르다. * @mixin: 함수 안에 들어 있는 구문으로 대체해 준다. 어떻게 보면 문자열 변수와 비슷한 기능을 한다고 볼 수 있다. 불러 쓸 때는 앞에 @include를 붙인다. * @function: 함수 안에 있는 구문으로 계산을 한 뒤, @return 명령어로 특정한 값을 내보낸다. [[프로그래밍 언어]]의 function과 같은 기능을 한다. 불러 쓸 때는 함수명만 쓰면 된다. '''CSS''' {{{#!syntax css .dv1 {width:1000px;border:1px solid black;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)} .dv2 {width:200px;border:1px solid black;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)} .dv3 {width:500px;border:1px solid black;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)} .dv4 {width:700px;border:1px solid black;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)} .dv5 {width:100px;position:absolute;border:1px solid black;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)} }}} '''SCSS''' {{{#!syntax css @mixin centering(){ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) } .dv1 {width:1000px;@include centering()} .dv2 {width:200px;@include centering()} .dv3 {width:500px;@include centering()} .dv4 {width:700px;@include centering()} .dv5 {width:100px;@include centering()} }}} '''CSS''' {{{#!syntax css .dv1 {width:225px} .dv2 {width:525px} .dv3 {width:150px} }}} '''SCSS''' {{{#!syntax css @function width-cal($a, $b){ @return $a * $b; } .dv1 {width:width-cal(900px, 3/12)} .dv2 {width:width-cal(900px, 7/12)} .dv3 {width:width-cal(900px, 2/12)} }}} * '''반복문''' - 비슷한 구문의 반복 작성을 편하게 할 수 있다. '''CSS''' {{{#!syntax css div:nth-child(1) { top: 10px; } div:nth-child(2) { top: 20px; } div:nth-child(3) { top: 30px; } … div:nth-child(60) { top: 600px; } }}} '''SCSS''' {{{#!syntax css @for $i from 1 through 60 { div:nth-child(#{$i}){ top:10px * $i; } } }}} * '''조건문''' - 조건에 따라 속성의 값을 다르게 할 수 있다. '''CSS''' {{{#!syntax css .container *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: 1/1; } .container *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: 1/2; } .container *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: 1/3; } .container *:nth-child(4) { -ms-grid-row: 1; -ms-grid-column: 4; grid-area: 1/4; } .container *:nth-child(5) { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: 2/1; } … .container *:nth-child(60) { -ms-grid-row: 15; -ms-grid-column: 4; grid-area: 15/4; } }}} '''SCSS''' {{{#!syntax css .container{ *{ @for $i from 1 through 60 { &:nth-child(#{$i}){ /* #{}는 숫자를 문자로 변환해준다. 또한 &는 부모를 선택하게 하는 선택자이다. */ @if ($i%4 == 0) { grid-area:#{calc($i / 4)} / 4; } @else { grid-area:#{floor(calc($i / 4)) + 1} / #{$i % 4}; } } } } } }}} * '''List''' - [[파이썬]]의 List, 혹은 [[자바스크립트]]의 배열 같은 기능을 사용할 수 있게 해 준다. '''CSS''' {{{#!syntax css li:nth-child(1) { background-color: red; transform: rotateY(0deg); } li:nth-child(2) { background-color: yellow; transform: rotateY(-90deg); } li:nth-child(3) { background-color: green; transform: rotateY(-180deg); } li:nth-child(4) { background-color: blue; transform: rotateY(-270deg); } }}} '''SCSS''' {{{#!syntax css $bgs : red, yellow, green, blue; @each $it in $bgs { $i: index($bgs, $it); li:nth-child(#{$i}) { background-color: $it; transform: rotateY(($i - 1) * -90deg); } } }}} * '''Vendor Prefix''' - webkit 코드나 ms 코드를 일일이 적지 않아도 webkit이나 IE 등에서 인식할 수 있게 해 준다. '''CSS''' {{{#!syntax css .dv1 { background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0)), to(rgba(255,245,0,.9))); background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(255,245,0,.9)); display: -ms-grid; display: grid; } }}} '''SCSS''' {{{#!syntax css .dv1 { background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(255,245,0,.9)); display: grid; } }}} == 참조 == * [[https://sass-lang.com/guide|SASS 공식 가이드 (영어)]] * [[https://www.w3schools.com/sass|W3 Schools SASS 강좌 (영어)]] * [[https://opentutorials.org/module/237/2488|생활코딩 SASS 강좌 (한국어)]] [[분류:스타일 시트 언어]][[분류:파일 형식]]캡챠되돌리기