Is it possible to use Sass properties as arguments for my function?

Question

Is it possible to use Sass properties as arguments for my function?

My attempt to use SASS properties as arguments for my function seems to be failing miserably.

Is there a way I can achieve this, or is there a better solution to what I'm trying to do?

I am looking to dynamically change the values of variables based on screen width media queries within my function.

Currently:

@function myFunc($arg1, $arg2) {
    @debug "arg1 = #{$arg1} / arg2 = #{$arg2}";

    @return #{$arg1} * #{$arg2};
}

.my-class {
    // Initial values for mobile
    --var1: 10px;
    --var2: 20px;

    @media (--from-tablet-size) {
        --var1: 20px;
        --var2: 40px;
    }

    width: myFunc(--var1, ---var2);
}

The debug output shows that the function receives the strings --var1 and --var2 instead of their actual values...

DEBUG: arg1 = --var1 / arg2 = --var2

Is there a solution to this issue? Either by using properties as arguments like I am trying here, or through a different approach?

javascript html css sass

Answer 1

Answer №1

There seems to be some issues in your code:

To read CSS variables, you need to use var(), like this: var(--var1). For more information, check out: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
You cannot use CSS variables with SASS calculations or functions.
In SASS, you cannot multiply two numbers with units, for example, what do you expect from 10px * 20px? It should be something like 10 * 20px.

First recommendation: Use SASS variables

@function myFunc($arg1, $arg2) {
    @debug "arg1 = #{$arg1} / arg2 = #{$arg2}";

    @return $arg1 * $arg2;
}

.my-class {
    // Initial values for mobile
    $var1: 10;
    $var2: 20px;
    width: myFunc($var1, -$var2);

    @media (--from-tablet-size) {
        $var1: 20;
        $var2: 40px;
        width: myFunc($var1, -$var2);    
    }
}

Second recommendation: Use CSS variables

.my-class {
    // Initial values for mobile
    --var1: 10;
    --var2: 20px;

    @media (--from-tablet-size) {
        --var1: 20;
        --var2: 40px;
    }

    width: calc(var(--var1) * -1 * var(--var2));
}

Answer 2

There seems to be some issues in your code:

To read CSS variables, you need to use var(), like this: var(--var1). For more information, check out: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
You cannot use CSS variables with SASS calculations or functions.
In SASS, you cannot multiply two numbers with units, for example, what do you expect from 10px * 20px? It should be something like 10 * 20px.

First recommendation: Use SASS variables

@function myFunc($arg1, $arg2) {
    @debug "arg1 = #{$arg1} / arg2 = #{$arg2}";

    @return $arg1 * $arg2;
}

.my-class {
    // Initial values for mobile
    $var1: 10;
    $var2: 20px;
    width: myFunc($var1, -$var2);

    @media (--from-tablet-size) {
        $var1: 20;
        $var2: 40px;
        width: myFunc($var1, -$var2);    
    }
}

Second recommendation: Use CSS variables

.my-class {
    // Initial values for mobile
    --var1: 10;
    --var2: 20px;

    @media (--from-tablet-size) {
        --var1: 20;
        --var2: 40px;
    }

    width: calc(var(--var1) * -1 * var(--var2));
}

Is it possible to use Sass properties as arguments for my function?

Answer №1

Similar questions

The gem 'remotipart' does not display any server errors in Rails 4

Storing various data in separate tables using MySQL and Node.js

The dojo array implemented a new element, pushing out the old one

Difficulty arises when attempting to locate particular information within a Vue component using a method that is contained within the component

Removing files from the S3 bucket and database simultaneously. Execute each function sequentially

the overflow issue with Summernote's dropdown menu

Establishing a simple server with express

Utilizing the CSS REM unit to define element dimensions

What is the method to access an HTML page div using JavaScript?

Style your content using PHP and CSS to format text with multiple selectors

Sort function now accepts a limitless amount of arguments for sorting

Eliminate Bootstrap's validation glyphs

Different ways to notify a React/Next.js page that Dark Mode has been switched?

Executing a function that includes showModalDialog outside of an iframe might display the incorrect page

Tips for breaking apart elements of a JavaScript array when a specific delimiter is present in an object property

Utilize Express to deliver dynamically generated or stored images

Vue Error: "the main template must have one and only one root element"

Javascript error: The variable calculator_test has not been defined

Utilizing JQuery to modify CSS in a partial view

Encountered an error while trying to access an undefined property during an Angular Karma