Skip to content

0518.md

Latest commit

 

History

History
98 lines (77 loc) · 2.18 KB

0518.md

File metadata and controls

98 lines (77 loc) · 2.18 KB

2017년 5월 18일

1. Sass 문법

@each문, @for문

  • for와 each는 Sass의 반복문에 사용된다.
  • for는 각 반복마다 카운트 변수를 사용할 수 있다.
  • each 반복문은 반복문들 중에서 가장 많이 사용된다고 한다. 이 반복문은 리스트나 맵을 순환할 수도 있다.

sample code

// for문 예제
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
/* is compiled to */
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}
//each함수 예제
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
/* or */
$list: puma, sea-slug, egret, salamander;
@each $animal in $list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

/* is compiled to */
.puma-icon {
  background-image: url("/images/puma.png");
}

.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
}

.egret-icon {
  background-image: url("/images/egret.png");
}

.salamander-icon {
  background-image: url("/images/salamander.png");
}

2. 미디어 쿼리

테블릿PC 및 스마트 폰 등 모바일 기기의 이용이 늘어나면서 CSS3부터 단말기의 종류에 따라 각각 다른 스타일을 적용 시키는게 가능해졌고 위 미디어 타입에 따라 필요한 스타일을 적용 할 수 있도록 확장하였는데 이를 미디어 쿼리라고 한다.

/*@media [only 또는 not] [미디어유형] [and 또는 ,콤마] (조건문) {실행문} */

    @media screen and (min-width: 320px) and (max-width: 767px){
        /* 내용 */    
    }

    @media screen and (min-width: 768px) and (max-width: 1199px){
        /* 내용 */
    }

    @media screen and (min-width: 1200px){
        /* 내용 */
    }

3. interpolation(보간법)

변수를 “” 내부에서 처리할 수 있는 방법, #{} 구문을 사용하여 선택자 및 속성 이름에 변수를 사용할 수 있다.

sample code

//보간법 예제
$side: top;
$radius: 10px;
 
.rounded-top {
	border-#{$side}-radius: $radius;
	-moz-border-radius-#{$side}: $radius;