- Sass Tutorial
- Sass - Home
- Sass - Overview
- Sass - Installation
- Sass - Syntax
- Using Sass
- Sass - CSS Extensions
- Sass - Comments
- Sass - Script
- Sass - @-Rules and Directives
- Control Directives & Expressions
- Sass - Mixin Directives
- Sass - Function Directives
- Sass - Output Style
- Extending Sass
- Sass Useful Resources
- Sass - Interview Questions
- Sass - Quick Guide
- Sass - Useful Resources
- Sass - Discussion
Sass - Debug Directives
Description
The @debug directive detects the errors and displays the SassScript expression values to the standard error output stream.
Example
Given below is the stylesheet file saved with extension .scss, which is similar to the css file.
debug.scss
$font-sizes: 10px + 20px; $style: ( color: #bdc3c7 ); .container { @debug $style; @debug $font-sizes; }
You can tell SASS to watch the file and update the CSS whenever SASS file changes, by using the following command −
sass --watch C:\ruby\lib\sass\debug.scss:debug.css
When you run the above command, it will create the debug.css file automatically. Whenever you change the SCSS file, the debug.css file will be updated automatically.
Output
Let's carry out the following steps to see how above code works and gives you debug error −
Save the above given code in debug.scss file.
Run the above mentioned command line in the command prompt.
sass_rules_and_directives.htm
Advertisements
To Continue Learning Please Login
Login with Google