I was writing custom CSS and intuitively used SCSS/SASS-style rule embedding:

#wrapper {
  .custom-vertical-align-bottom {
    vertical-align: bottom;

    img {
      vertical-align: bottom;
    }
  }
}

and found out that it worked. However, nothing on the custom CSS page ( https://itch.io/docs/creators/css-guide ) mentions SASS nor embedding. There is only a layout diagram and a note “Please place all your custom rules inside of #wrapper” which suggests that you can use embedding (otherwise it would require to add #wrapper in front of every rule) but it’s not very explicit either.

There are no CSS examples on the page either so it’s not clear what syntax is allowed or not.

I’d like to know the exact CSS rules, have some CSS examples, and know how much of SASS syntactic sugar (or even advanced features) is supported.

It would also be great to summarize on the Custom CSS page so users don’t have to search for this forum post.

I also noticed that the main game page (showing game collections) does not use a #wrapper container. Should we use another safety container class or directly work with .collection_description, etc. ? (this could also be explained on the CSS doc)

I don't think I have access to custom CSS but would just like to point out that nesting CSS blocks iare currently being developed into a part of the CSS standard and are already supported by many browsers: https://drafts.csswg.org/css-nesting-1/

Without nesting, the equivalent to 

#wrapper {
    .my-class {
        ...
    }
}

would just be

#wrapper .my-class { ... }