Pregunta Sass calcula el porcentaje menos el px


Quiero ser capaz de hacer lo siguiente:

height: 25% - 5px;

Obviamente, cuando lo hago, obtengo el error:

Incompatible units: 'px' and '%'.

74
2017-11-07 17:06


origen


Respuestas:


Sass no puede realizar aritmética en valores que no se pueden convertir de una unidad a la siguiente. Sass no tiene forma de saber exactamente qué tan ancho es "100%" en términos de píxeles o cualquier otra unidad. Eso es algo que solo el navegador conoce.

Tienes que usar calc() en lugar. Verifique la compatibilidad del navegador en ¿Puedo usar ...?

.foo {
    height: -webkit-calc(25% - 5px);
    height:    -moz-calc(25% - 5px);
    height:         calc(25% - 5px);
}

Si sus valores están en variables, puede que necesite usar la interpolación para convertirlos en cadenas (de lo contrario, Sass solo intenta realizar operaciones aritméticas):

$a: 25%;
$b: 5px;

.foo {
  width: -webkit-calc(#{$a} - #{$b});
  width:    -moz-calc(#{$a} - #{$b});
  width:         calc(#{$a} - #{$b});
}

159
2017-11-07 17:28



Hay un calc función en SCSS [compile-time] y CSS [run-time]. Probablemente está invocando lo primero en lugar de lo último.

Por razones obvias, las unidades de mezcla no funcionarán en tiempo de compilación, pero sí en tiempo de ejecución.

Puedes forzar a este último usando unquote, una función SCSS.

.selector { height: unquote("-webkit-calc(100% - 40px)"); }

13
2017-08-28 11:38



$var:25%;
$foo:5px;
.selector {
    height:unquote("calc( #{$var} - #{$foo} )");
}

8
2017-08-16 02:41



SI usted conoce el ancho del contenedor, podría hacer esto:

#container
  width: #{200}px
  #element
    width: #{(0.25 * 200) - 5}px

Soy consciente de que en muchos casos #container podría tener un ancho relativo. Entonces esto no funcionaría.


2
2017-07-31 20:02



Perdón por reanudar el hilo viejo: el estiramiento de Compass con un: después del pseudo-selector podría adaptarse a su propósito, por ej. si desea que un div llene el ancho desde la izquierda hasta (50% + 10px) de pantalla, puede usar (en sintaxis sangrada SASS):

.example
    background: red
    +stretch(0, -10px, 0, 0)
    &:after
        +stretch(0, 0, 0, 50%)
        content: ' '
        background: blue

El elemento: after se llena un 50% a la derecha de .example (dejando un 50% disponible para el ancho de .example), entonces .example se estira a ese ancho más 10px.


2
2017-09-01 15:51