- Instant help with your CSS coding problems

Fix the Using / for division outside of calc() is deprecated

Snippet added on Jul 18, 2023 by Mike

Question:

How to fix the Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.?

Answer:

@use "sass:math";
math.div($gutter / 3);

// OR simply
calc($gutter / 3);

Description:

In future new versions of sass, you will not be able to use slash as a division except for the calc() function. Current sass compilers such as dart-sass warn about this with the following warning message:

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($gutter, 3) or calc($gutter / 3)

More info and automated migrator: https://sass-lang.com/d/slash-div

You have two options to deal with the problem:

Use the math module and the math.div() function:
```
@use "sass:math";
math.div($gutter / 3);
```
Use the old calc() function:
```
calc($gutter / 3);
```

Reference:

Breaking changes in sass

Share "How to fix the Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.?"

Related snippets:

Tags:

deprecation, warning, sass, scss, division, calc, removed

Technical term:

Fix the Using / for division outside of calc() is deprecated waring

Trending articles

Use clip path in TailwindCSS Set focus border in TailwindCSS Create hover underline animation in TailwindCSS Truncate text in TailwindCSS Create triangles with TailwindCSS Create custom toggle button with TailwindCSS Implement Dark mode with TailwindCSS How to create custom checkboxes in TailwindCSS Fix the Unknown at rule @tailwind warning in VSCode Fix TailwindCSS breaks existing styles

Trending snippets

Remove focus border around input element Create endless rotation animation in CSS Add a box shadow to only one side of an element Center an absolute element in TailwindCSS Add dots if text is too long Add class to child when hovering on parent in TailwindCSS Add text shadow with Tailwind CSS Force line break in a long word using CSS Select the nth child in TailwindCSS Access child elements in TailwindCSS Create a neon effect with TailwindCSS How to use !important in TailwindCSS Change bullet size in HTML How to use CSS variables in TailwindCSS Write vertical text in HTML Set line spacing in CSS Select first child in TailwindCSS Disable text selection with CSS How to use calc() in TailwindCSS Create horizontal rule with text using TailwindCSS

Network articles

Fix the ReactDOM.render is no longer supported in React 18 How to run useEffect only once in React Declare existing global variable in TypeScript Set the required attribute in JavaScript Create symbolic link in Windows 11 Add data attribute to element in JavaScript Associate file type in VS Code Replace only the first occurrence of a string in PHP Convert INT to DATETIME in MySQL Remove the last character from a string in JavaScript Convert string to lowercase with JavaScript Round down a number in JavaScript Execute code after the page is loaded Add key prop to React fragment Navigate back to last cursor position in VS Code Get tomorrow's date in PHP PHP date difference Get last 30 days records in MySQL Enable compression in Apache using htaccess Setup Twitter Meta Tags

Interesting things

OpanAi's ChatGPT