Sass calculate percent minus px

by

Sass cannot perform arithmetic on values that cannot be converted from one unit to the next. Sass has no way of knowing exactly how wide “100%” is in terms of pixels or any other unit. That’s something only the browser knows.

You need to use calc() instead. Check browser compatibility on Can I use…

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

If your values are in variables, you may need to use interpolation turn them into strings (otherwise Sass just tries to perform arithmetic):

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

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

More Related Contents:

  1. To know the sass structure [closed]
  2. False positive “undefined variable” error when compiling SCSS
  3. Adding a unit to a number in Sass
  4. Using Sass Variables with CSS3 Media Queries
  5. Sass .scss: Nesting and multiple classes?
  6. Sass – Manipulate inherited property?
  7. Append the parent selector to the end with Sass
  8. Sass Interpolation of Mixin, Function, and Variable names
  9. Why does Sass change the format of my colors?
  10. How to overwrite SCSS variables when compiling to CSS
  11. Can I import an externally hosted file with sass?
  12. Using a function in Sass is returning the string containing the name of the function rather than the result
  13. Concatenating nested classes using SASS [duplicate]
  14. Math with interpolated variables?
  15. Sass combining parent using ampersand (&) with type selectors
  16. Define variables in Sass based on classes
  17. Using variables for CSS properties in Sass
  18. Sass color variable not working inside darken()
  19. How to convert a number to a percentage with SASS? [duplicate]
  20. Skipping an optional argument in Sass mixin
  21. Can’t get sass + compass + susy installed due to version conflict
  22. Adding two values in Sass function creates double instance of ‘px’
  23. Interpolation of prefixes on @keyframes in Sass
  24. Gulp TypeError: Arguments to path.join must be strings
  25. SASS compile fontawesome preserve notation
  26. Trying to use sass modules in create-react-app with the new @use syntax but receiving an error
  27. Configure compass browser support (Compass 1.x syntax)
  28. Unexpected results when using @extend for themes
  29. Styling a specific set of input types in a reusable way with Sass
  30. What does % mean in SASS?

Leave a Comment