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;
}
arguments functions parsing url variables