Vertical Align
vi Markup.html

<div class='vertical-block'>
  <div class="centered">
    <iframe width="540" height="432" src="https://www.youtube.com/embed/zmypItiRhxU?rel=0" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen>
    </iframe>
  </div>
</div>
vi Styling.scss

div.vertical-block {
  position: relative;
  height: 360px;
  text-align: center;
  border: 1px solid #ccc;

  &:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
  }

  .centered {
    display: inline-block;
    vertical-align: middle;
  }
}
Clearfix
vi Markup.html

<div class="group">
  <img src="ski.jpg" alt="Skiing!" />
  <p>To successfully ski, simply do not fall.

</div>
vi Styling.scss

div.group {
  .group:before,
  .group:after {
    content: "";
    display: table;
  }
  .group:after {
    clear: both;
  }
}
Bootstrap에서는 clearfix 클래스 또는 .clearfix() 믹신(Mixin)이 역할을 한다.
Centering
블럭(block) 엘리먼트에 대해서는 margin: 0 auto를, 인라인(inline)과 인라인-블럭(inline-block) 엘리면트는 text-alige: center를 사용한다. Bootstrap에서는 center-block 클래스와 text-center 클래스가 이 역할을 한다.
Image Cropping
vi Markup.html

<div class="crop">
  <img src="bush.jpg" alt="Bush, My Dog" />
</div>
vi Styling.scss

div.crop {
  width: 320px;
  height: 240px;
  img {
    width: 320px;
    height: 240px;
  }
}
Bush
이와 같이 이미지 자체의 크기를 조정하면 왜곡이 발생한다.
vi Styling.scss

div.crop {
  width: 320px;
  height: 240px;
  overflow: hidden;
}
Bush
overflow:hidden을 도입하면 왜곡은 없지만 이미지의 원하는 부분을 보여주지 못한다.
vi Styling.scss

div.crop {
  width: 320px;
  height: 240px;
  overflow: hidden;

  img {
    width: auto;
    height: 240px;
  }
}
Bush
overflow:hidden과 height나 width 중 하나가 고정된 img를 같이 적용한다.
Responsive Image
vi Markup.html

<div class="frame">
  <img src="banner.jpg" alt="Banner" />
</div>
vi Styling.scss

div.frame {
  width: 100%;
  img {
    width: 100%; // 50%
  }
}
Banner
Bootstrap에서는 img-responsive 클래스를 사용하면 동일한 효과를 얻는다.
Letter-Pressed Effect
vi Markup.html

<div class="letterpress bg-primayr">
  <p class='light'>LETTER

</div> <div class="letterpress bg-info"> <p class='dark'>LETTER

</div>
vi Styling.scss

div.letterpress {
    padding: 12px;
    p { font-weight: bold; }
    p.light { text-shadow: -1px -1px 1px black; }
    p.dark { text-shadow: 1px 1px 1px white; }
  }

LETTER

LETTER

Letter-pressed 효과를 위해서는 text-shadow를 이용한다. 라이트한 배경에 어두운 텍스트를 갖는 엘리먼트에 대해서는 오른쪽와 아래 방향으로 밝은 blur를 사용하고, 반대로 어두운 배경에 라이트한 텍스트의 경우에는 왼쪽와 위 방향으로 어두운 blur를 사용한다.
Mouse hover시 transition을 적용하기
vi Markup.html

<div class='hover-opacity'></div>
vi Styling.scss

div.hover-opacity {
  background: url(bush.jpg) no-repeat 0px -100px;
  opacity: 0.5;
  @include transition(all .2s ease-in-out);
  &:hover {
    opacity: 1;
    background: url(bush.jpg) no-repeat 0px -200px;
    transform: scale(1.1) rotate(-12deg) translate(100px, 0px);
  }
}
Gradient
vi Markup.html

<div class='gradient'></div>
vi Styling.scss

div.gradient {
  width: 100%;
  height: 120px;
  @include background(linear-gradient(left, red, blue));
}
Stretch
(계속 추가됩니다...)