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

Program / 글쓴이

퍼센트에서 픽셀까지 일부 요소의 너비를 계산하므로 LESS 및 calc () 를 사용하여 -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()

답변

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 .

답변

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

답변

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

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

답변

이 시도 :

width:auto;
margin-right:50px;

답변