[3강] 효율적인 CSS작업을 위한 SASS 강의

Sass 강의

CSS 확장(CSS Extensions)

앞에서 Nested Rules라고 중첩하는 방법에 대해서 다뤄봤는데요. 다시 한번 설명하면, 중첩이란 하나의 선택자의 하위 선택자 또는 자식 선택자가 있는 경우 중첩을 활용하면, 적은 코딩으로 효율적이게 각 선택자에 속성을 지정해 줄 수 있습니다. 특히 사이트가 복잡해지기 시작하면, 하위 또는 자식 선택자들이 상당히 많아지게 되며, 각각의 하위 또는 자식 선택자를 지정하기 위해 부모 선택자까지 전부 CSS 코드에 넣기 시작하면 정말 코드가 복잡해집니다. 하지만 중첩을 이용하면 각 선택자들은 한 번만 입력하면 모든 것이 해결되는 아주 편리한 기능입니다.

 

CSS 확장에는 중첩뿐만 아니라 태그 선택자와 연계된 클래스 또는 아이디 선택자끼리 쉽게 묶어주는 기능도 있습니다. 수도선택자(Pseudo selector)를 지정할 경우에 편리합니다. 수도 선택자는 단독으로 사용할 수는 없고, 기존 선택자의 보조 역할을 하는 선택자인데요. 수도 선택자에는 :hover, :visited, :active, :link와 같은 하이퍼 링크에 효과를 주는 것들과 :first-child, :last-child, :nth-child와 같이 li 또는 tr, td 태그들의 자식 선택자에 특별한 속성을 지정할 대 사용되는 선택자들을 말합니다. 그 외 ::after, ::before와 같은 특별한 기능을 하는 선택자도 있습니다. 이 경우 & 이라는 기호를 이용해서 처리를 합니다.

 

CSS 확장에는 CSS 속성 중에 동일한 단어가 들어가 있는 속성들, 예를 들어 font-family, font-weight 들과 같이 동일한 단어 “font”가 들어가 있는 부분까지 확장 속성 즉 중첩을 이용하면 쉽게 처리할 수 있습니다. 이런 것 들 중에는 background도 있고, border, padding, margin 등 다양한 선택자들이 있습니다.

설명하기 쉽게 예제로 진행해보도록 하겠습니다.

위에 파일은 HTML5로 마크업된 코드입니다.

사실 HTML5로 구조만 잡은 것이기 때문에, 디자인은 CSS로 작업을 해야 합니다. 이제 SASS를 통해 디자인을 적용시켜보도록 하겠습니다.

맨 위에 색상 부분은 변수를 이용하여 지정한 것을 알 수 있습니다. 이렇게 변수로 고유의 색상을 지정해 두면 16진수를 이용하여 색을 표현하는 것보다 훨씬 직관적으로 코드를 처리할 수 있습니다. 

또한 하나는 font, 하나는 border 부분이 있는데 이렇게 선택자의 이름과 더불어 별도의 속성이 들어가는 부분은

와 같이 처리하면 아주 쉽게 처리할 수 있습니다.

가장 인상깊게 봐야되는 곳은 rgba 속성을 변수를 사용해서 CSS의 속성을 확장하는 방법입니다.

CSS3에서는 rgba라는 색상을 적용해 줄 수 있다는 것은 다들 알고 있을껍니다.

R - Red

G - Green

B - Blue

라는 3원색을 나타내고, A는 Alpha 투명도를 나타냅니다.

일반적으로 CSS3에서 rgba의 속성을 나타내기 위해서는 색상 코드 값 + 투명도를 나타내는데, 색상 코드값은 0에서 255까지의 개별 색상을 적용해 줘야 합니다.

검정색을 나타내기 위해서는 (0,0,0)이라는 색상값을, 하얀색은 (255,255,255) 값으로 나타냅니다. 따라서 별도의 색상, 예를 들어 연한 파란색을 나타내기 위해서는 별도의 색상 코드를 보거나, 포토샵을 이용하거나, 크롬 플러그인들을 이용해서 값을 찾아야 합니다. 코드를 보면 색상은 16진수를 이용해서 값이 #009ac8;이라고 되어 있는데, rgba로 변환하기 위해서는 rgb에 해당하는 값을 별도로 찾고 투명도를 줘야 했지만, SASS에서는 색상이 변수로 지정되었다면, 변수값을 넣고 투명도를 지정하게 되면, 최종적인 CSS 파일에는 rgba(0,152,200,0.5); 이렇게 변환됩니다. 

따라서 변수에서 16진수로 정의된 값을 별도의 변환 절차 없이 처리할 수 있습니다.

SASS 파일을 컴파일하면 아래와 같은 CSS 코드가 나오게 됩니다.

결과물

직관적이고, 매우 간결한 코드로 컴파일 됐음을 확인할 수 있습니다.

중첩을 사용해서 CSS 파일을 작업하는 것이 얼마나 편리하게 CSS 파일을 만들 수있는지 알 수 있을 겁니다.

타이핑 수도 줄어들었지만, CSS 표현이 정말 정확하게 정의된 것을 알 수 있습니다.

다음 강의에서는 SASS에서 주석 처리를 하는 방법과 변수를 좀 더 프로그래밍적으로 처리하는 방법에 대해서 다뤄보도록 하겠습니다.