LESS CSS에서 퍼센트에서 픽셀까지 폭 계산 후 픽셀 단위로 마이너스 계산


100

퍼센트에서 픽셀까지 일부 요소의 너비를 계산하므로 LESScalc () 를 사용하여 -10px를 뺀 것 입니다. 있을 수있다?

div {
    span {
        width:calc(100% - 10px);
    }
}

CSS3를 사용 calc()하므로 작동하지 않습니다.calc(100% - 10px)

예 : 만약 100 % = 500px so width = 490px (500-10);

테스트 용 데모를 만들었습니다. http://jsfiddle.net/4DujZ/55/

그래서 패딩은 내가 크기를 조정할 때 항상 5 (10px / 2) 라고 말할 것 입니다.

LESS로 할 수 있습니까 ? 내가 jQuery를 마진 패딩 또는 다른 같은 간단한 CSS에서 어떻게 해야할지 ...하지만 난에 기능을 수행하려고합니다 LESS 와 함께calc()


1
일반적으로, 아무 의미가없는 스타일 선택기하지 않는 것처럼, div또는 span.
Pavlo

1
다음은 모든 CSS 속성에서 calc를 사용하기 위해 작성한 크로스 브라우저 믹스입니다. stackoverflow.com/a/24790931/916734
Patrick Berkeley

답변:


246

calc컴파일시 평가되는 것을 방지하기 위해 인수를 이스케이프 할 수 있습니다 .

예제를 사용하면 다음과 같이 단순히 인수를 둘러 쌉니다.

calc(~'100% - 10px')

데모 : http://jsfiddle.net/c5aq20b6/


다음 세 가지 방법 중 하나로 이것을 사용합니다.

기본 이스케이프

calc인수 안의 모든 것은 문자열로 정의되며 클라이언트가 평가할 때까지 완전히 정적입니다.

적은 입력

div {
    > span {
        width: calc(~'100% - 10px');
    }
}

CSS 출력

div > span {
  width: calc(100% - 10px);
}

변수 보간

LESS 변수를 문자열에 삽입 할 수 있습니다.

적은 입력

div {
    > span {
        @pad: 10px;
        width: calc(~'100% - @{pad}');
    }
}

CSS 출력

div > span {
  width: calc(100% - 10px);
}

이스케이프 된 값과 컴파일 된 값 혼합

백분율 값을 이스케이프하고 싶을 수 있지만 계속해서 컴파일 할 때 평가하십시오.

적은 입력

@btnWidth: 40px;
div {
    > span {
        @pad: 10px;
        width: calc(~'(100% - @{pad})' - (@btnWidth * 2));
    }
}

CSS 출력

div > span {
  width: calc((100% - 10px) - 80px);
}

출처 : http://lesscss.org/functions/#string-functions-escape .


2
당신은 락, 친구! 그 예와 설명에 감사드립니다. LESS를 사용하여 컨테이너의 알 수없는 너비 (div.categories라고합시다)를 4 등분으로 나누는 방법을 알고 계십니까?
Shawn Spencer

5
@ShawnSpencer : 줄 사이에는 많은 모호함이 있습니다. 해결하려는 것을 보여주는 JSFiddle을 만들 수 있습니까? 사용 사례를 추측 해 볼 수는 있지만 자세한 내용을 알지 못해 방해를 받고 있습니다. 어떻게 진행되는지 알고 계실 것입니다. 최악의 억제는 결국 정신을 잃는 경향이 있습니다.
natchiketa

2
나는 성숙으로 물러날 생각이 없습니다. 간단한 CSS 솔루션을 사용하고 답 중 하나를 사용하여 작업을 수행 할 수 있었기 때문에 지금은 좋습니다. 그래도 JSFiddle 예제를 보도록 제안 해 주셔서 감사합니다. 매우 감사.
Shawn Spencer

0

나는 width: -moz-calc(25% - 1em);당신이 찾고있는 것이라고 생각 합니다. 이 링크 에 추가 지원 을 제공 할 수 있습니다.


-3

또는 다음과 같이 margin 속성을 사용할 수 있습니다.

    {
    background:#222;
    width:100%;
    height:100px;
    margin-left: 10px;
    margin-right: 10px;
    display:block;
    }

3
OP는 너비가 100 %보다 작은 10px를 원합니다. 당신의 CSS는 그렇게하지 않습니다. 100 %보다 넓게 만들 것 입니다.
Andrew Barber

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.