Skip to content

Instantly share code, notes, and snippets.

@rymizuki
Created March 13, 2014 06:03
Show Gist options
  • Save rymizuki/9522618 to your computer and use it in GitHub Desktop.
Save rymizuki/9522618 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.1)
// Compass (v1.0.0.alpha.18)
// ----
// components
%box-list {
display: block;
&__item {
display: block;
margin: 0;
padding: 0;
&__link {
display: block;
color: blue;
}
}
}
.box-list {
@extend %box-list;
.item {
@extend %box-list__item;
& > a { @extend %box-list__item__link; }
}
}
// module
%nav-list {
@extend %box-list;
&__item {
@extend %box-list__item;
& > a {
@extend %box-list__item__link;
}
}
&--horizontal {
display: box;
box-orient: horizontal;
box-flex: 1;
}
}
.nav-list { // ul or olを想定
@extend %nav-list;
& > li {
@extend %nav-list__item;
}
}
// theme
.site-nav {
@extend %nav-list;
@extend %nav-list--horizontal;
& > li {
@extend %nav-list__item;
}
}
.box-list, .nav-list, .site-nav {
display: block;
}
.box-list .item, .nav-list > li, .site-nav > li {
display: block;
margin: 0;
padding: 0;
}
.box-list .item > a, .nav-list > li > a, .site-nav > li > a {
display: block;
color: blue;
}
.site-nav {
display: box;
box-orient: horizontal;
box-flex: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment