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