How to Prevent Division When Using Variables Separated by a Slash in CSS Property Values

How to prevent division when using variables separated by a slash in CSS property values

Use the #{} interpolation notation to treat your variables as strings. Since Sass cannot perform arithmetic on strings, the / gets treated as a literal slash instead of the division operator:

@mixin test($fontsize, $lineheight) {
    font: #{$fontsize}/#{$lineheight} sans-serif;
}

Slashes (`/`) in CSS values when using Less (e.g. in `font` shorthand)

Just ran into this issue, the escape function (for less.js anyway) is:
e()
Like this

font: @weight @size e('/') @height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;

how to avoid SCSS from recognizing slash symbol as a Division in a function

For your first mixin, you need to use interpolation:

@mixin grid_column_row($column_1,$column_2,$row_1,$row_2) {
   grid-column: #{$column_1}/#{$column_2};
   grid-row: #{$row_1}/#{$row_2};
}

For your second mixin, as indicated in the documentation:

Percentages in Sass work just like every other unit. They are not interchangeable with decimals, because in CSS decimals and percentages mean different things. For example, 50% is a number with % as its unit, and Sass considers it different than the number 0.5.

You can convert between decimals and percentages using unit arithmetic. math.div($percentage, 100%) will return the corresponding decimal, and $decimal * 100% will return the corresponding percentage. You can also use the math.percentage() function as a more explicit way of writing $decimal * 100%.

You can write your mixin as:

@mixin font-size_p($percent) {
   // Or + 0%, depending on how your want to write your percentage values
   font-size: $percent + 100%;
}

Or like this:

@mixin font-size_p($percent) {
   font-size: math.percentage($percent);
}

LESS CSS pass string to mixin

I'm not quite certain what you are seeking to have as output, but this:

.mixin(@paramName) {
  background: ~"...@{paramName}";
}

.mixin("Pdcbs/sjdhc+jdjhdf");

Produces this for me:

background: ...Pdcbs/sjdhc+jdjhdf;

What is the simplest way to divide a variable in SASS?

You are very close. It's a matter of the interpolation on the map-get that you have to remove. You can see the codepen for the compiled css.

$grid-gutter-widths: (
  xs:  30px,
  sm:  30px
);

$col-padding-xs:  map-get($grid-gutter-widths, xs) / 2; // returns 15px

div {
  padding-right: $col-padding-xs / 2; // returns 7.5px
}

Using a function in Sass is returning the string containing the name of the function rather than the result

Your function doesn't exist. You must declare it (or import it from another file) before you use it. Sass does not throw errors for non-existent functions because they have a similar syntax to CSS functions. So it assumes that if it isn't a Sass function that it must be a CSS function.

Related: Test whether a Sass function is defined

How to add dynamic font shorthand properties in scss with @mixin?

Here is the reference for font shorthand for scss.
https://www.sitepoint.com/sass-basics-operators/

The solution is

@mixin title($cat-font: 12px, $line-height: 18px) {
        font: normal #{$cat-font} / #{$line-height} 'Open Sans', serif;
}

a.title{
  @include title();
}

You will see in the css is:

a.title{
   font: normal 12px/18px 'Open Sans', serif;
}

Reference:

font-size: 16px / 24px // Outputs as CSS

    font-size: (16px / 24px) // Uses parentheses, does division

    font-size: #{$base-size} / #{$line-height}; // Uses interpolation, outputs as CSS

    font-size: $base-size / $line-height // Uses variables, does division

    opacity: random(4) / 5; // Uses a function, does division

    padding-right: 2px / 4px + 3px // Uses an arithmetic expression, does division

---

Related Topics