Hover effects using HTML and SASS

Question

I recently created one of my first hover effects using HTML and SASS. Since it is my first hover effect, I'm almost positive that is it horribly inefficient. I'm sure there's a way to do this effect using half the number of lines of code, but I can't figure out any ways to do it. The hover effect in question is for the "envelop" logo at the top left.

Here's a codepen of my page so far.

HTML

<header>
 <div class="logocontainer">
 <a href="#"> 
 <h1 class="logoeffect-left">(</h1>
 <h1 class="logo">envelop</h1>
 <h1 class="logoeffect-right">)</h1>
 </a>
 </div>
</header>
<div class="wrapper">
<!-- remove the following line -->
 <p>finish navbar, mobile version formatting is still fucked up....</p>
</div>
<footer></footer>

CSS (SASS)

$green: #4ede96;
$logoAnimationTime: 0.2s;
@mixin mLogoEffect_pre
{
 color: white;
 font-size: 48px; 
 display: inline-block;
 transition: $logoAnimationTime 0 ease;
 opacity: 0;
}
header
{
 height: 100px;
 width: 100%;
 background: $green;
 position: fixed;
 top: 0;
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) 
 {
 height: 200px;
 }
 .logocontainer 
 {
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px)
 {
 margin-left: 35%;
 display: block;
 }
 padding-top: 15px;
 display: inline-block;
 > a
 {
 text-decoration: none;
 .logo
 {
 margin-top: 0;
 font-family: 'Merriweather', serif;
 font-size: 48px;
 padding: 0 50px; 
 color: white;
 display: inline-block;
 }
 .logoeffect-left
 {
 @include mLogoEffect_pre;
 margin-left: 70px;
 margin-right: -80px;
 margin-top: 0;
 margin-bottom: 0;
 }
 .logoeffect-right
 {
 @include mLogoEffect_pre; 
 margin-left: -80px;
 margin-top: 0;
 margin-bottom: 0;
 }
 &:hover
 {
 .logoeffect-left
 {
 transition: $logoAnimationTime 0 ease;
 margin-right: -50px;
 margin-left: 40px;
 opacity: 1;
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px)
 {
 //dont change anything (hide animation)
 @include mLogoEffect_pre;
 margin-left: 70px;
 margin-right: -80px;
 margin-top: 0;
 margin-bottom: 0;
 }
 }
 .logoeffect-right
 {
 transition: $logoAnimationTime 0 ease;
 margin-left: -50px;
 opacity: 1;
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px)
 {
 //dont change anything (hide animation)
 @include mLogoEffect_pre; 
 margin-left: -80px;
 margin-top: 0;
 margin-bottom: 0;
 }
 }
 }
 }
 }
}

Answer 1

HTML

The headline elements (h1-h6) are meant to be used only for headlines. You have 3 of them, 2 of which only contain punctuation. That's a misuse of the element. If you need markup that's purely for styling purposes, use a span.

<h1><span class="logoeffect-left">(</span>
 <span class="logo">envelop</span>
 <span class="logoeffect-right">)</span>
</h1>

CSS

There's almost no reason to use min-device-width over min-width. Ever. There's also no good reason to specify a minimum bound on your "handheld" media query. The following media query is just as effective, but significantly smaller:

@media only screen and (max-width : 480px) {
 // stuff
}

In a vast majority of cases, going mobile first with your media queries, rather than desktop first is going to get you smaller CSS.

// stuff all devices share
@media only screen and (min-width: 480px) {
 // stuff handheld devices don't need
}

You've got a significant amount of code duplication in your CSS because you're failing to take advantage of the cascade. For instance, you're including your mLogoEffect_pre mixin 4 times, when you only need it once:

.logoeffect-left, .logoeffect-right {
 @include mLogoEffect_pre;
}

Your entire hover section has way more code than it needs because you're setting/unsetting/resetting properties. It can be simply expressed like this:

&:hover
{
 .logoeffect-left
 {
 margin-right: -50px;
 margin-left: 40px;
 opacity: 1;
 }
 .logoeffect-right
 {
 margin-left: -50px;
 opacity: 1;
 }
}

I really must caution against splitting up your media queries like that. It really increases the size of your compiled CSS.

@media (min-width: 480px) {
 .one-selector { }
}
@media (min-width: 480px) {
 .another-selector { }
}
@media (min-width: 480px) {
 .yet-another-selector { }
}

Seems a little silly, don't you think? Media query bubbling is a fine feature of Sass, but it should be used conservatively. Much better:

@media (min-width: 480px) {
 .one-selector { }
 .another-selector { }
 .yet-another-selector { }
}

Learn to love shorthand:

.foo {
 margin-left: 70px;
 margin-right: -80px;
 margin-top: 0;
 margin-bottom: 0;
}

Compared to:

.foo {
 margin: 0 -80px 0 70px;
}

On your .logocontainer, you have margin-left: 35%; for handhelds. Why not just use text-align: right instead? This will allow you to avoid wrapping that occurs on very narrow devices.

http://codepen.io/cimmanon/pen/JbHAC