개발/SASS

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

주석 처리 SASS 파일 내부에 주석을 처리하는 방법은 두 종류가 있습니다. 일반적으로 CSS와 동일하게 이런 방식으로 처리하는 방법과 이런 방식으로 처리하는 방법이 있습니다. 결론적으로 말하면 첫번째 방식은 SASS 컴파일의 결과물인 CSS 파일에도 그대로 반응되는 반면, 두번째 방법은 CSS 파일에 전혀 나타나질 않습니다. 그렇기 때문에 첫번째 방식은 CSS 파일에 저작권 또는 CSS 파일 버전 등을 표시할 때 사용하고, 두번째 방식은 SASS의 속성을 지정하여 유지보수 할 때 편합니다. 왜냐하면 CSS 파일 내부에 텍스트가 많으면 많을수록 브라우저가 사이트를 렌더링 하는 속도가 더뎌지게 될 것이고, 또한 CSS 속성에 대해서 굳이 개발자 이외의 사용자들에게 보여 줄 필요가 없다고 보기 때문입니다. ..

개발/SASS

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

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

개발/SASS

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

Sass 강의 변수(Variables) 프로그래밍 언어에서 가장 많이 사용되는 부분이 바로 변수입니다. 변수를 이용하면 변수값만 변경함으로써 결과를 다르게 만들 수 있듯이, SASS에서도 반복적으로 많이 사용되는 부분, 예를 들어 font 모양이나 색상들을 변수로 지정해 놓고 이 변수값만 변경해 주면 CSS를 정말 간단하게 제어할 수 있습니다. SASS에서는 변수를 정의할 때 $ 기호를 사용합니다. 변수의 이름은 사용자에 의해서 지정할 수 있지만, 속성은 CSS의 속성을 지정해 줘야 합니다. 밑에 예제를 보도록 하겠습니다. 위 예시를 보면 $font_stack 이라는 변수와 $primary_color 라는 변수가 있습니다.각 변수들에는 CSS의 속성을 적용했습니다. $font_stack에는 Helveti..

개발/SASS

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

Sass 강의 Sass는 Syntactically Awesome Style Sheet라는 단어의 줄임말이며, 한글로 번역하자면 “문장 구성적으로 끝내주는 스타일 시트”라는 의미를 지닌다고 볼 수 있습니다. "문장 구성적으로 끝내준다?"라는 의미는 사스를 학습하게 되면서 무슨 말인지 알게 될 것입니다.웹사이트를 디자인할 때 가장 필수 요소 중 하나가 바로 스타일시트인데요.이 스타일시트는 생각보다 단순하지만 웹사이트 규모가 커지게 되면, 소위 '노가다'하는 느낌이 들며, 심지어 코드 길이가 1000줄이 넘어가면 뭐가 뭔지 알 수 없는 경우도 생겨 버립니다. 하지만 사스를 활용하면 스타일시트 작업이 마치 프로그래밍하는 것처럼 체계적이고, 구조적으로 개발할 수 있게 됩니다. 사스에 대한 소개는 간단하게 여기서 ..