Please explain to me how you can do layout using SASS?

Question

css

For the life of me, I don't understand.
All the time I did this:
- they give me a layout in .psd
- I study it blah blah blah
- then I make the frame of the block in HTML that I am going to typeset
- and already in the browser itself, using the console in chrome, I edit the CSS live, and after , ready-made styles, I just copy from the console and save to a file on the server
And now I became interested in SASS, I tried it not on a layout, but just spontaneously, and it seems to be normal !! BUT!! how can I make it up with it if I have always done it only through the console?
Maybe I'm old-fashioned, I'm trying to develop, but I can't even imagine how I will do it.
Thanks for the help, if anyone can help!

Answer 1

The same thing, only we write everything at once to a file, according to the layout, which we have already disassembled into blocks and styles in our head
Once every couple of minutes we look in the browser to check that there is no deviation from the idea
And the styles in the background are collected by the gulp or webpack

Answer 2

Well, if you do it just like you, it's really not very convenient.
Sass is good for BEM-like modularization and large projects. Although out of habit I already shove it everywhere.
I write 70% of the code in the editor without even looking at the browser. And only at the end I adjust everything to pixel-perfect. Try to turn it like this. In general, Sass has a lot of useful features. I won’t even list everything, because I got rid of CSS a long time ago

Answer 3

webpack can build CSS from SASS via node-sass. but SASS is for uh ruby ​​chtoli, so use SASS in the SCSS variant

Answer 4

have you tried avocode and sketchapp?