CSS에서 재사용 가능한 클래스를 작성하는 방법

Question

이것은 문제가 아니라 오히려 CSS의 재사용 가능한 클래스에 대한 내 이해가 올바른지 알고 싶습니다. 이 예에서는 2 개의 div가 있습니다. 그리고 두 가지 모두 패딩 왼쪽을 추가하고 싶지만 다른 값을 사용하고 싶습니다. (예 : div 1은 왼쪽에 10px, div2와 15px 왼쪽에 채우기가 있음). 그래서 지금은 적은 기능 덕분에 재사용 가능한 CSS 클래스를 작성하려고합니다.

예 1

<div id="div1" class="small-left-space"> 
</div> 

<div id="div2" class="large-left-space"> 
</div> 

// CSS와

.padLeft(@value) 
{ 
    padding-left: @value; 
} 

.small-left-space{ 
    .padLeft(10px); 
} 


.large-left-space{ 
    .padLeft(100px); 
} 

이하 실시 예 2

html로

<div id="box1" class="bigBox redBackground smallLeftSpace "></div> 

<div id="box2" class="mediumBox blueBackground mediumLeftSpace"></div> 

<div id="box3" class="smallBox greenBackground largeLeftSpace"></div> 

CSS는/이하

.bigBox 
{ 
    width: 500px; 
    height:500px; 
} 

.mediumBox{ 
    width:300px 
    height:300px; 
} 

.smallBox{ 
    width:100px 
    height:100px; 
} 

.redBackground{ 
    .backgroundColor(red); 
} 

.blueBackground{ 
    .backgroundColor(blue); 
} 

.greenBackground{ 
    .backgroundColor(green); 
} 

.smallLeftSpace{ 
    margin-left: 20px; 
} 

.mediumLeftSpace{ 
    margin-left: 50px; 
} 

.largeLeftSpace{ 
    margin-left: 100px; 
} 

.backgroundColor(@value){ 
    background-color: @value; 
} 

Answer 1

당신이 덜 사용하고있는 것처럼, 할 수있는 가장 좋은 것은 재사용이나 mixin 대신 재사용이 가능한 클래스의을 사용하는 것입니다. 그것은 몇 가지 장점이 있습니다 : 믹스 인을 사용하지 않는

• 경우, 그것은 컴파일되지 것이 아니라 생성 된 CSS에 나타납니다 않습니다
• 당신의 HTML 마크 업이 많은 화장품 클래스없이 깨끗한 의미입니다
• 당신이 할 수있는 여러 CSS 클래스를 사용했을 때 하나의 mixin (매개 변수 포함)을 사용하십시오.

이렇게하면 멋지고 깨끗하며 재사용 가능한 코드를 만들 수 있습니다.

예 : 유지 mixin과

적은 파일 :

/* Size */ 
.box(@value) { 
    width: @value; 
    height: @value; 
} 
.bigBox() { 
    .box(500px); 
} 
.mediumBox() { 
    .box(300px); 
} 
.smallBox() { 
    .box(100px); 
} 

/* background-color */ 
.backgroundColor(@value){ 
    background-color: @value; 
} 

/* margin-left */ 
.leftSpace(@value) { 
    margin-left: @value; 
} 
.smallLeftSpace() { 
    .leftSpace(20px); 
} 
.mediumLeftSpace() { 
    .leftSpace(50px); 
} 
.largeLeftSpace() { 
    .leftSpace(100px); 
} 

#box2 { 
    .mediumBox(); 
    .backgroundColor(blue); 
    .mediumLeftSpace(); 
} 
#box3 { 
    .smallBox(); 
    .backgroundColor(green); 
    .largeLeftSpace(); 
} 

CSS 파일 생성 : 사용

#box2 { 
    width: 300px; 
    height: 300px; 
    background-color: #0000ff; 
    margin-left: 50px; 
} 
#box3 { 
    width: 100px; 
    height: 100px; 
    background-color: #008000; 
    margin-left: 100px; 
} 

HTML 마크 업, 화장품 클래스없는 :

<div id="box2"></div> 
<div id="box3"></div>