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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
What is PostgreSQL? How similar or different it is from SQL?PostgresSolution for the error Commit failed – exit code 1 received in Desktop GithubMiscellaneousSQL ALL OperatorSQL/MySQLThe 7 Security Objectives of Any Organization for IT and Network SecurityMiscellaneousFull and Partial ROLLUP in Postgresql with ExamplesPostgresHow to display modal from bottom to top using CSS and JavaScript?CSS