SCSS compiled with comments and structure

Question

I am using CODA2 to create a my SCSS files and then compile into CSS, with also using SCOUT.

I have just started using SCSS and think its great, really should of looked into alot earlier. Anyway, when I compile each set of SCSS in CODA, it goes into my style.css with a bunch of comments showing where the original SCSS was created

for example

/* line 111, ../sass/_block-elements.scss */

Also when I do some nesting, I don't know if its the correct way to go about it, but I think it may a bit long winded.

again my code that I arranged is as followed.

section.callouts{
.wrapper{
    text-align: center;
    margin: $center;
    width:95%;
        .about, .menu, .contact, .timetable, .social{
            float: left;
            width: 230px;
            margin: 0 $callout-padding 0 $callout-padding;
                .callout-info{
                    background-color: $white;
                    @include rounded-bottom-left;
                    @include rounded-bottom-right;
                    padding: $small-padding;
                }

As I have just picked up the ropes of SCSS, it does look to be a bit "raw"

Answer 1

All production CSS should be minified. That means no whitespace and (ideally) no comments in the compiled code that you serve to your users.

Structure your .scss files however you want and then set the environment to Production in the Scout app when you're ready to ship. Sass will minify the outputted CSS for you, and will not include the line number comments, as well as removing any of your // comments.

Answer 2

Here are some rules for SCSS.

Nesting: What nesting does, is essentially creates selectors as many words deep as your nesting is. When mixing @extends and nesting, these selectors can EASILY reach 30kb. Not exaggerating. My company faced that when all the newbies would go nesting crazy, nesting things just because that was the structure they saw in the HTML.

Keep your nesting to 3 levels, break off, start a new nesting chain if it gets deeper, or theres a new chunk to work on. You should have globals defined first. Just like regular CSS, you don't want to rewrite the same code just to make a box red with a drop shadow. Try mixins!

Ps you never asked a question... Not a single question mark in your post :P