CSS 클래스 변수 변경

debugcn 에 게시 Dev

원건

나는 less.js를보고 있는데, mixin은 CSS에서 변수를 만지는 방식처럼 보이지만 less.js를 사용하여 내 문제를 해결할 수 있는지 확실하지 않습니다.

매개 변수로 클래스를 만들고 싶습니다.

marginTop-10 또는 marginTop(15)

10,15는 여백 상단 픽셀을 지정하기 위해 변경할 수있는 몇 가지 숫자입니다. 기본적으로이 숫자는 임의의 숫자 일 수 있습니다. 그리고 다음과 같은 단락 클래스에서이 클래스를 사용할 것입니다.

<p class="marginTop(some number)">css help</p>

어떻게 할 수 있습니까?

Bass Jobsen

먼저 다음과 같이 Less 파일을 작성해야합니다.

.marginTop(@topMargin) {
margin-top: @topMargin;
}

p.marginTop-10 {
.marginTop(10px); 
}

p.marginTop-15 {
.marginTop(15px); 
}

앞의 Less 코드는 다음 CSS 코드로 컴파일 됩니다.

p.marginTop-10 {
  margin-top: 10px;
}
p.marginTop-15 {
  margin-top: 15px;
}

그 후 HTML에서 사용할 수 있습니다.

<p class="marginTop-10">css help</p>
<p class="marginTop-15">css help</p>

클래스 목록을 동적으로 컴파일 할 수도 있습니다. 참고 항목 : twitter에서 열 클래스를 생성하는 데 사용되는 LESS 루프-어떻게 작동합니까?

이렇게하면 다음 Less 코드를 작성할 수 있습니다.

@margins: 10 20 50;

.marginTop(@i: 1) when (@i <= length(@margins)) {
.marginTop(@i + 1);
@margin-top: extract(@margins,@i);
.marginTop-@{margin-top} {
    margin-top:unit(@margin-top,px);
    }
}

.marginTop();

출력 :

.marginTop-50 {
  margin-top: 50px;
}
.marginTop-20 {
  margin-top: 20px;
}
.marginTop-10 {
  margin-top: 10px;
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-1

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사