Calcul de la largeur du pourcentage au pixel puis moins par pixel en MOINS DE CSS

Je vais calculer la largeur d'un élément de pourcentage à pixel, donc je vais moins -10px en utilisant LESS et calc () . C'est possible?

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

J'utilise CSS3 calc()donc ça ne marche pas:calc(100% - 10px)

Exemple: si 100% = 500px donc largeur = 490px (500-10);

J'ai fait une démo pour tester: http://jsfiddle.net/4DujZ/55/

donc le remplissage dira: 5 (10px / 2) tout le temps lorsque je redimensionne.

Puis-je le faire en MOINS ? Je sais comment faire dans jQuery et CSS simple comme le remplissage de marge ou autre ... mais je vais essayer de faire fonctionnel en LESS aveccalc()

Vous pouvez échapper les calcarguments pour éviter qu'ils ne soient évalués lors de la compilation.

En utilisant votre exemple, vous entoureriez simplement les arguments, comme ceci:

calc(~'100% - 10px')

Démo: http://jsfiddle.net/c5aq20b6/

Je trouve que j'utilise ceci de l'une des trois manières suivantes:

Échappement de base

Tout ce qui se trouve à l'intérieur des calcarguments est défini comme une chaîne et est totalement statique jusqu'à ce qu'il soit évalué par le client:

MOINS D'ENTREE

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

Sortie CSS

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

Interpolation des variables

Vous pouvez insérer une variable LESS dans la chaîne:

MOINS D'ENTREE

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

Sortie CSS

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

Mélange de valeurs échappées et compilées

Vous voudrez peut-être échapper à une valeur de pourcentage, mais allez-y et évaluez quelque chose lors de la compilation:

MOINS D'ENTREE

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

Sortie CSS

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

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

Je pense que width: -moz-calc(25% - 1em);c'est ce que vous recherchez. Et vous voudrez peut-être jeter un coup d'œil à ce lien pour obtenir de l'aide supplémentaire

Ou, vous pouvez utiliser l'attribut margin comme ceci:

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

Essaye ça :

width:auto;
margin-right:50px;