web-dev-qa-db-fra.com

Calculer la largeur de pourcentage en pixel puis moins par pixel en MOINS CSS

Je vais calculer la largeur dans certains éléments de pourcentage en pixel, donc je vais moins -10px en utilisant [~ # ~] moins [~ # ~] et calc () . C'est possible?

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

J'utilise CSS3 calc() pour que cela ne fonctionne pas: calc(100% - 10px)

Exemple: si 100% = 500px alors width = 490px (500-10);

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

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

Puis-je le faire dans [~ # ~] moins [~ # ~] ? Je sais comment faire dans jQuery et CSS simple comme le remplissage de marge ou autre ... mais je vais essayer de faire fonctionnel dans [~ # ~] moins [~ # ~] avec calc()

csslesspixel
97
l2aelba

Vous pouvez échapper aux arguments calc afin d'éviter leur évaluation lors de la compilation.

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

calc(~'100% - 10px')

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

Je trouve que je l’utilise de l’une des trois manières suivantes:

Évasion de base

Tout ce qui se trouve dans les arguments calc est défini en tant que chaîne et est totalement statique jusqu'à ce qu'il soit évalué par le client:

MOINS Entrée

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

Sortie CSS

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

Interpolation de variables

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

MOINS Entrée

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

Sortie CSS

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

Mélanger les valeurs échappées et compilées

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

MOINS Entrée

@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 .

234
natchiketa

Je pense que width: -moz-calc(25% - 1em); est ce que vous recherchez. Et vous voudrez peut-être donner ceci Lien pour obtenir de l'aide supplémentaire

0
Akshay Khandelwal