Skip to content

Instantly share code, notes, and snippets.

@jackie
Created January 16, 2014 22:39
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 jackie/8464898 to your computer and use it in GitHub Desktop.
Save jackie/8464898 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
.all
-['axal',
'sean',
'dave',
'andrew',
'dmitry',
'tom',
'malcolm',
'bryan',
'chrisf',
'kevin',
'chenry',
'dallas',
'jackie',
'jess',
'john',
'kras',
'ko',
'manny',
'mark',
'klein',
'sherov',
'matt',
'nina',
'rachel',
'prince'].each do |dev|
%div{:class => "dev #{dev}"}
// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----
$devs: axal, sean, dave, andrew, dmitry, tom, malcolm, bryan, chrisf, kevin, chenry, dallas, jackie, jess, john, kras, ko, manny, mark, klein, sherov, matt, nina, rachel, prince;
@each $dev in $devs {
.#{$dev} {
background: #005cff;
&:after {
content: "#{$dev}";
}
}
}
html {
font-family: sans-serif;
}
.dev {
background: #ccc;
width: 80px;
height: 80px;
float: left;
margin-right: 5px;
margin-bottom: 5px;
padding: 5px;
}
.dev:not(.jackie) {
background: pink;
}
// .dev:not(.jackie) + .dave ~ .dev {
// background: orange;
// }
.axal {
background: #005cff;
}
.axal:after {
content: "axal";
}
.sean {
background: #005cff;
}
.sean:after {
content: "sean";
}
.dave {
background: #005cff;
}
.dave:after {
content: "dave";
}
.andrew {
background: #005cff;
}
.andrew:after {
content: "andrew";
}
.dmitry {
background: #005cff;
}
.dmitry:after {
content: "dmitry";
}
.tom {
background: #005cff;
}
.tom:after {
content: "tom";
}
.malcolm {
background: #005cff;
}
.malcolm:after {
content: "malcolm";
}
.bryan {
background: #005cff;
}
.bryan:after {
content: "bryan";
}
.chrisf {
background: #005cff;
}
.chrisf:after {
content: "chrisf";
}
.kevin {
background: #005cff;
}
.kevin:after {
content: "kevin";
}
.chenry {
background: #005cff;
}
.chenry:after {
content: "chenry";
}
.dallas {
background: #005cff;
}
.dallas:after {
content: "dallas";
}
.jackie {
background: #005cff;
}
.jackie:after {
content: "jackie";
}
.jess {
background: #005cff;
}
.jess:after {
content: "jess";
}
.john {
background: #005cff;
}
.john:after {
content: "john";
}
.kras {
background: #005cff;
}
.kras:after {
content: "kras";
}
.ko {
background: #005cff;
}
.ko:after {
content: "ko";
}
.manny {
background: #005cff;
}
.manny:after {
content: "manny";
}
.mark {
background: #005cff;
}
.mark:after {
content: "mark";
}
.klein {
background: #005cff;
}
.klein:after {
content: "klein";
}
.sherov {
background: #005cff;
}
.sherov:after {
content: "sherov";
}
.matt {
background: #005cff;
}
.matt:after {
content: "matt";
}
.nina {
background: #005cff;
}
.nina:after {
content: "nina";
}
.rachel {
background: #005cff;
}
.rachel:after {
content: "rachel";
}
.prince {
background: #005cff;
}
.prince:after {
content: "prince";
}
html {
font-family: sans-serif;
}
.dev {
background: #ccc;
width: 80px;
height: 80px;
float: left;
margin-right: 5px;
margin-bottom: 5px;
padding: 5px;
}
.dev:not(.jackie) {
background: pink;
}
<div class='all'>
<div class='dev axal'></div>
<div class='dev sean'></div>
<div class='dev dave'></div>
<div class='dev andrew'></div>
<div class='dev dmitry'></div>
<div class='dev tom'></div>
<div class='dev malcolm'></div>
<div class='dev bryan'></div>
<div class='dev chrisf'></div>
<div class='dev kevin'></div>
<div class='dev chenry'></div>
<div class='dev dallas'></div>
<div class='dev jackie'></div>
<div class='dev jess'></div>
<div class='dev john'></div>
<div class='dev kras'></div>
<div class='dev ko'></div>
<div class='dev manny'></div>
<div class='dev mark'></div>
<div class='dev klein'></div>
<div class='dev sherov'></div>
<div class='dev matt'></div>
<div class='dev nina'></div>
<div class='dev rachel'></div>
<div class='dev prince'></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment