Yogesh Chauhan's Blog

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

in SCSS on April 25, 2021

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;
}


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Dynamically generate names in SCSS (animation example)SCSSCan we execute conditions in SQL?SQL/MySQLWordPress: How to get ACF field values from another post?WordPressHow to create a simple text and image slider using CSS and JavaScript?CSSHow to add menu to your WordPress theme?WordPressWhat’s Interpolation in SCSS (Sass)?SCSS