Skip to content

Instantly share code, notes, and snippets.

@easingthemes
Last active November 1, 2021 12:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save easingthemes/7042e1b6d706b2a3a3ee6dd83e68a4a6 to your computer and use it in GitHub Desktop.
Save easingthemes/7042e1b6d706b2a3a3ee6dd83e68a4a6 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
@import 'breakpoint-sass/stylesheets/breakpoint';
$b-xs: 480px;
$b-m: 768px;
$b-l: 1024px;
$b-xl: 1280px;
@mixin skeleton-items-content($element) {
$selectors: '';
@for $i from 1 through 4 {
$selectors: $selectors + '&.' + $element + '-' + $i + ':nth-child(-n + ' + $i + '),';
}
#{$selectors} {
@content;
}
}
@mixin skeleton-items {
$breakpoints: ($b-xs: 'xs', $b-m: 'm', $b-l: 'l', $b-xl: 'xl');
@each $key, $value in $breakpoints {
@include breakpoint(#{$key}) {
@include skeleton-items-content($value) {
@content;
};
}
}
}
.searchresults__skeleton {
&--item {
@include skeleton-items {
display: inline-block;
};
}
}
@media (min-width: 480px) {
.searchresults__skeleton--item.xs-1:nth-child(-n + 1), .searchresults__skeleton--item.xs-2:nth-child(-n + 2), .searchresults__skeleton--item.xs-3:nth-child(-n + 3), .searchresults__skeleton--item.xs-4:nth-child(-n + 4) {
display: inline-block;
}
}
@media (min-width: 768px) {
.searchresults__skeleton--item.m-1:nth-child(-n + 1), .searchresults__skeleton--item.m-2:nth-child(-n + 2), .searchresults__skeleton--item.m-3:nth-child(-n + 3), .searchresults__skeleton--item.m-4:nth-child(-n + 4) {
display: inline-block;
}
}
@media (min-width: 1024px) {
.searchresults__skeleton--item.l-1:nth-child(-n + 1), .searchresults__skeleton--item.l-2:nth-child(-n + 2), .searchresults__skeleton--item.l-3:nth-child(-n + 3), .searchresults__skeleton--item.l-4:nth-child(-n + 4) {
display: inline-block;
}
}
@media (min-width: 1280px) {
.searchresults__skeleton--item.xl-1:nth-child(-n + 1), .searchresults__skeleton--item.xl-2:nth-child(-n + 2), .searchresults__skeleton--item.xl-3:nth-child(-n + 3), .searchresults__skeleton--item.xl-4:nth-child(-n + 4) {
display: inline-block;
}
}
{
"sass": {
"compiler": "libsass/3.5.5",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment