SASS styleguide, it doesn't look pretty, what am I doing wrong?

Question

css

Hello, I started using sass, one of the jokes of sass in nesting. So when I use
this very nesting, then my style file, to put it mildly, turns out to be not very beautiful due to the fact that there can be a lot of nested tags. Need help. I'm adjusting the stripped-down code, in the uncut style it's still sadder. At the very end of the file, the problem is most
obvious

Answer 1

IMHO, by nesting you kill one of the basic concepts of extensibility - you increase the specificity. Such nesting that you, ideally, should not be at all (except in very specific cases), a maximum of 2, in rare cases 3 levels, no more.
I will also join Maxim Antonikhin 's comment - split it into files according to their area of ​​\u200b\u200bapplication (header, forms, special styles for a separate page, etc.).
PS also a large number of nested selectors increase the size of the css in the end, which can be noticeable.

Answer 2

Split into files. Striking immediately head, services.

Answer 3

Horrible to be honest. From scss, I only saw the use of nesting. Where at least variables, mixins? Nobody writes prefixes manually now. In general, you should read the Sass Guidelines .
The problem with nesting is from the active use of nested selectors and the cascade. Most of the popular methodologies are against this. BEM example.

Answer 4

"Beautiful styles" are obtained only by hand in pure CSS.
From nesting in your case only worse.
Look at the CSS in the browser after processing - there is a real tin HORRIBLE ... There are a lot of long selectors that you would not write by hand.

section.bullets table tr td.date span.title {    /* должен быть селектор .bullets .date .title */
  font-size: 12px;
  text-transform: uppercase;
  color: #777;
  font-weight: normal;
  display: block;
}
section.bullets table tr td.date span {      /* как максимум .bullets .date span */
  font-family: gotham;
  font-size: 16px;
  color: #777;
  font-weight: 600;
  display: block;
}
section.bullets table tr td.fav {      /* максимум селектор .bullets .fav */
  padding-right: 40px;
}
section.bullets table tr td.fav a.btn {        /* .bullets .fav .btn */
  text-decoration: none;
  padding-top: 8px;
  -webkit-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
}
section.bullets table tr td.fav a.btn:hover {    /* .bullets .fav .btn:hover */
  color: #5824dc;
  border-color: #5824dc;
  -webkit-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
}

If you want beautiful - write in pure CSS.
If you want to write fast - write in SASS
But in general THIS will not be the case !!! You need to clearly understand what will happen after deployment.