Sass

Sass(Syntactically Awesome StyleSheets)

Sass 는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다.

Sass 가 주는 유용한 도구와 기능들

• 변수의 사용
• 조건문과 반복문
• Import
• Nesting
• Mixin
• Extend/Inheritance

기존 CSS 와 비교해서 Sass 는 아래와 같은 장점이 있다.

• CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다.
• 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다.
• CSS에는 존재하지 않는 Mixin 등의 강력한 기능을 활용하여 CSS 유지보수 편의성을 큰 폭으로 향상시킬 수 있다.

install

브라우저는 sass 문법을 모르기때문에 Sass 파일을 css 로 컴파일해야한다. 따라서 sass 환경의 설치가 필요하다.

$ npm install -g sass

command

version

$ sass --version

트랜스파일링

sass-project 디렉터리를 생성하고 트랜스파일링할 파일을 생성되어있다면

해당파일경로에서 생성될 css 파일의 경로를 지정하면된다.

$ cd sass-project

## foo.scss를 트랜스파일링해서 foo.css를 생성
$ sass foo.scss:foo.css

특정 디렉터리 안에 있는 파일을 모두 트랜스 파일링하려면

$ sass src/sass:dist/css
인풋디텍터리 :  아웃풋디렉터리 

style

트랜스파일링 할때 2가지 스타일중 하나를 선택할수있다.

expanded

표준적인 스타일의 css 를 생성한다 해당값이 디폴트

$ sass --style expanded src/sass:dist/css

compressed

가능한 빈공간이 없는 압축된 스타일의 css 파일을 생성한다.

$ sass --style compressed src/sass:dist/css

watch

scss 파일의 변경을 감지하여 변경할때마다 scss 파일을 자동으로 트랜스파일링해 css 파일로 업데이트한다.

$ sass --watch src/sass:dist/css

Sass VS Scss

sass 는 두가지 표기법이 있는데 sass 와 scss 이다.

sass3.0 부터 css 친화적인 표기법으로 바뀐 scss 를 사용하고있다.

sass 표기법은 코딩을 간략화할수있다는 장점이있지만 css 친화적인 scss 표기법을 사용하는경우가 더많다.

Sass VS Scss 차이점

Sassscript

css에서 불가능한 변수,연산,함수 등 확장된 기능을 사용한다.

1. 데이터 타입

프로퍼티 값으로 사용할수있는 값에는 데이터 타입이 존재하는데 sassscript에서 7가지 데이터타입을 제공한다.

• 숫자형
• 문자열
• 컬러
• boolean
• null
• list
• map

2. 변수

sass에서는 변수를 사용할수있는데 문자열,숫자,컬러 등을 변수에 저장하고 사용할수있다.

변수 명은 $으로 시작한다.

$site_max_width: 960px;
$font_color: #333;
$link_color: #00c;
$font_family: Arial, sans-serif;
$font_size: 16px;
$line_height: percentage(20px / $font_size);

body {
  color: $font_color;

  // Property Nesting
  font: {
    size: $font_size;
    family: $font_family;
  }

  line-height: $line_height;
}

#main {
  width: 100%;
  max-width: $site_max_width;
}

3. 변수의 scope

변수의 유효범위가 존재하는데 코드 블록내에서 선언된변수는 지역변수 가 되고 지역변수는 자신이 속한 블록과 하위 코드 블록 까지 유효하다.

$width: 960px; // 전역 변수

header {
  width: $width;
  margin: 0 auto;
}

#main {
  $color: #333; // 지역 변수
  width: $width;
  margin: 20px auto;
  section {
    p {
      color: $color;

      a:link {
        color: $color;
      }
    }
  }
}

footer {
  width: $width;
  margin: 0 auto;
  color: $color; // Error: Undefined variable: "$color".
} // color 는 지역변수라서 트랜스파일링 하면 오류가 뜬다.

4. 연산자

%, em, rem, vh, vw, vmin, vmax 등 브라우저에따라 상대적인 값들일경우는 연산이 불가능하다

다만 calc( IE9 이상 ) 을 사용하면 이런 문제를 해결할수있다.

#foo {
  width: calc(25% - 5px);
}

css 에서는 / 는 나눗셈의 의미가 아니라 값을 구분하는 의미를 갖는다

따라서 sass 에서 나눗셈으로 사용하려면 몇가지 조건이 필요한대 아래의 조건이 맞다면 사용이 가능하다.

• 변수에 대해 사용
• 괄호 내에서 사용
• 다른 연산의 일부로서 사용

p {
  // font와 border-radius의 '/'는 CSS문법에 맞는 표현이므로 연산되지 않는다.
  font: italic bold 12px/30px Georgia, serif;
  // 타원형 둥근 모서리
  border-radius: 10px 20px/20px;
  /*
  border-top-left-radius: 10px 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 10px 20px;
  border-bottom-left-radius: 20px;
  */

  $width: 1000px;

  width: $width / 2;            // 변수에 대해 사용 →　width: 500px;
  height: (500px / 2);          // 괄호 내에서 사용 →　height: 250px;
  margin-left: 5px + 8px / 2px; // 다른 연산의 일부로서 사용 →　margin-left: 9px;
}

// 변수를 / 와 함께 사용하고자 하는경우 #{} 을 사용한다.
p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};  // 12px/30px
}

컬러 연산자

산술 연산자를 통해 컬러값도 조정할수있다.

p {
  color: #010203 + #040506;
  // R: 01 + 04 = 05
  // G: 02 + 05 = 07
  // B: 03 + 06 = 09
  // => #050709
}

p {
  color: #010203 * 2;
  // R: 01 * 2 = 02
  // G: 02 * 2 = 04
  // B: 03 * 2 = 06
  // => #020406
}

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
  // alpha(투명도)는 연산되지 않는다
  // color: rgba(255, 255, 0, 0.75);
}

다만 rgba의 alpha 값은 연산이 되지 않는데 연산하려면 opacify 함수 또는 transparentize 함수를 사용한다.

• opacify 함수: 첫번째 인수로 전달받은 alpha값에 두번째 인수를 더해 불투명도를 증가시킨다.(더 불투명해진다)
• transparentize 함수: 첫번째 인수로 전달받은 alpha값에 두번째 인수를 빼서 불투명도를 감소시킨다.(더 투명해진다)

$translucent-red: rgba(255, 0, 0, 0.5);

p {
  color: opacify($translucent-red, 0.3);
  // => color: rgba(255, 0, 0, 0.8);

  background-color: transparentize($translucent-red, 0.25);
  // => background-color: rgba(255, 0, 0, 0.25);
}

문자열 연산자

자바스크립트 처럼 + 로 문자열도 연결가능하다.

따옴표가 있는 문자열과 없는 문자열을 함께 사용하면 좌항의 문자열을 기준으로 따옴표를 처리한다.

p:before {
  content: "Foo " + Bar;        // "Foo Bar"
  font-family: sans- + "serif"; // sans-serif
}

Interpolation: #{}

인터폴레이션은 변수의 값을 문자열 그대로 삽입한다.

변수는 프로퍼티값으로만 사용할수있으나 #{} 을 사용하면 프로퍼티 값은 물론 셀렉터와 프로퍼티 명에도 사용가능하다.

$name: foo;
$attr: border;

p.#{$name} {            // p.foo
  #{$attr}-color: blue; // border-color: blue;
}

.someclass {
  $font-size: 12px;
  $line-height: 30px;
  // 연산의 대상으로 취급되지 않도록
  font: #{$font-size} / #{$line-height}; // 12px / 30px
}

Ampersand(&)

부모 요소를 참조하는 셀렉터이다.

a {
  color: #ccc;

  &.home {
    color: #f0f;
  }

  &:hover {
    text-decoration: none;
  }

  // & > span (X)
  > span {
    color: blue;
  }

  span {
    color: red;
  }
}

위 코드를 트랜스파일링하면

a {
  color: #ccc;
}

a.home {
  color: #f0f;
}

a:hover {
  text-decoration: none;
}

a > span {
  color: blue;
}

a span {
  color: red;
}

와 같다.

!default

할당되지않는 변수의 초기값을 설정한다. 이미 할당되있는 변수에 사용하면 적용되지않는다.

$content: "First content";
$content: "Second content?" !default;

$new_content: "First time reference" !default;

#main {
  content: $content; // "First content"
  new-content: $new_content; // "First time reference"
}