Basic (I think) Sass Question

[nuan]

Hello All:

I am trying to customize an existing Sass project, as a person with limited tech capability. Sass is so new, there is little info available online, and I can’t turn the specs into working samples myself. I don’t know what is needed so that people can give some advice, but maybe this will work.

I am just trying to change a header area. Right now, from left to right, it has several links above, and then under them a big link for the site, all positioned normally, with some spacing. Then, it has a login area, which I guess is padded out to the right side, the two parts are not close to each other on larger displays.

Here is the code for this part:

// Masthead
.masthead
    background-color: $header-color
    color: #fff
    a
        color: #fff
    & > div
        +rem('padding', 0 0 17px 0)
    .m-sm_nav_pod
        +rem('padding', 4px 0)
        +rem('margin', 0 0 14px 0)
        a
            +opacity(1.0)
            color: $txt-color-lightblue
            &:hover
                color: $txt-color-lightblue-over
                text-decoration: underline
            &:after
                color: desaturate(lighten($c-dark-cool-bg, 40%), 13%)
            &:hover:after
                text-decoration: none
    // Masthead Login
    .m-login_box
        +rem('padding', 8px 0 2px 17px)
        .masthead-title
            +rem('margin-bottom', 10px)
            color: $txt-color-lightblue
            strong
                color: #fff
                opacity: .99
                font-weight: 500
                font-size: 1.2em
                margin: 0 .2em 0 0
        .m-login_block_uts
            +rem('padding', 5px 0 0 0)
            input
                margin: 2px 10px 0 0
            input, label, a
                display: inline-block
                vertical-align: top
                line-height: 1
                color: desaturate($txt-color-lightblue, 10%)
        form p
            position: relative

My goal is pretty limited. I want to put in a picture instead of the big link of the site, and I want to put another picture next to it, in the middle. I may remove login completely or just push it over a bit more so everything will fit. I know this isn’t a total solution, but for now I just want to make this one small step.

So my question here is, where is the positioning in this code? All I see is padding , and the one position:relative. What creates the fairly big space in the middle?

I think I can just put an img (‘margin’, auto:0 auto:0) or something, and then probably position the next image with position: relative, but I am not sure…

Any direction would be very helpful, thanks in advance!

[nixnerd]

Is there any possible way you could put this on Codepen? It’s way easier to troubleshoot.

[__]

It’s way easier to troubleshoot.

…more like, “possible” to troubleshoot. The HTML markup is kinda relevant.

: )

[nuan]

Hmm, it seems codepen supports Sass. I will try.

[nixnerd]

The HTML markup is kinda relevant.

I would argue that if the SCSS is nested properly, we can pretty much see the HTML from the SCSS. That being said, it’s still easier to have it on Codepen so we can mess around with it in browser.

[__]

I would argue that if the SCSS is nested properly, we can pretty much see the HTML from the SCSS.

Hopefully, yes.

[nixnerd]

That’s the goal! :) On a side note, I really dig nesting. Keeps number of class names way down. However, I did read that you take a performance hit by doing this. I’d love to see benchmarks if you have them.

[nuan]

Ah yes of course the html would help ;-)

I will do this tomorrow for sure, would really love to get these pics in there without hacking the final css. Basically because I tried to hack the css and it didn’t work so well haha.

I think it should work fine, as it doesn’t involve any mixins or anything. Just hope codepen can read it. I still hope to only provide the partial code, to keep things simpler.

[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.

[Author]

Posts