반응형

 

 

Sass

Syntactically awesome stylesheets

 

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

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

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

 

 

 

 

 

주석(Comment)

 

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

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

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

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

 

 

인라인 주석

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

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

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

 

SASS '인라인 주석' 문법 코드 입니다.
//인라인 주석은 컴파일 되지 않습니다.

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

 

CSS '인라인 주석' 컴파일 결과 코드 입니다.
.btn {
  color: #000;
}
.btn.active {
  color: coral;
}

 

 

블록 주석

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

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

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

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

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

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

 

SASS 'nested', 'expanded' 주석 처리 문법 코드 입니다.
/* 블록 주석은
    컴파일 스타일에 따라 CSS에 따라 다르게 표현되며,    
    'neseted', 'expnaded' 컴파일되는 주석이 동일합니다.
*/

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

 

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

 

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

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

 

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

 

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

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

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

 

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

 

 

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

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

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

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

 

SASS '주석에 변수 넣기' 문법 코드 입니다.
$author_n1: 'KKS';
$author_n2: 'LSJ';
$author_n3: 'YSW';
/* Malgun Communication Web Standard Team Author #{$author_n1}, #{$author_n2}, #{$author_n3} */

 

CSS '주석에 변수 넣기' 컴파일 결과 코드 입니다.
/* 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';) 할 때 /를 허용하기 때문에 괄호( )로 감싸지 않는다면,

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

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

 

SASS '사칙 연산' 문법 코드 입니다.
.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(숫자함수) - 소수점 아래는 반올림
}

 

CSS '사칙 연산' 컴파일 결과 코드 입니다.
.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 : 부정(논리 부정)

 

SASS '비교 연산, 논리 연산' 문법 코드 입니다.
$width: 50px;

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

 

CSS '비교 연산, 논리 연산' 컴파일 결과 코드 입니다.
.box {
  height: 200px;
}

 

 

 

 

 

마치며...

 

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

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

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

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

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

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

감사합니다.

 

 

반응형

+ Recent posts