Tutorials

Sass @debug

Posted in Sass Tutorial

Updated on Sep 29, 2024

By Mari Selvan

👁️ 52 - Views

⏳ 4 mins

💬 1 Comment

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

@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

$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

$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

@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

@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.