scss

문자보간법(문자열)

@mixin bx($position, $wid, $color) {
  border-#{$position}: $wid solid $color;
}

div {@include bx(right, 2px, red)}
p {@include bx(bottom, 5px, grey)}

for문

@charset 'utf-8';

/*
  .list li.ico1 {background: url('icon1.png') no-repeat;}
  .list li.ico2 {background: url('icon2.png') no-repeat;}
  .list li.ico3 {background: url('icon3.png') no-repeat;}
  .list li.ico4 {background: url('icon4.png') no-repeat;}
*/


.list li {text-indent:30px; background: no-repeat 0 0 / 20px auto;}
@for $i from 1 to 5 {
  // for (let i=1; i<5; i++)
  .list li.ico#{$i} {background: url('/img/icon#{$i}.png')}
  .list li:nth-child(#{$i}):before { content: '제목#{$i} ';}
}

each문

// @each 지시자 변수 in(변수 순차적 배치)

@each $var in book, zoom, phone {
  .ico_#{$var}{
    background: url(/img/#{$var}.png) no-repeat;
    background-size: contain;
  }
}

$heading :(
  h1:30px,
  h2:20px,
  h3:15px
)

@each $ele, $fs in $heading {
  #{$ele} {
    font-size: $fs;
  }
}

@each $ele, $fs in $heading 에러 이유가 뭘까

조건문

// 1
@mixin btn_radius($h, $radius:true) {
  padding: 0 20px; 
  height: $h; 
  line-height: $h; 
  text-align: center;
  background-color: skyblue;
  
  @if $radius {
    border-radius: $h / 2;
  } @else {
    border: 3px solid lightgreen
  }
}
.btn {@include btn_radius(30px, false);}


// 2
@mixin position($x, $y, $z) {
  position: absolute;
  top: $y;
  left: $x;
  z-index: $z;

  @if $x == 50% and $y == 50% {
    transform: translate(-50%, -50%);
  }@else if $x == 50% {
    transform: translateX(-50%);
  }@else if $y == 50% {
    transform: translateY(-50%);
  }
}
div {
  width: 300px;
  height: 300px;
  background-color: #000;
  @include position(50%, 50%, 2); 
}

mixin 응용하기

@charset "UTF-8";
.a {
  border: 1px solid lawngreen;
  background-color: skyblue;
}
.a::after {
  content: "";
  display: block;
  clear: both;
}
.a > div {
  float: left;
}

.b {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 150px;
}

.c {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  width: 250px;
  height: 66px;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

webkit- : 크로싱 브라우저를 위하여 (구글, 사파리 브라우저에 적용)
모바일 웹으로 앱과 비슷한 형식의 모바일 앱웹을 만들 경우, css를 이용할때 사용하는 옵션

  -webkit- : 구글의 크롬, 애플의 사파리 웹브라우저에 적용함.
  -moz- : 웹브라우저 모질라(FireFox, 파이어폭스)에 적용함.
  -ms- : MS(마이크로소프트)사의 인터넷익스플로러에 적용함.
  -o- : 웹 브라우저 오페라에 적용함.

-webkit-line-clamp : 몇줄뒤에 콘텐츠를 자를지 (IE지원 X)
-webkit-box-orient : 박스의 흐름 방향을 지정 (IE지원 X)

-webkit-box로 설정해야하고 box-orient가 vertical값이 되야만 line-clamp가 실행

mixin으로 position 응용하기

@mixin position($x, $y, $z, $width) { position: absolute; left: $x; top: $y; z-index: $z; width: $width;
  
  @if $x == 50% and $y == 50% {
    transform: translate(-50%, -50%);
  } @else if $x == 50% {
    transform: translateX(-50%);
  } 
  @else if $y == 50% {
    transform: translateY(-50%);
  }
}

div {
  @include position(50%, 50%, 2, 500px);
  height: 200px;
  border: 3px solid lawngreen;
}