The trick is to use * 1px
when you want to add a unit. Using +px
or interpolation (#{$numericValue}px
) turns it into a string.
$numericValue: 30;
$pixelValue: $numericValue * 1px;
$calc: $pixelValue * 2;
More Related Contents:
- To know the sass structure [closed]
- False positive “undefined variable” error when compiling SCSS
- Using Sass Variables with CSS3 Media Queries
- Sass .scss: Nesting and multiple classes?
- Sass – Manipulate inherited property?
- Append the parent selector to the end with Sass
- Sass Interpolation of Mixin, Function, and Variable names
- Why does Sass change the format of my colors?
- Is Sass 3.3 compatible with Compass?
- How to overwrite SCSS variables when compiling to CSS
- Can I import an externally hosted file with sass?
- Using a function in Sass is returning the string containing the name of the function rather than the result
- Math with interpolated variables?
- Sass combining parent using ampersand (&) with type selectors
- Define variables in Sass based on classes
- Sass calculate percent minus px
- Using variables for CSS properties in Sass
- Sass color variable not working inside darken()
- How to convert a number to a percentage with SASS? [duplicate]
- Skipping an optional argument in Sass mixin
- Can’t get sass + compass + susy installed due to version conflict
- Adding two values in Sass function creates double instance of ‘px’
- Interpolation of prefixes on @keyframes in Sass
- Is it possible to reference a further parent than just the one above?
- Gulp TypeError: Arguments to path.join must be strings
- webpack (with sass-loader) – scss file @import does not recognize resolve alias
- SASS compile fontawesome preserve notation
- Trying to use sass modules in create-react-app with the new @use syntax but receiving an error
- Unexpected results when using @extend for themes
- Styling a specific set of input types in a reusable way with Sass