Skip to content

Instantly share code, notes, and snippets.

@jensgro
Last active December 18, 2015 09:59
Show Gist options
  • Save jensgro/5765019 to your computer and use it in GitHub Desktop.
Save jensgro/5765019 to your computer and use it in GitHub Desktop.
Build lists with Sass-placeholders
// ---
// Sass (v3.2.9)
// ---
// ------- Links -----------------------------
%a-tdn-tdu{
text-decoration: none;
&:hover, &:focus {text-decoration: underline;}
}
// -------- Listen -------------------------
// Die Basis - hier werden die Listenmarkierungen und Abstände entfernt.
%resetList{
list-style-type: none;
&, li {
margin-left: 0;
padding-left: 0;
}
}
%noList {
@extend %resetList;
a {
display: block;
@extend %a-tdn-tdu;
}
}
// einfache Liste ohne separate Abstände, Listenmarkierungen oder Linien
.simpleList {
@extend %noList;
}
// Listeneinträge haben untere Linie
.linedList {
@extend %noList;
li {
a {
border-top: 1px solid #cecece;
padding: 3px 0;
}
&:first-child a {
border-top: none;
padding-top: 0;
}
}
}
.simpleList a, .linedList a {
text-decoration: none;
}
.simpleList a:hover, .linedList a:hover, .simpleList a:focus, .linedList a:focus {
text-decoration: underline;
}
.simpleList, .linedList {
list-style-type: none;
}
.simpleList, .linedList, .simpleList li, .linedList li {
margin-left: 0;
padding-left: 0;
}
.simpleList a, .linedList a {
display: block;
}
.linedList li a {
border-top: 1px solid #cecece;
padding: 3px 0;
}
.linedList li:first-child a {
border-top: none;
padding-top: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment