dots Created with Sketch.
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;
}

amazon

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

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
Query to increment or decrement value in MySQL ignoring negative valuesSQL/MySQLHow to change perception and behavior of a person for acceptance of new systems?MiscellaneousOverview of Drupal and how it worksDrupalDebugging in WordPress Part 2: WP_DEBUG_LOG and WP_DEBUG_DISPLAYWordPressCommon Table Expressions (CTE) in PostgreSQLPostgresHow to use Context in React?React