본문으로 바로가기

[Chapter 03] Sass

category StyleSheet/SASSㆍSCSS 2015. 10. 27. 12:39


전달 인자(Arguments)






@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;
}



'StyleSheet > SASSㆍSCSS' 카테고리의 다른 글

[Chapter 06] Sass Function & 그 외의 지시어(Directive)  (0) 2015.10.30
[Chapter 04] Sass  (0) 2015.10.27
[Chapter 02] Sass  (0) 2015.10.27
[Chapter 01] Sass  (0) 2015.10.27
Sass 활용(웹폰트,PX2EM, accessivility )  (0) 2015.09.14