SCSS

CSS는 분명 쉽고 재밌지만, 작업이 고도화될수록 불편함도 같이 커집니다.불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트의 규모가 커질수록 CSS 작업이 불편하게 다가옵니다.하지만 웹에서는 표준 CSS만 동작할

이번 포스팅에서 SCSS의 주석과 중첩에 대해 알아보자.CSS 주석은 /\* ... \*/ 입니다.Sass(SCSS)는 JavaScript처럼 두 가지 스타일의 주석을 사용합니다.Sass의 경우 컴파일되는 여러 줄 주석을 사용할 때 각 줄 앞에 \*을 붙여야 하고, 중

이번 포스팅에서 SCSS의 변수, 데이터, 연산자에 대해 알아보자.SCSS에서도 반복적으로 사용되는 값을 변수로 지정할 수 있습니다.변수 이름 앞에는 항상 $를 붙입니다.변수는 사용 가능한 유효범위가 있습니다. 선언된 블록({}) 내에서만 유효범위를 가집니다.변수 $h

이번 포스팅에서는 SCSS의 재활용에 대하여 알아보자.Sass의 Mixins는 스타일 시트 전체에서 재사용 할 CSS 선언 그룹 을 정의 가능한 기능입니다.선언하기(@mixin)와 포함하기(@include) 규칙을 통해 만들어서(선언), 사용(포함)하는 것 입니다.기본

이번 포스팅에서는 SCSS의 확장에 대하여 알아보자.특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우가 종종 있습니다.이럴 경우 선택자의 확장 기능을 사용할 수 있습니다.Sass는 ‘플레이스홀더 선택자 placeholder selector’라는 특수한 형태의

이번 포스팅에서는 SCSS의 함수에 대하여 알아보자.Sass 역시 함수를 정의하여 사용할 수 있습니다.함수와 Mixins은 거의 유사하지만 반환되는 내용이 다릅니다.Mixin은 지정한 스타일을 반환하는 반면, 함수는 보통 연산된 특정 값을 @return 지시어를 통해

이번 포스팅에서는 SCSS의 조건과 반복에 대하여 알아보자.

이번 포스팅에서는 SCSS의 import와 모듈에 대하여 알아보자.CSS에서 @import로 다른 파일을 연결시킬 수 있습니다. SASS에서도 @import를 사용할 수 있는데, CSS의 @import와는 문법이나 작동 방식이 다릅니다.주의할 점은 Sass @impor

이번 포스팅에서는 SCSS의 내장 모듈에 대하여 알아보자.Sass에서 기본적으로 제공하는 내장 모듈에는 많은 종류가 있습니다.Sass Built-in Functions에서 모든 내장 모듈을 확인할 수 있습니다.요소를 더 어두운색으로 만드는 함수이다.요소를 더 밝은색으로