Sass calcular porcentaje menos px

133

Quiero poder hacer lo siguiente:

height: 25% - 5px;

Obviamente cuando hago eso me sale el error:

Incompatible units: 'px' and '%'.

sass

— Mike Fielden
fuente

Me sale el Invalid property valueerror En todos los navegadores, incluida la compilación Canary de Chrome.

— Mike Fielden el

Si hay una función Sass que me da lo que quiero, es genial, solo estaba jugando con calc...

— Mike Fielden

Sí :) Como dije, no me importa cómo se hace calcfue donde fui primero y no funcionó. Parece que calcno funciona en ninguno de mis navegadores, por lo que sería mejor una implementación sass.

— Mike Fielden el

1

Sass no puede actuar como un polyfill para calc (). No sabe cómo convertir el 25% a px, por lo que puede hacer los cálculos y generar el CSS. Dependiendo de sus necesidades exactas, puede haber una alternativa, como usar la familia de tablas de visualización, cambiar el tamaño de la caja o usar márgenes negativos ( jsfiddle.net/5JZGt )

— cimmanon

239

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

Necesitas usar calc()en su lugar. Verifique la compatibilidad del navegador en ¿Puedo usar ...

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

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

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

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

— chrisgonzalez
fuente

55

Yo diría que calc () no funciona en absoluto en la mayoría de los navegadores. Las plataformas móviles son tan importantes como las computadoras de escritorio.

— dalgard

3

No hay discusión allí, ¡pero cuente los navegadores! ¡Más soporte calc () que no, y aún más lo soportará en un futuro cercano!

— chrisgonzalez

55

Tenía problemas de ancho usando una variable dentro de las funciones de Calc, pero encontré aquí: stackoverflow.com/questions/13542164/... que podría hacer referencia a la variable de la siguiente manera: calc(25% - #{$var}).

— mlunoe

Para dar seguimiento a la declaración de @ dalgard, en términos de navegadores existentes, lanzados, calc no funciona en más de lo que funciona. Ver: caniuse.com/#search=calc

— publicado el

3

Siempre puede usar una opción alternativa agregando width: 22%sobre todo widths concalc

— Hengjie

23

Hay una calcfunción tanto en SCSS [tiempo de compilación] como en CSS [tiempo de ejecución]. Probablemente estés invocando lo primero en lugar de lo segundo.

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

Puede forzar este último mediante el uso de unquoteuna función SCSS.

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

— Sandstrom
fuente

14

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

— Edwin Fernando Marroquin Busto
fuente

2

¡Gracias por publicar una respuesta a esta pregunta! Se desaconsejan las respuestas de solo código en Stack Overflow, porque un volcado de código sin contexto no explica cómo o por qué funcionará la solución, lo que dificulta que el póster original (o cualquier lector futuro) comprenda la lógica detrás de él. Edite su pregunta e incluya una explicación de su código para que otros puedan beneficiarse de su respuesta. ¡Gracias!

— Maximillian Laumeister

Eso me salvó. ancho: entre comillas ("calc (100% - # {$ leftnav-width})");

— httpete

5

SI conoce el ancho del contenedor, puede hacer lo siguiente:

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

— Diseño por Adrian
fuente

2

Perdón por revivir el viejo hilo: la extensión de Compass con un: después de que el pseudo-selector podría adaptarse a su propósito, por ejemplo. si desea que un div llene el ancho desde la izquierda hasta (50% + 10px) de la pantalla, puede usar (en sintaxis con sangría 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), luego .example se estira a ese ancho más 10px.

— Bryce Gilhome
fuente

1

¿Hay alguna mezcla menos o menos para esto en alguna parte? calc no parece funcionar muy bien en absoluto.

— v3nt

0

Simplemente agregue el valor de porcentaje en una variable y use, #{$variable} por ejemplo,

$twentyFivePercent:25%;
.selector {
    height: calc(#{$twentyFivePercent} - 5px);
}

— Aftab Ahmed
fuente