• 회원가입
  • 로그인
  • 구글아이디로 로그인

[basic] LESS - Mixins (믹스인)

698  
Mixins 정의

 

웹사이트 전체에 걸쳐 재사용 가능한 CSS 코드를 별도로 정의 후,

CSS 정의할 때 불러와 재사용하는 기법.

 


Mixins 예제

 

.bordered {

  border-top: dotted 1px black;

  border-bottom: solid 2px black;

}

 

#menu a {

  color: #111;

  .bordered();

}


.post a {

  color: red;

  .bordered();

}

 

cf. SASS 경우, @include mixin_name 형식 사용.

 


분류 제목
basic LESS - Home (입문)
basic LESS - Intro (소개)
basic LESS - Installation (설치)
basic LESS - Variables (변수)
basic LESS - Parent Selectors (부모 선택자)
basic LESS - Mixins (믹스인)
basic LESS - Nesting (중첩 = 안긴 형태)
basic LESS - Operations (연산)
basic LESS - Escaping (회피 = 이스케이핑)・Function (함수)
basic LESS - Namespaces (네임스페이스)・Accessors (접근자)
basic LESS - Maps (맵)
basic LESS - Scope (유효 범위)
basic LESS - Comments (주석)
basic LESS - @import (가져오기)
basic LESS - @plugin (플러그인 가져오기)
basic LESS - Extend (상속 = 확장)
basic LESS - Merge (병합 = 결합)
basic LESS - CSS Guards
basic LESS - Detached Rulesets
1/6
목록
찾아주셔서 감사합니다. Since 2012