Sass

Syntactically awesome stylesheets

Sass는 CSS의 부족한 부분을 채워주기 위한 CSS 확장 언어로서 강력한 도구입니다.

Sass는 중첩, 변수, 믹스인, 함수 등 여러 강력한 기능들이 있습니다.

그중 오늘은 Sass 주석과 연산자에 대한 문법을 다루어 보겠습니다.

주석(Comment)

Sass는 CSS 표준 문법과 동일하게 // 인라인(한 줄) 주석과 /* */ 블록(여러 줄) 주석을 기능을 지원하고 있습니다.

주석은 단지 코드를 실행하지 않는 용도가 아닌, 다양한  기능으로 사용되기 때문에 매우 중요한 역할을 합니다.

주석의 역할은 아래와 같습니다.

• ✔ 특정 기능을 실행시키지 않기 위해서 사용합니다.
• ✔ 특정 기능에  설명을 남겨두기 위해서 사용합니다.
• ✔ 디버깅 또는 특정 기능만 수행하기 위해서 사용합니다.

인라인 주석

인라인 주석은 // 입니다.

인라인 주석은 컴파일된 CSS 파일에 출력되지 않습니다.

그렇기 때문에 웹퍼블리싱 과정에서 사용되는 class 또는 id 용도에 대한 설명을 자유롭게 작성할 수 있습니다.

//인라인 주석은 컴파일 되지 않습니다.

.btn {
    color: #000;
    &.active {
        color:coral;
    }
}

.btn {
  color: #000;
}
.btn.active {
  color: coral;
}

블록 주석

블록 주석은 /*    */ 입니다.

블록 주석은 컴파일하는 스타일에 따라 다르게 나타납니다.

'nested', 'expanded'는 주석 그대로 컴파일되며,  'compact'는 여러 줄로 주석을 작성하였더라도 주석이 한 줄로 컴파일됩니다.

'compressed'는 인라인 주석처럼 컴파일되면 CSS 파일에 주석이 노출되지 않습니다.

하지만 'compressed' 스타일을 사용하더라도 블록 주석을 노출할 수 있습니다.

/*!      */ 문법으로 작성하면 주석이 삭제되지 않고 노출됩니다.

/* 블록 주석은
    컴파일 스타일에 따라 CSS에 따라 다르게 표현되며,    
    'neseted', 'expnaded' 컴파일되는 주석이 동일합니다.
*/

.btn {
    color: #000;
    &.active {
        color:coral;
    }
}

/* 블록 주석은
    컴파일 스타일에 따라 CSS에 따라 다르게 표현되며,    
    'neseted', 'expnaded' 컴파일되는 주석이 동일합니다.
*/
.btn {
  color: #000;
}
.btn.active {
  color: coral;
}

/* 블록 주석은
    컴파일 스타일에 따라 CSS에 따라 다르게 표현되며,
    'compact' 주석의 컴파일된 CSS 파일입니다.
*/

.btn {
    color: #000;
    &.active {
        color:coral;
    }
}

/* 블록 주석은 컴파일 스타일에 따라 CSS에 따라 다르게 표현되며, 'compact' 주석의 컴파일된 CSS 파일입니다.
*/
.btn { color: #000; }
.btn.active { color: coral; }

/* 블록 주석은
    컴파일 스타일에 따라 CSS에 따라 다르게 표현되며,
    'compressed' 주석은 CSS 파일에서 보여지지 않습니다.
*/

/*! 'compressed' 주석을 컴파일된 CSS 파일에에서 내용을 보고 싶다면,
    !를 사용하면 됩니다.
*/

.btn {
    color: #000;
    &.active {
        color:coral;
    }
}

/*! 'compressed' 주석을 컴파일된 CSS 파일에에서 내용을 보고 싶다면, !를 사용하면 됩니다.
*/.btn{color:#000}.btn.active{color:coral}

주석에 변수 넣어서 사용하기 

Sass의 Sass Script는 자바스크립트처럼 변수를 사용할 수 있습니다.

jQuery처럼 '$'를 넣어 변수를 설정할 수 있습니다.

Sass Script 변수에 대해서는 다음번에 자세하게 다루어 보겠습니다. 

$author_n1: 'KKS';
$author_n2: 'LSJ';
$author_n3: 'YSW';
/* Malgun Communication Web Standard Team Author #{$author_n1}, #{$author_n2}, #{$author_n3} */

/* Malgun Communication Web Standard Team Author KKS, LSJ, YSW */

연산자(Operations)

Sass는 연산 기능을 지원하고 있습니다.

연산자의 종류는 사칙 연산자,  비교 연산자, 논리 연산자가 있습니다.

사칙 연산 

일반적으로 Sass에서 사칙 연산은 절대값인 px 단위로 연산을 하지만, 모바일 또는 반응형 웹을 웹퍼블리싱 할 때에는 상대값인 %, em, vw, vh 단위를 하기도 합니다.

사칙연산에는 +(더하기), -(빼기), *(곱하기), /(나누기)가 있습니다.

그리고 사칙연산은 CSS calc(); 로 대체하여 웹퍼블리싱이 가능합니다.

CSS calc(); 를 모르시는 분들은 블로그에 포스팅되어 있으니, 참조 부탁드립니다.

☆ 나누기 연산 주의사항 : CSS를 축약(ex : font: 15px / 21px 'MalgunGothic';) 할 때 /를 허용하기 때문에 괄호( )로 감싸지 않는다면,

연산이 되지 않고 연산자만 컴파일됩니다.

나누기 연산을 할 때는 꼭 ( )괄호로 감싸야합니다.    

.section {
    width: 500px + 500px;   // 더하기
    height: 300px - 100px;  // 빼기
    margin: 10px * 2; // 곱하기
    padding: (10px / 2); // 나누기
    font-size: (4px + 20px) / 2; //더하기, 곱하기 연산 같이 사용하기

    //숫자함수 + 사칙연산
    position: absolute;
    top: floor(20px / 3); // floor(숫자함수) - 소수점 아래는 버림
    right: ceil(20px / 3); // floor(숫자함수) - 소수점 아래는 올림
    bottom: round(20px / 3); // floor(숫자함수) - 소수점 아래는 반올림
}

.section {
  width: 1000px;
  height: 200px;
  margin: 20px;
  padding: 5px;
  font-size: 12px;
  position: absolute;
  top: 6px;
  right: 7px;
  bottom: 7px;
}

비교 연산

Sass에서 비교 연산은 변수값 또는 논리 관계를 비교하는 연산자입니다.

자세한 예제는 'Sass 조건문' 포스팅할 때 자세하게 보여드릴 것을 약속드리며, 아래 논리 연산과 결합하여 간단한 예제로 보여드리겠습니다. 

비교 연산자의 종류는 아래와 같습니다.

• ✔ < : ~ 보다 작은
• ✔ > : ~ 보다 큰
• ✔ <= : ~ 보다 작거나 같은
• ✔ >= : ~ 보다 크거나 같은
• ✔ == : ~ 과 같은 경우
• ✔ != : ~ 과 다른 경우

논리 연산

Sass에서 논리 연산은 논리곱(AND), 논리합(OR), 논리 부정(NOT)의 기호 논리학의 규칙에 따른 연산입니다.

자바스크립트의 논리 연산자인 논리곱(&&), 논리합(||), 논리 부정(!)과 같다고 생각하시면 됩니다.

자세한 예제는 'Sass 조건문' 포스팅할 때 자세하게 다루겠습니다. 

논리 연산자의 종류는 아래와 같습니다.

• ✔ and : 그리고(논리곱)
• ✔ or :  또는(논리합)
• ✔ not : 부정(논리 부정)

$width: 50px;

.box {
    @if not ($width > 100px) {
        height: 200px;
    }
}

.box {
  height: 200px;
}

마치며...

이번 포스팅은 @mixin, @extend를 할 예정이었지만 관련 내용들을 깊게 다루기 위해서는 변수와 조건문을 먼저 알아야 할 것 같아,

변수와 조건문의 기초가 되는 주석과 연산자에 대해서 먼저 다루어 보았습니다.

다음은 Sass 변수와 연산자에 대해서 알아보도록 하겠습니다.

처음 Sass 포스팅을 시작할 때는 간단하게 3편의 글을 작성해서 마무리하려고 했지만,

포스팅하다 보니 욕심이 커져 내용이 좀 더 깊게 들어가면서 여러 편에 걸쳐 포스팅을 해야 할 것 같습니다.

기대해주시고, 재미있게 보시면서 공부해보시길 바랍니다.

감사합니다.

Sass

Syntactically awesome stylesheets

Sass는 CSS의 부족한 부분을 채워주기 위한 CSS 확장 언어로서 강력한 도구입니다.

Sass는 중첩, 변수, 믹스인, 함수 등 여러 강력한 기능들이 있습니다.

그중 오늘은 CSS 확장 언어로서의 기본이라고 생각되는 중첩과 선택자에 대해 다루어 보겠습니다.

중첩(Nesting)

Sass는 중첩(Nesting) 기능을 제공하고 있습니다.

상위 선택자의 반복을 피해서 편리하고 복잡한 구조를 작성할 수 있습니다.

이것은 선택자나 속성의 관계를 중첩 형태로 표현된 문법입니다. 

여기에는 선택자를 중첩하는 '규칙 중첩'과 CSS 속성을 중첩하는 '속성 중첩' 두 가지 문법으로 구분할 수 있습니다.

규칙 중첩

CSS 규칙을 중첩하여 작성하는 문법입니다.

규칙 중첩은 부모 선택자를 계속 반복하여 작성하지 않게 해 줍니다.

특히 복잡한 구조 형태의 웹퍼블리싱 작업에서 상위 선택자를 많이 상속해야 할 경우 CSS 규칙을 간단하게 작성할 수 있으며,

그 구조를 한눈에 볼 수 있게 모듈화 할 수 있습니다.

그렇다고 규칙 중첩을 무분별하게 사용하는 것은 권장하지 않습니다.

규칙 중첩에서 상위 선택자를 3 Depth 이상 사용할 경우, 재활용성이 제한적입니다.

이럴 경우에는 별개의 클래스를 만들어 사용하는 것이 좋습니다.  

#gnb {
    background-color: #fff;
    width: 200px;
    ul {
        display: flex;
        color: #111;
    }
}

#gnb {
  background-color: #fff;
  width: 200px;
}
#gnb ul {
  display: flex;
  color: #111;
}

속성 중첩

CSS의 공통된 네임스페이스 속성을 중첩하는 문법입니다.

예를 들어 'font-' 시작하는 네임스페이스 속성은 아래와 같습니다.

• ✔ font-family
• ✔ font-size
• ✔ font-style
• ✔ font-weight

위와 같이 CSS 속성 앞에 접두사로 'font-'를 반복해서 썼다면, 속성 중첩 문법을 이용하여 반복하여 작성하지 않아도 됩니다.

h1 {
    font: {
        family: 'Malgun Gothic';
        size: 25px;
        style: normal;
        weight: bold;
    }
    line-height: 1;
}

h1 {
  font-family: 'Malgun Gothic';
  font-size: 25px;
  font-style: normal;
  font-weight: bold;
  line-height: 1;
}

특수 선택자

Sass는 CSS 문법과 동일한 선택자 외에 특수 선택자 2가지 기능을 제공합니다. 

중첩 안에서 상위 엘리먼트를 참조하는 '부모 참조 선택자'와 @extend로 호출하는 '플레이스홀더 선택자'입니다.

부모 참조 선택자

중첩 안에서 '&(Ampersand)'를 사용하여 부모 엘리먼트를 참조할 수 있는 문법입니다.

가상 클래스, 가상 요소, 속성 선택자, id 또는 class 셀렉터를 사용할 때 편리하며, 두 가지 사용방법이 있습니다.

• ✔ 부모 참조 선택자를 부모 엘리먼트와 결합하여 사용하는 방법입니다.
• ✔ 부모 참조 선택자를 하위 자식 선택자로 이동하여 사용하는 방법입니다.

.btn {
    color: #000;
    &.active {
        color:coral;
    }
}

.list_gnb {
    li {
        &:first-child {
            margin-left: 0;
        }
    }
}

div {
    &[class^='section_'] {
        background-color: #ccc;
    }
}

.btn {
  color: #000;
}
.btn.active {
  color: coral;
}

.list_gnb li:first-child {
  margin-left: 0;
}

div[class^='section_'] {
  background-color: #ccc;
}

.list_gnb {
    li {
        &:first-child {
            margin-left: 0;
        }
        div.section & {
            margin-left: 20px;
        }
    }
}

.list_gnb li:first-child {
  margin-left: 0;
}
div.section .list_gnb li {
  margin-left: 20px;
}

플레이스홀더 선택자

@extend로 호출하며 '%(Percent)'를 사용하여, 함수나 변수를 사용하듯이 내가 원하는 요소에 불러와 사용할 수 있습니다.

#gnb {
    background-color: #fff;
    width: 200px;
    ul%box-type {
        display: flex;
        color: #111;
    }
}

.list_notice {
    @extend %box-type;
}

h1, %title-type {
    color: #000;
}

h2 {
    @extend %title-type; 
}

#gnb {
  background-color: #fff;
  width: 200px;
}
#gnb ul.list_notice {
  display: flex;
  color: #111;
}

h1, h2 {
  color: #000;
}

마치며...

이번 포스팅은 Sass 문법에서 중첩(Nesting), 특수 선택자에 대하여 알아보았습니다.

다음에는 Sass 문법 중 믹스인, 불러오기 등에 대해서 포스팅할 생각입니다.

맑은 커뮤니케이션 퍼블리셔들을 위한 공간이지만, 동종업에서 일하시는 모든 웹퍼블리셔 분들에게 조금이나마 도움이 되었으면 합니다.

감사합니다.

Sass

Syntactically awesome stylesheets

Sass의 사전전 의미는 종속형 시트(CSS)로 해석 및 컴파일되는 스크립트 언어입니다.
SassScript는 그 자체로 스크립트 언어이며, CSS pre-processor(전처리기)로서 CSS의 한계점을 극복하기 위한 CSS언어의 확장 언어입니다.
파일 확장자는 .scss 이며, SCSS는 2010년 5월 버전 3으로 업그레이드하면서 갖춰진 새로운 문법 체계입니다.
SCSS는 기존 Sass 문법의 기능을 보다 강화하고, CSS 문법은 그대로 살렸다는 의도를 함께 담은 'Sass CSS'로도 해석할 수 있습니다.
Sass의 공식 구현채는 오픈 소스이며, 루비로 코딩되어 있습니다.
또한 Sass는 중첩(Nesting), 변수(Variables), 믹스인(Mixin), 불러오기(Import), 셀렉터 상속의 메커니즘을 제공합니다.

Sass(SCSS) 장점과 단점

Sass에 대해 본격적으로 다루기 전에 솔직한 Sass에 대한 솔직한 저의 생각을 먼저 작성하겠습니다.
Sass는 볼륨이 큰 웹퍼블리싱 작업에서 ¹mixin의 활용과, ²function 및 조건문 활용, ³중첩(Nesting)의 사용으로 모듈화 하기가 좋다고 말하며, CSS로 직접 코딩하는
것보다 효율적이라 장점이라고 말하는 사람들이 많습니다.
그러나 저는 위의 Sass에 장점에 대한 결론은 급하게 내린 섣부른 판단이라 생각됩니다.

¹ 저는 mixin의 무분별한 활용을 선호하지 않습니다.
이유는 Sass파일을 작업하는 웹퍼블리셔 입장에서만 편리한 기능이기 때문입니다.
실제 브라우저에서 실행시키기 위해서는 Sass파일이 아닌 컴파일(compiled)된 CSS 파일이 필요합니다.
컴파일(compiled)된 CSS 파일은 mixin을 통해 의미 없이 남발되어 반복하여 쓰인 CSS속성으로 코드가 지저분하며, 이로 인해 파일이 무거워져 웹사이트의 속도가
저하되게 하는 원인을 제공하기 때문입니다.
저는 mixin을 사용하기보다는 mixin에 사용할 CSS 속성들을 공통 클래스(class)로 만드는 것이 사용하기도 편리하고,
의미 없는 CSS의 남발이 아닌 진정한 모듈화라고 생각합니다.
반복되는 CSS속성이 많을 때 mixin을 쓰는 것이 아니라 클래스(class)를 쓰는 것이 맞다고 생각됩니다.

² function 및 조건문 활용을 통한 웹퍼블리싱 화면 구현은 많지 않으며, 필요할 경우에는 CSS Selector Level 1~3을 통해서 대부분 구현이 모두 가능하고,
현재 W3C에서 개발 중인 CSS Selector Level 4가 실무에서 쓰이게 된다면 어떻게 될까요?
다음에 기회가 된다면, CSS Selector Level 4에 대해서 포스팅할 수 있도록 하겠습니다.

³ 중첩(Nesting)의 기능은 웹퍼블리셔가 작업하는 Sass파일에서만 모듈화 되어 보이고 가독성 있어 보일 뿐입니다.
정작 실제 프로젝트에 반영되는 컴파일(compiled)된 CSS 파일은 Sass의 중첩(Nesting)으로 인해서 부모 선택자를 참조하기 때문에 재활용해서 사용해야 하는
클래스(class) 사용의 확장성 부분에서 제한적입니다.

위 내용의 이유로 저는 개인적으로 고객사가 먼저 요청하지 않는다면 Sass를 사용하지 않고, CSS 파일에서 직접 작업하는 것을 선호합니다.
편리함을 위해 만들어진 언어인 Sass가 내세우는 최고의 장점들이 오히려 단점으로 바뀐다면 그 기능들을 사용하는 의미가 없기 때문에 CSS파일에서 코딩하는 것과
동일하다고 생각합니다.
저는 Sass의 단점을 부각하기 위해서 포스팅하는 것이 아닙니다. 그럼 애초에 Sass에 사용방법을 포스팅할 생각도 하지 않았겠죠?
Sass의 장점들도 많이 있습니다.
단지 무조건 앞뒤 없이 Sass가 장점만을 가지고 있지 않다는 의견을 드리고 싶었습니다.
저는 새로운 것에 대해 부정적인 시각으로 먼저 바라보는 것이 아닌, 새로운 기술을 프로젝트에서 여러 번 사용하며, 비교분석을 통해 솔직하게 포스팅하고 싶습니다.
이제 개인적인 견해는 뒤로하고, Sass에 대해 여러 편의 포스팅을 통해서 알아보겠습니다.

Sass(SCSS) 설치방법

Sass는 Node-sass, Gulp-sass, Ruby-sass를 이용한 3가지입니다.
Node-sass는 node.js 버전에 의존적이기 때문에 Node가 업데이트될 경우 Node-sass 오류가 발생하며, Node-sass를 지우고 업데이트 버전을
새로 설치해야 하기 때문에 불편한 문제가 있다고 생각합니다.
그렇기에 필자는 Ruby-sass를 이용한 sass를 포스팅하고자 합니다.
Ruby-sass를 선택한 이유는, 위에서도 언급했지만 sass가 Ruby로 코딩되었기 때문입니다.

Ⅰ.  Ruby  설치하기

Ruby Installer 사이트에 접속 후  Ruby를 설치합니다.
Ruby 다운로드 : https://rubyinstaller.org/

Ⅱ. Ruby Sass 컴파일러 설치하기

cmd(윈도키+R키) 창을 열고, 아래와 같이 Ruby Sass 컴파일러 설치 명령어를 입력합니다.

gem install sass

Ruby를 이용한 Sass(SCSS) 컴파일 실행하기

Sass(SCSS) 파일은 웹브라우저에서 실행되지 않기 때문에 컴파일 과정을 거쳐서 CSS파일로 변환을 해주어야 합니다.

Ⅰ.  [--watch] : 컴파일 자동실행

--watch : 이 옵션을 통해서 Sass 파일을 감시하다가 해당 파일이 수정되면 자동으로 CSS 파일로 컴파일하여 변환해 줍니다.
cmd(커맨드) 라인에 아래와 같이 명령어를 실행시켜 줍니다.

sass --watch scss파일경로:css컴파일경로

Ⅱ.  [--style] : 컴파일 CSS 스타일 옵션

--style : 사용자의 취향에 따라  :nested, :expanded, :compact, :compressed 4가지의 컴파일 CSS 스타일을 설정할 수 있습니다. 
cmd(커맨드) 라인에 아래와 같이 명령어를 실행시켜 줍니다.

sass --watch --style 스타일옵션 scss파일경로:css컴파일경로

• ✔ :nested : Sass의 기본 컴파일 스타일로, 각 속성은 한 줄에 작성하고 문서의 규칙은 중첩 정도에 따라 들여 쓰기 합니다.
• :nested 옵션 명령어

• sass --watch --style nested scss파일경로:css컴파일경로

• :nested 컴파일 결과

• #gnb {
    background-color: #fff;
    width: 200px; }
    #gnb ul {
      display: flex;
      color: #111; }

• ✔ :expanded : CSS 속성은 클래스 안에서 들여쓰기하며 각 한 줄씩 작성하고, 클래스 기본 규칙은 들여쓰기하지 않습니다.
• :expanded 옵션 명령어

• sass --watch --style expanded scss파일경로:css컴파일경로

• :expanded 컴파일 결과

• #gnb {
    background-color: #fff;
    width: 200px;
  }
  #gnb ul {
    display: flex;
    color: #111;
  }

• ✔ :compact : CSS 클래스를 한 줄에 나열하며, 클래스에 속한 모든 속성도 같은 줄에 작성합니다.
• :compact 옵션 명령어

• sass --watch --style compact scss파일경로:css컴파일경로

• :compact 컴파일 결과

• #gnb { background-color: #fff; width: 200px; }
  #gnb ul { display: flex; color: #111; }

• ✔ :compressed : 압축한 CSS 형태로, 가독성을 고려하지 않고 모든 공백을 삭제하여 컴파일됩니다.
• :compressed 옵션 명령어

• sass --watch --style compressed scss파일경로:css컴파일경로

• :compressed 컴파일 결과

• #gnb{background-color:#fff;width:200px}#gnb ul{display:flex;color:#111}

Ⅲ.  [--sourcemap] : 코드 맵핑

--sourcemap : CSS와 mapping 되는 Sass의 정보를 알려주는 기본 옵션입니다.
컴파일되면 [CSS 파일명]. map 파일이 자동생성됩니다.
컴파일된 CSS 파일 하단에 mapping 된 파일의 정보를 나타내는 주석이 자동으로 생성됩니다.
mapping 주석 내용은 아래와 같습니다.

/*# sourceMappingURL=layout.css.map */

--sourcemap 옵션 제거방법

sass --watch --sourcemap=none scss파일경로:css컴파일경로

Ⅳ.  [--cache] : 캐시

--cache : Sass 코딩 및 Import 파일의 처리속도를 빠르게 할 수 있도록 캐시파일을 보관하는 기본 옵션입니다. 
컴파일되면. sass-cache 폴더가 자동 생성되며 관련 내용이 캐시파일에 저장됩니다.

--cache 옵션 제거방법

sass --watch --no-cache scss파일경로:css컴파일경로

마치며

Sass의 장점과 단점에 대한 저의 생각을 포스팅하기 전에 많은 고민을 했습니다.
Sass를 처음 접하는 입장에서는, 저의 Sass의 단점에 글을 보고 Sass에 대해서 별로 안 좋다고 생각하는 하는 선입견을 가질까 봐 불안했기 때문입니다.
제가 하고자 하는 말은 Sass를 사용하던지, CSS 하드코딩을 하던지 상황에 맞게 적절하게 사용하면 된다는 것을 알려드리고 싶었습니다.
제 글을 읽는 분들은 무조건 Sass가 최고! CSS 하드코딩이 최고!
라는 무조건적인 사고에 빠지지 않았으면 하는 마음에서 Sass의 장점과 단점에 대해서 포스팅하였습니다.
장점과 단점에 대한 저의 우려는 그만 각설하고,
이번에 작성한 Sass 소개 및 설치 방법과 컴파일 방법에 대한 내용이 Sass를 처음 접하는 웹퍼블리셔 분들에게 길잡이가 되었으면 합니다.
다음 Sass 포스팅은 중첩(Nesting), 변수(Variables), 믹스인(Mixin), 불러오기(Import), 실렉터 상속 문법에 대해서 1~2편의 글을 작성해 보겠습니다.
감사합니다.