CODEWITHSUNDEEP
sass
KadoBOT
KadoBOT

Reputation: 3154

How to deprecate Sass pure variables?

I have some Sass variables that I want to deprecate soon. How do I do it, without changing the implementation of it?

I want to allow the usage of variables below, but I want to show a message during the compilation step (whenever they are used), that the variables below are going to be deprecated. Is it possible? Also, can I display where the deprecated variable was used?

$screen-xs-min: 320px;
$screen-sm-min: 480px;
$screen-md-min: 768px;
$screen-lg-min: 992px;
$screen-xl-min: 1200px;
$screen-xs-max: ($screen-sm-min - 1);
$screen-sm-max: ($screen-md-min - 1);
$screen-md-max: ($screen-lg-min - 1);
$screen-lg-max: ($screen-xl-min - 1);

Upvotes: 2

Views: 529

Answers (1)

Erik van der Bas
Erik van der Bas

Reputation: 101

I was looking for the solution for this as well and created my own. Maybe this will help someone else.

@use "sass:list";
// The key is the deprecated variable, note the missing $. The value is the newly suggested one.
$deprecated: (
    "font-size-h1": "$font-size-h1-clamp",
    "font-size-h2": "$font-size-h2-clamp",
    "font-size-h3": "$font-size-h3-clamp",
    "font-size-h4": "$font-size-h4-clamp",
    "font-size-medium": "$font-size-medium-clamp",
    "font-size-large": "$font-size-large-clamp",
    "font-size-extra-large": "$font-size-extra-large-clamp",
);

@each $variable in $deprecated {
    @if variable-exists(list.nth($variable,1)) {
        @warn "The scss variable $#{list.nth($variable,1)} is deprecated. Please use #{list.nth($variable,2)} instead.";
    }
}

Upvotes: 1

Related Questions