Skip to content

Instantly share code, notes, and snippets.

@freshyill

freshyill/SassMeister-input-HTML.html

Created May 10, 2014 00:35
Show Gist options
  • Save freshyill/917d73574c477f9571ae to your computer and use it in GitHub Desktop.
Save freshyill/917d73574c477f9571ae to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<ul class="items">
<li class="item">Thing 1</li>
<li class="item">Thing 2</li>
<li class="item">Thing 3</li>
<li class="item">Thing 4</li>
</ul>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----
$ands: (
de: "und",
en: "and",
es: "y",
fr: "et",
no: "og",
sv: "och"
);
.item {
display: inline;
white-space: nowrap;
&:not(:last-child):after {
content: ", ";
}
&:nth-last-child(2):not(:first-child) {
&:after {
content: ", and ";
}
}
&:nth-last-child(2):not(:nth-child(2)) {
&:after {
content: " and ";
}
}
@each $language, $word in $ands {
&:nth-last-child(2):not(:first-child) {
html[lang=#{$language}] &:after {
content: ", #{$word} ";
}
}
&:nth-last-child(2):not(:nth-child(2)) {
html[lang=#{$language}] &:after {
content: " #{$word} ";
}
}
}
}
Raw
SassMeister-output.css
.item { display: inline; white-space: nowrap; }
.item:not(:last-child):after { content: ", "; }
.item:nth-last-child(2):not(:first-child):after { content: ", and "; }
.item:nth-last-child(2):not(:nth-child(2)):after { content: " and "; }
html[lang=de] .item:nth-last-child(2):not(:first-child):after { content: ", und "; }
html[lang=de] .item:nth-last-child(2):not(:nth-child(2)):after { content: " und "; }
html[lang=en] .item:nth-last-child(2):not(:first-child):after { content: ", and "; }
html[lang=en] .item:nth-last-child(2):not(:nth-child(2)):after { content: " and "; }
html[lang=es] .item:nth-last-child(2):not(:first-child):after { content: ", y "; }
html[lang=es] .item:nth-last-child(2):not(:nth-child(2)):after { content: " y "; }
html[lang=fr] .item:nth-last-child(2):not(:first-child):after { content: ", et "; }
html[lang=fr] .item:nth-last-child(2):not(:nth-child(2)):after { content: " et "; }
html[lang=no] .item:nth-last-child(2):not(:first-child):after { content: ", og "; }
html[lang=no] .item:nth-last-child(2):not(:nth-child(2)):after { content: " og "; }
html[lang=sv] .item:nth-last-child(2):not(:first-child):after { content: ", och "; }
html[lang=sv] .item:nth-last-child(2):not(:nth-child(2)):after { content: " och "; }
Raw
SassMeister-rendered.html
<ul class="items">
<li class="item">Thing 1</li>
<li class="item">Thing 2</li>
<li class="item">Thing 3</li>
<li class="item">Thing 4</li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment