YogeshChauhan . com

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

dreamhost

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 uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 5 Use inline if to make a shorter conditional syntax in React May 4 What is Conditional Rendering in React? May 3 How does @extend rule work in SCSS (Sass)? May 2 How different is Handling Events in React vs HTML DOM? May 2 How to create bouncing balls using HTML canvas and JavaScript? Apr 30 HTML canvas methods

You might also like these

Revisiting variable scope in JavaScriptJavaScriptHow to change HTML content on click using JavaScript?JavaScriptWordPress 5.7 is migrating to latest jQuery version and people are freaking outjQueryOverview of Drupal and how it worksDrupalEverything you need to know about ANY, SOME and ALL Operators in PostgresPostgresQuery to increment or decrement value in MySQL ignoring negative valuesSQL/MySQL