Wise people, please tell me what is better to use for automated creation of the style guide from the comments in scss

I will be very grateful

UPD

Sample comments:

// A button suitable for giving a star to someone. // :hover - Subtle hover highlight. // .star-given - A highlight indicating you've already given a star. // .star-given:hover - Subtle hover highlight on top of star-given styling. // .disabled - Dims the button to indicate it cannot be used.
  • describe a little more in detail. and add, plz, an example of a comment and what you want to get in the end. (PS: Isn’t comments in SCSS not ignored when compiling in CSS) (PPS: I apologize if I'm out of context) - bmsdave
  • // A button for a person. // //: hover - Subtle hover highlight. // .star-given - A highlight indicating a star. // .star-given: hover - Subtle hover highlight on top of star-given styling. // .disabled - it cant be used. - Julia Zaitseva
  • as a commentary option and everything should be added to the html file - Julia Zaitseva
  • Something like this github.com/SC5/sc5-styleguide - Julia Zaitseva
  • one
    @ Yuliya Zaitseva duck you didn’t bring a bad system as an example, why not use it?) - Vasily Barbashev

1 answer 1

I assume that the KSS tool will be an excellent option, you yourself led a sample of the comments, and that works with SCSS.

Actually, an example of comments with the code:

 // A button suitable for giving stars to someone. // // :hover - Subtle hover highlight. // .stars-given - A highlight indicating you've already given a star. // .stars-given:hover - Subtle hover highlight on top of stars-given styling. // .disabled - Dims the button to indicate it cannot be used. // // Styleguide 2.1.3. a.button.star{ … &.star-given{ … } &.disabled{ … } }

And an example of the generated docks is http://examplecss.io/buttons/

PS All examples from offsite.