Identify and fix inconsistent code indentation in a SCSS file

[SAUMILDHANKAR]

Dependency

• Explore, document and make a new issue to implement linters which can be installed locally #2651
• Add ESlint VS Code installation instructions #4264

Overview

As a developer, we need to make sure the code is easy to read. In this issue, we will identify and fix inconsistent indentation in _getting-started-page.scss using Lint SCSS

Action Items

• Use the linter developed in issue Explore, document and make a new issue to implement linters which can be installed locally #2651 to identify errors in _getting-started-page.scss file in your local VS code environment
• Make changes in the above SCSS file so that no error is displayed in your local environment
• Review Lint SCSS and Stylelint json file
• Make the necessary code changes (such as adding relevant indentation rules in Lint SCSS) and run the GitHub action to identify indentation errors in your own repo (Note: no errors should be displayed here as they have already been fixed once identified in the local environment)
• Create a pull request with the right indentations in _getting-started-page.scss as well as the code changes to identify inconsistent indentation using Lint SCSS
• Make sure the changes don't break the existing flow for other issues, such as submitting PR, merging a PR etc.

Checks

• Make sure lines with inconsistent indentation are identified while working in your own repo:
• Lines 172 to 199
• Lines 285 to 297

Resources/Instructions

• _getting-started-page.scss
• .github/workflows/lint-scss.yml
• github/super-linter README
• Related PR: Setting up GitHub Action for CSS and future linting #1957
• A list of the stylelint rules can be found here.

[github-actions]

Hi @SAUMILDHANKAR.

Good job adding the required labels for this issue. The merge team will review the issue and add a "Ready for Milestone" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to create issues
• Wiki: How to read and interpret labels