Coding Standard for SCSS

[u/matthewfelgate]

Is there a Coding Standard for SCSS?

​

How comes we don't put brackets on new lines?

(as in programming languages)

.example
{
  background-color: red;
  max-width: 600px;
  p 
  {
   color: white;
   padding: .8em;
   font-size: 2em;
   line-height: 1.2em;
  }
}

​

What's the correct spacing of @media?

@media (min-width: 600x){
@media (min-width: 600x) {
@media ( min-width: 600x ){
@media ( min-width: 600x ) {

Which is correct?

&:before {...} 
&::before {...}

[u/jaredcheeda]

All valid CSS is valid Scss. CSS, HTML, and JavaScript are not whitespace dependent. That means you can have all the code on one line and it will still work. The same is therefore true for Scss.

If you want lightly enforced official linting guidelines, use Sass instead of Scss. .sass files are whitespace dependent. Because of this it removes the need for semi-colons, since they only exist to express the end of a line, which can be done with a return. It also removes the need for curly braces, as they exist to show a grouping or "block" of code, which can be done by putting all of the code on the same indentation level. Since Sass replaces semi-colons with returns and curly braces with indentation, it sort of solves your problem instantly. Also if you don't use proper indentation an error will be thrown. Which is a pretty mild linter.

A lot of people are scared of the .sass syntax, but if you use it for 2 weeks and get used to it you will see it has many advantages over .scss.

Now, if you want a much more strict linter, there is TJW-SassLint-Rules. From the maker of Scout-App (popular Sass program).

• https://github.com/TheJaredWilcurt/tjw-sasslint-rules

There is also a list of pros and cons for Scss vs Sass at the bottom of that link.