Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass at-rules

Sass @debug

Posted in Sass Tutorial
Updated on Sep 29, 2024
By Mari Selvan
👁️ 21 - Views
⏳ 4 mins
💬 1 Comment
Sass @debug

Photo Credit to CodeToFun

🙋 Introduction

The @debug directive in Sass is an essential tool for developers who want to troubleshoot and understand their code better.

It allows you to output the value of variables, expressions, or any SassScript to the console during compilation.

This can be extremely useful for tracking down issues or understanding how certain values are being computed within your stylesheets.

💡 Syntax

The @debug directive is straightforward to use. You simply place it within your Sass code followed by the expression or variable you want to inspect.

Syntax
Copied
Copy To Clipboard
@debug <expression>;

🔢 Parameters

  • expression: Any valid SassScript expression, such as variables, function calls, or operations.

📝 Example Usage

Let's look at some examples to see how the @debug directive can help you while developing with Sass.

📜 Example 1: Debugging a Variable

example.scss
Copied
Copy To Clipboard
$primary-color: #3498db;

@debug $primary-color;

In this example, the value of the $primary-color variable will be printed to the console during compilation, helping you verify its value.

📜 Example 2: Debugging an Expression

example.scss
Copied
Copy To Clipboard
$width: 100px;
$padding: 20px;

@debug $width + $padding;

Here, the result of the expression $width + $padding will be printed to the console. This helps you ensure that the calculated value is what you expect.

📜 Example 3: Debugging in a Loop

example.scss
Copied
Copy To Clipboard
@for $i from 1 through 3 {
  @debug "Iteration: #{$i}";
}

This example outputs a message for each iteration of the loop, helping you track the loop's progress and the value of the iteration variable.

📜 Example 4: Using @debug in a Function

example.scss
Copied
Copy To Clipboard
@function double($number) {
  @debug $number;
  @return $number * 2;
}

$twice: double(10);

In this example, the @debug directive prints the value of $number each time the double() function is called, allowing you to see what value is being passed into the function.

📍 Output Location

The output of the @debug directive will typically be printed to the terminal or console where your Sass code is being compiled. If you're using a build tool like Gulp, Grunt, or Webpack, the debug messages will appear in their respective output consoles.

🎉 Conclusion

The @debug directive is a simple yet powerful tool for debugging your Sass code. By providing insight into the values and expressions within your stylesheets, it can help you identify and resolve issues more efficiently. Whether you're working with complex functions, loops, or simply want to verify variable values, @debug is an invaluable resource for any Sass developer.

Incorporating @debug into your workflow can lead to faster development times and more robust code, as it allows you to catch potential problems early in the process. Experiment with it in your projects to gain better control and understanding of your Sass code.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy