Reply To: Basic (I think) Sass Question

[nuan]

Ok I put it in codepen, but it isn’t working right:

http://cdpn.io/Jkzmv

The spacing isn’t right, because somehow the login box ends up on the right side in the real one. That’s my whole point, how does the Sass space stuff out, where is that spacing?

I have a question about these div names as well, often I can’t find anywhere that seems to create these divs, how is this being done? For example, I can’t find a place where <div class="f1-f6 t1-t3 m-all"> is created.

The Sass seems to be working from the header class=”masthead” code, that’s where the Sass hooks into the html, but why have 3 levels of weird div names, which I can’t find in the code? And what do they do?

        <div class="wrapper h-group">
            <div class="f-padinfull f-all m-all">
                <div class="f1-f6 t1-t3 m-all">
                    <nav class="l-col_16">
                        <ul class="m-sm_nav_pod">
                            <li><a href="http://link.com/">link.com</a></li>
                            <li><a href="http://link.com">link.com</a></li>
                        </ul>
                    </nav>
                    <a class="logo" href="http://link.com" title="XXX Forums">XXX Forums</a>

At this point my only goal is to put 2 pics side by side in this code and get them in the right positions, I am more than willing to cut out the navigation if needed. I will muscle the login stuff way over to the right or even take it out of the flow completely, maybe put it at the bottom with position:absolute.

So, if anyone could help me navigate this, I would be very appreciative! Perhaps our discussion will help others as this Sass gets more common. I need to learn to read the Sass code better, its frustrating but ultimately will be worth it, I guess.