/RCP_basic_SCSS_linter

Create a linter for best practices on SCSS files. I did this project to push me in a real-life situation, creating a program with requirements and deadlines to output a functional product at the end.

Primary LanguageRuby

Basic scss file linter

Create a linter for best practices on SCSS files. I did this project to push me in a real-life situation creating a program with requirements and deadlines to output a functional product at the end.

Built With

  • Ruby
  • RSpec gem
  • Colorize gem
  • Strscan gem
  • VS Code

Requirements

  • Latest Ruby version.

Getting Started

To get a local copy up and running follow these simple example steps.

Instructions

To check for errors in your SCSS file run the code ruby bin/main.rb + absolute path to SCSS file you want to check.

  • You can check the Code running bin/main.rb ./scss_test_file/sass_file.scss in the project folder
  • If you have bad practices on the file will be displayed on the console like this.


  • If you don't have bad practices on your file will be displayed on the console like this.


How it works

The linter scans the SCSS file and shows you the errors:

  • Use of @mixin that generates duplicates code after compiling it use %placeholders to reduce it.
    Good practice

     %title-small {
     font-size: 15px;
     font-family: Roboto;
     color: #F2F2F2;
 }
 .blog-title {
     @extend %title-small;
 }
 .page-title {
     @extend %title-small;
 }

    Bad practice

     @mixin primary-title ($fontSize) {
     font-family: Quicksand;
     font-weight: 600;
     font-size: $fontSize;
 }

 .blog-title {
      @include primary-title(15px);
 }
 .page-title {
      @include primary-title(19px);
 }

  • Missed semicolon ERROR.
    Good practice

     .bg_color {
     background: red;
 }

    Bad practice

     .bg_color {
     background: red
 }

  • Unclosed block ERROR.
    Good practice

     .bg_color {
     background: red;
 }

    Bad practice

     .bg_color {
     background: red;

  • Found CamelCase, snake, lowerCamelCase ERROR.
    Good practice

     .fh-selector {
   font-size: 21rem;
 }

 .htag-selector {
   font-size: 15rem;
 }

    Bad practice

     .FhSelector {
   font-size: 21rem;
 }

 .htagSelector {
   font-size: 15rem;
 }

Running Tests

  • Open the console
  • Navigate to the RCP_basic_scss_file_linter project
  • Run rspec
  • The spec folder contains the test file with a Helper.

Author

👤 Kender Bolívar

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Acknowledgments

Show your support

Give a ⭐️ if you like this project!