Is it right to start using SASS(scss)?

Question

css

Until I got a full garden, I decided to consult ...
I am thrown from php into design in a day, but it turns out that way .. today I returned to css design using SASS (SCSS).
Only the lessons I use use SASS files - that is, indentation - without parentheses and semicolons - looks organic ..
But I decided to use SCSS syntax ... and to be honest, it looks like a garden when you use nested selectors?
I'm making a header

header {
  height:450px;
  background-color:$bg-color;
  
  .logo {
    width:50px;
    height:50px;
    background-color:#999;
  }
  nav {
    a {
      display: inline-block;
      margin-left: 20px;
      color:$white;
      text-decoration: none;

      font: {
        size:14px;
        weight:700;
      }
      text-transform: uppercase;
      &:hover{
        color:blue;
      }
    }
  }
}

Font.. was especially embarrassing, so is it possible?
and perhaps the biggest inconvenience is to manually save the mystyle.scss file each time - although I don’t change anything in it .. there are only a few @ imports.
Maybe something else to add besides the compass watch?

Answer 1

1) Nest selectors more than 1 level - hell and israel. In general, nested selectors should be used very rarely, mainly when it comes to a global change in the state of some component (for example, you added a class to a block, and relative to this class you changed the styles of nested block elements). Learn BEM or other CSS methodologies and you'll have fewer problems.
2) Using tags as selectors is almost always bad. As soon as you have to make changes, and for example, what you used to have "a" should turn into "li", you will suddenly sit in a puddle with your tags. Here again some css methodology will help you.
3) Using constructions like font: {} makes it very difficult to read styles, because at first it seems that this is another nested selector. Use the usual font-size/font-weight, and if you really want to compose all this into one font in the final styles, then use a plugin for gulp/grunta that will do this.

Answer 2

you can read everything about Sass here - sass-scss.ru

Answer 3

If you don't want to do it manually, take a look at Grunt .
At the expense you can / can not look immediately at the off. help, everything is written there. For example nested_properties you can see what we write and what it compiles into in the end (this is a question about font)