[Chapter 03] Sass

전달 인자(Arguments)

Sass TEST : http://www.sassmeister.com/

@mixin border-radius( $radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

#app {
  @include border-radius(10px);
}

#design {
  @include border-radius (3px 3px 0 0);
}

@mixin border-radius-01( $radius: 4px) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

#app-01 {
  @include border-radius-01;
}

#design-01 {
  @include border-radius-01 (3px 3px 0 0);
}

See the Pen sass 믹스인 활용 by jaeheekim (@jaehee) on CodePen.

ㆍ JS의 함수 확장처럼 @mixin으로 정의된 모듈에 인자를 전달하여 믹스인을 확장 할 수 있다.

ㆍ @mixin으로 정의된 모듈에 default value를 전달하여 사용도 가능하다.

Sass 데이터 타입(유형)

SASS 는 6가지(Null, Number, String & Color, Boolean, list. map) 데이터 타입을 지원하고 있습니다.

ㆍ Number 는 숫자형으로 1.2, 3, 14px

ㆍ Null 은 값이 비어있음

ㆍ String & Color (문자타입)으로 "../images/icon.png" , 'Times New Roman', #fff390 등..

ㆍ Boolean 은 논리형으로 참,거짓

ㆍ List 는 자바스크립트의 배열과 유사하며 공백 또는 콤마(,)로 구분되는 목록을 말합니다.

ㆍ Map 은 키: 값 으로 구성된 그룹으로 자바스크립트의 객체와 유사하며 map 과 관련된 함수로 값을 얻을 수 있습니다.

// List
$arr: 10px 5px 0 2px;

// Maps
$map: (
        key1: value1,
        key2: value2
)

문자 연산하기

li {
  cursor: poi + nter; // pointer
  // 자바스크립트에서 "" 를 사용하지 않아도 됩니다.

  a {
    &:before {
      content: ' hey!' + ' girl!!!';
    }
    .selected &::before {
      content: '올해는 20 + 15 인가?!'
    }
  }
}

RWD, Sass 변수와 미디어 쿼리 활용해보기 (Sass 3.2 이상 사용가능)

$break-small: 320px;
$break-large: 1024px;

#demo {
  width: 300px;
  float: left;
  @media screen and (max-width: $break-small) {
    float: none;
    width: 200px;
  }
  @media screen and (max-width: $break-large) {
    float: right;
    width: 100%;
  }
}



// 반응형 웹 디자인에서 Sass 변수와 CSS3 미디어쿼리 조합은 매우 유용합니다.
$width-name: max-device-width;
$target-width: 500px;

// 속성(property)도 변수 처리가 가능합니다.
// 변수에 연산을 수행할 수 있습니다.
@media screen and ($width-name : $target-width + 1) {
  color: red;
}

미디어 쿼리에 보간법 활용해보기

$i-phone: "only screen and (max-width: 320px)";

@media #{i-phone} {
  background-color: black;
}