Sass (scss) Beispielcode

Divklassen mit generierten Zahlenwerten

Wenn man Divklassen abdecken will die sich nur durch eine Zahl unterscheiden (z.B. .leading-# bei einem Joomla Blog oder .col-md-# bei Bootstrapklassen), kann man dies einfach in Sass programmieren.
In diesem Beispiel werden alle Klassen von leading-1 bis leading-12 einbezogen (wichtig: leading-0 wird bei diesem Beispiel nicht berücksichtigt.

//scss code

$number: 12;

%leading-styles{
    .divbox{
        margin-top: 50px;
    }
}

@mixin blogLeadings{
    @for $i from 1 through $number{
        .leading-#{$i}{
            @extend %leading-styles;
        }
    }
}

HTML Anker | höhe anpassen und oder scrollen (parallax effekt)

HTML Anker haben für mich meistens das Problem, dass eine Stelle über dem Anker angesteuert werden soll (wo man ihn aber nicht immer setzen kann). Um das zu umgehen kann das Anker-Element via CSS verschoben werden.

1. Anker ID und Klasse (zum verschieben des Elements)

<a class="anchorPos" id="anker1"></a>

1.1 Zugehöriger CSS Code

a.anchorPos {
    display: block;
    position: relative;
    top: -250px;  //Die Verschiebung in Pixel
    visibility: hidden;
}

2. jQuery um einen Scrolleffekt (Parallax) zu bekommen. Den Code von Punkt 1 und 1.1 benötigt man nur wenn die Ankerlinks auf andere Seite als die mit dem Ankerlink verweisen sollen. Wenn man den Code von Punkt 1 nutzt, kann man target.offset auch auf 0 setzen.

(für joomla).

Für andere Systeme kann jQuery auch mit $ ersetzt werden.

//parallax effekt, anker scrolling
/*
              jQuery(function() {
                jQuery('a[href*="#"]:not([href="#"])').click(function() {
                  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                    var target = jQuery(this.hash);
                    target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
                    if (target.length) {
                      jQuery('html, body').animate({
                        scrollTop: target.offset().top -170 //pixel to scroll above the anchor
                      }, 1100); //scrolling speed
                      return false;
                    }
                  }
                });
              });

Quellen:

https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header