3 ways to pass a variable in url() function in SCSS (Sass)

The url() function in CSS can either take a quoted string as a parameter or an unquoted string as a parameter.

1. Normal function with a quoted string

We can pass a quoted string in a normal function

$roboto-font-path: "../fonts/roboto";

@font-face {
    src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2");

    font-family: "Roboto";
    font-weight: 100;
}

2. Normal function with an arithmetic expression

We can pass the variable as it is and using + operator, make it an arithmetic expression.

$roboto-font-path: "../fonts/roboto";

@font-face {
    src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2");

    font-family: "Roboto";
    font-weight: 100;
}

3. Interpolated special function

We can pass it as an interpolated special function.

$roboto-font-path: "../fonts/roboto";

@font-face {
    src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2");

    font-family: "Roboto";
    font-weight: 100;
}

Compiled CSS

We’ll get the same CSS code after compiling the SCSS code above using any option.

@font-face {
  src: url("../fonts/roboto/Roboto-Thin.woff2") format("woff2");
  font-family: "Roboto";
  font-weight: 100;
}

Share this post