Calcolo della larghezza da percentuale a pixel, quindi meno per pixel in MENO CSS

Calcolerò la larghezza in alcuni elementi dalla percentuale al pixel, quindi meno -10px usando LESS e calc () . È possibile?

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

Uso CSS3 calc()quindi non funziona:calc(100% - 10px)

Esempio: se 100% = 500 px allora larghezza = 490 px (500-10);

Ho fatto una demo per il test: http://jsfiddle.net/4DujZ/55/

quindi il padding dirà: 5 (10px / 2) tutto il tempo durante il ridimensionamento.

Posso farlo in MENO ? So come fare in jQuery e CSS semplici come il riempimento del margine o altro ... ma cercherò di farlo funzionale in MENO concalc()

È possibile eseguire l'escape degli calcargomenti per evitare che vengano valutati durante la compilazione.

Usando il tuo esempio, dovresti semplicemente racchiudere gli argomenti, in questo modo:

calc(~'100% - 10px')

Demo: http://jsfiddle.net/c5aq20b6/

Trovo che lo uso in uno dei tre modi seguenti:

Evasione di base

Tutto all'interno degli calcargomenti è definito come una stringa ed è totalmente statico fino a quando non viene valutato dal client:

MENO input

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

Output CSS

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

Interpolazione di variabili

Puoi inserire una variabile LESS nella stringa:

MENO input

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

Output CSS

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

Combinazione di valori di escape e compilati

Potresti voler sfuggire a un valore percentuale, ma vai avanti e valuta qualcosa sulla compilazione:

MENO input

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

Output CSS

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

Fonte: http://lesscss.org/functions/#string-functions-escape .

Penso width: -moz-calc(25% - 1em);sia quello che stai cercando. E potresti dare un'occhiata a questo collegamento per ulteriore assistenza

Oppure puoi usare l'attributo margin in questo modo:

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

Prova questo :

width:auto;
margin-right:50px;