본문 바로가기

카테고리 없음

CSS -> LESS 로 변환


div.section {
 width: 500px;
 margin: 0 auto;
 border: solid 1px #999;
 padding: 1px;
}
div.section h3 {
 background: #999;
 font-size: 131%;
 padding: 10px;
}
div.section h3 a {
 color: #fff;
}
div.section h3 a:hover {
 color: #eee;
}
div.section p {
 padding: 10px;
}

CSS - > LESS 으로 변환하면 아래와 같이 간결

div.section {
  width: 500px;
  margin: 0 auto;
  border: solid 1px #999;
  padding: 1px;
  h3 {
    background: #999;
    font-size: 131%;
    padding: 10px;
    a {
      color: #fff;
      &:hover {
        color: #eee;
      }
    }
  }
  p {
    padding: 10px;
  }
}

참고 사이트는 아래와 같다.

http://baepower.wordpress.com/2012/05/25/css%EB%A5%BC-%EC%8B%AC%ED%94%8C%ED%95%98%EA%B2%8C-less%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4-%EB%B4%A4%EB%8B%A4/