Hover effects using HTML and SASS 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

&lt;header&gt;
    &lt;div class="logocontainer"&gt;
        &lt;a href="#"&gt;                
            &lt;h1 class="logoeffect-left"&gt;(&lt;/h1&gt;
            &lt;h1 class="logo"&gt;envelop&lt;/h1&gt;
            &lt;h1 class="logoeffect-right"&gt;)&lt;/h1&gt;
        &lt;/a&gt;
    &lt;/div&gt;

&lt;/header&gt;

&lt;div class="wrapper"&gt;

&lt;!-- remove the following line --&gt;
    &lt;p&gt;finish navbar, mobile version formatting is still fucked up....&lt;/p&gt;
&lt;/div&gt;

&lt;footer&gt;&lt;/footer&gt;


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;

        &gt; 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;
            }

            &amp;: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;
                    }
                }
            }
        }


    }

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

&lt;h1&gt;&lt;span class="logoeffect-left"&gt;(&lt;/span&gt;
    &lt;span class="logo"&gt;envelop&lt;/span&gt;
    &lt;span class="logoeffect-right"&gt;)&lt;/span&gt;
&lt;/h1&gt;


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:

&amp;: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