Open In App
Related Articles

Which directive is used to detect the errors in SASS ?

Improve Article
Save Article
Like Article

In order to detect the errors in SASS, one should use @debug Directive. It displays the SassScript expression values. It can be used when anyone wants to see the value of a variable or expression while developing the file.

Let’s see an example so that we get to know more information about the @debug directive in a practical way. Just follow these steps to know the implementation: 

  • First create a SASS file, for this example, I have named it debug.scss.
  • Now define some variables with their value.


    $style: (
        color: #00FF00
    $font-sizes: 15px+5px;
    .container {
      @debug $style;
      @debug $font-sizes;


  • The following command will start watching for changes in the SASS file and automatically generate the respective CSS file.
    sass --watch debug.scss:debug.css
  • Output will show the code which you have debugged using the @debug directive:

Example: Let’s see another example to get a clear idea about it. Follow the same steps as above.


$width: 350px;
$colors: (
    IndianRed: #CD5C5C,
    Salmon: #FA8072,
    LightCoral: #F08080
$font-sizes: heading, p, sm;
  @debug $width; /* single value */
  @debug $colors; /* map */
  @debug $font-sizes; /* list */


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 21 Oct, 2021
Like Article
Save Article
Similar Reads
Complete Tutorials