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


100

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()


1
En règle générale, ne stylisez pas les sélecteurs sans sémantique , comme divou span.
Pavlo

1
Voici un mixin cross navigateur que j'ai écrit pour utiliser calc sur n'importe quelle propriété css: stackoverflow.com/a/24790931/916734
Patrick Berkeley

Réponses:


246

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 .


2
Vous basculez, mec! Merci pour ces exemples et explications. Savez-vous comment je pourrais diviser une largeur inconnue d'un conteneur (appelons-le div.categories) en 4 parties égales, en utilisant LESS?
Shawn Spencer

5
@ShawnSpencer: Entre les lignes, il y a beaucoup d'obscurité. Pouvez-vous créer un JSFiddle illustrant ce que vous essayez de résoudre? Je peux essayer de deviner le cas d'utilisation, mais je suis inhibé par le fait de ne pas connaître tous les détails, et je suis sûr que vous savez comment cela se passe - vos pires inhibitions ont tendance à vous déranger à la fin.
natchiketa

2
Je ne suis pas enclin à démissionner à maturité. Puisque je cherche une solution CSS simple et que j'ai pu faire fonctionner les choses, en utilisant l'une des réponses, je suis bon pour le moment. Merci d'avoir offert de regarder un exemple JSFiddle. Très appréciée.
Shawn Spencer

0

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


-3

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

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

3
OP veut que la largeur 10px soit inférieure à 100%. Votre CSS ne fait pas cela. Cela le rendra plus large que 100%.
Andrew Barber

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.