Skip to content

Instantly share code, notes, and snippets.

View pentzzsolt's full-sized avatar

Zsolt Pentz pentzzsolt

14 followers · 7 following
View GitHub Profile
@pentzzsolt
pentzzsolt / sets.scss
Last active January 4, 2016 15:36
Example data structure for the Settify mixin's blog post on Medium.com
$sets: (
(#e81e49, #f45e30, #fed02f, #58bd1b, #11b38f, #0bbfce, #2b6bd1, #833ec3, #d23ad0, #fa3c88),
(#e81e49, #fed02f, #58bd1b, #2b6bd1, #833ec3, #fa3c88)
);
@pentzzsolt
pentzzsolt / structure.html
Last active January 4, 2016 15:37
Example HTML markup structure for the Settify mixin's blog post on Medium.com
<ul class="list">
<li class="list_item">Item</li>
<li class="list_item">Some more</li>
<li class="list_item">I'm also here</li>
<li class="list_item">We are a rainbow!</li>
[ ... ]
</ul>
@pentzzsolt
pentzzsolt / sets-1.css
Created January 4, 2016 15:39
Example CSS for the Settify mixin's blog post on Medium.com
.list_item:nth-of-type(1) {
color: #e81e49;
}
.list_item:nth-of-type(2) {
color: #f45e30;
}
.list_item:nth-of-type(3) {
color: #fed02f;
}
.list_item:nth-of-type(4) {
@pentzzsolt
pentzzsolt / sets-2.css
Created January 4, 2016 15:40
Example CSS for the Settify mixin's blog post on Medium.com
.list_item:nth-last-of-type(-n+6):first-of-type {
color: #e81e49;
}
.list_item:nth-last-of-type(-n+6):first-of-type ~ .list_item:nth-of-type(2) {
color: #fed02f;
}
.list_item:nth-last-of-type(-n+6):first-of-type ~ .list_item:nth-of-type(3) {
color: #58bd1b;
}
.list_item:nth-last-of-type(-n+6):first-of-type ~ .list_item:nth-of-type(4) {
@pentzzsolt
pentzzsolt / mixin-1.scss
Created January 4, 2016 15:45
Example mixin for the Settify mixin's blog post on Medium.com
@mixin settify($selector, $properties...) {
[...]
}
@pentzzsolt
pentzzsolt / mixin-2.scss
Created January 4, 2016 15:49
Example mixin for the Settify mixin's blog post on Medium.com
@for $i from 1 through (length($sets)) {
[...]
}
@pentzzsolt
pentzzsolt / mixin-3.scss
Created January 4, 2016 15:52
Example mixin for the Settify mixin's blog post on Medium.com Raw
@if $i == 1 {
//Base selectors: first - largest - color set.
}
@else {
//Rest of the color sets.
}
@pentzzsolt
pentzzsolt / mixin-4.scss
Created January 4, 2016 15:55
Example mixin for the Settify mixin's blog post on Medium.com Raw
@if $i == 1 {
@for $j from 1 through length(nth($sets, $i)) {
[...]
}
}
@else {
@for $j from 1 through length(nth($sets, $i)) {
[...]
}
}
@pentzzsolt
pentzzsolt / mixin-5.scss
Last active January 4, 2016 15:59
Example mixin for the Settify mixin's blog post on Medium.com Raw
&:nth-#{$selector}(#{$j}) {
@each $property in $properties {
#{$property}: nth(nth($sets, $i), $j);
}
}
@pentzzsolt
pentzzsolt / mixin-6.scss
Created January 4, 2016 16:01
Example mixin for the Settify mixin's blog post on Medium.com Raw
@if $j == 1 {
&:nth-last-#{$selector}(-n+#{length(nth($sets, $i))}):first-#{$selector} {
@each $property in $properties {
#{$property}: nth(nth($sets, $i), $j);
}
}
}
@else {
&:nth-last-#{$selector}(-n+#{length(nth($sets, $i))}):first-#{$selector} ~ #{nth(nth(&, 1), length(nth(&, 1)))}:nth-#{$selector}(#{$j}) {
@each $property in $properties {