- This topic is empty.
May 6, 2014 at 10:31 pm #169393
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!May 7, 2014 at 11:34 am #169458
Is there any possible way you could put this on Codepen? It’s way easier to troubleshoot.May 7, 2014 at 12:55 pm #169469__Participant
It’s way easier to troubleshoot.
…more like, “possible” to troubleshoot. The HTML markup is kinda relevant.
: )May 7, 2014 at 1:14 pm #169472
Hmm, it seems codepen supports Sass. I will try.May 7, 2014 at 2:36 pm #169476
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.May 7, 2014 at 3:14 pm #169485__Participant
I would argue that if the SCSS is nested properly, we can pretty much see the HTML from the SCSS.
Hopefully, yes.May 7, 2014 at 3:17 pm #169488
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.May 10, 2014 at 10:38 am #169728
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.May 11, 2014 at 3:40 am #169781
Ok I put it in codepen, but it isn’t working right:
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.
- The forum ‘Other’ is closed to new topics and replies.