Skip to content

Commit 1d73782

Browse files
LukyVjLukyVj
committed
Remove each-after() mixin; See #37 & #61 
1 parent 54d0a75 commit 1d73782

File tree

13 files changed

+84
-100
lines changed

13 files changed

+84
-100
lines changed

‎build/index.html

+3-32
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<div aria-hidden id='pattern'></div>
1919
<section class='hero-container'>
2020
<h1>Family.scss</h1>
21-
<p><strong>Family.scss</strong> is a set of <strong><span id="amount"></span></strong> smart Sass mixins which will help you to manage the style of <code>:nth-child</code>’ified elements, in an easy and classy way.</p>
21+
<p><strong>Family.scss</strong> is a set of <strong><span id="amount">26</span></strong> smart Sass mixins which will help you to manage the style of <code>:nth-child</code>’ified elements, in an easy and classy way.</p>
2222
<div class='container-link'>
2323
<a class='btn cta w-icon' download='download' href='https://raw.githubusercontent.com/LukyVj/family.scss/master/source/src/family.scss'><svg aria-label="Reset" role="img"><use xlink:href="#icon-download" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> Download (4kb)</a>
2424
<a class='btn cta w-icon' href='https://github.com/LukyVj/family.scss'><svg aria-label="Reset" role="img"><use xlink:href="#icon-github" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> Github</a>
@@ -36,7 +36,6 @@ <h1>Family.scss</h1>
3636
<style id='style-n-between'></style>
3737
<style id='style-all-but'></style>
3838
<style id='style-each'></style>
39-
<style id='style-each-after'></style>
4039
<style id='style-from-first-last'></style>
4140
<style id='style-middle'></style>
4241
<style id='style-all-but-first-last'></style>
@@ -289,34 +288,6 @@ <h3>each</h3>
289288
<li>10</li>
290289
</ul>
291290
</div>
292-
<div class='row mixin'>
293-
<header>
294-
<h3>each-after</h3>
295-
</header>
296-
<pre><code id='each-after'><span class="param"> @include</span> each-after(<span class="num" contenteditable id="each-after-a">3</span>,<span class="num" contenteditable id="each-after-b">6</span>)&#x000A;</code></pre>
297-
<ul class='each-after'>
298-
<li>1</li>
299-
<li>2</li>
300-
<li>3</li>
301-
<li>4</li>
302-
<li>5</li>
303-
<li>6</li>
304-
<li>7</li>
305-
<li>8</li>
306-
<li>9</li>
307-
<li>10</li>
308-
<li>11</li>
309-
<li>12</li>
310-
<li>13</li>
311-
<li>14</li>
312-
<li>15</li>
313-
<li>16</li>
314-
<li>17</li>
315-
<li>18</li>
316-
<li>19</li>
317-
<li>20</li>
318-
</ul>
319-
</div>
320291
<div class='row mixin'>
321292
<header>
322293
<h3>from-first-last</h3>
@@ -629,12 +600,12 @@ <h2 class='title'>Playground</h2>
629600
<footer class='footer-section' role='contentinfo'>
630601
<p class='text-center'>Made with &lt;<a href="https://github.com/LukyVj/family.scss">code</a>&gt; by <a href="http://twitter.com/LukyVj">@LukyVj</a> - <a href="#about" data-toggle-modal>About</a></p>
631602
<div class='share'>
632-
<a href='https://twitter.com/intent/tweet?text=Family.scss%20-%20A%20set%20of%2027%20Sass%20mixins%20which%20will%20help%20you%20to%20manage%20your%20%3Anth-child%27ified%20elements%20http%3A%2F%2Flukyvj.github.io%2Ffamily.scss%2F%20via%20%40lukyvj'>
603+
<a href='https://twitter.com/intent/tweet?text=Family.scss%20-%20A%20set%20of%20%20Sass%20mixins%20which%20will%20help%20you%20to%20manage%20your%20%3Anth-child%27ified%20elements%20http%3A%2F%2Flukyvj.github.io%2Ffamily.scss%2F%20via%20%40lukyvj'>
633604
<img alt='Twitter logo' src='images/twitter-icon.svg'>
634605
</a>
635606
</div>
636607
<p class='version'>
637-
Version: <a href="https://github.com/LukyVj/family.scss/releases/">1.0.5</a>
608+
Version: <a href="https://github.com/LukyVj/family.scss/releases/">1.0.6</a>
638609
</p>
639610
</footer>
640611
<div class='about-section'>

‎build/javascripts/all.js

-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
'use strict';
22

33
window.onload = function(){
4-
getNbSamples()
54
childManager()
65
childIndex();
76
modalizer();
@@ -48,11 +47,6 @@ function mixPattern(num) {
4847
}
4948
}
5049

51-
function getNbSamples(){
52-
var n = document.getElementById('amount');
53-
var ex = document.querySelectorAll('.doc ul').length;
54-
n.textContent = ex;
55-
}
5650

5751
// Generate li incrementer
5852
function childManager(){

‎build/javascripts/demo.js

+12-4
Original file line numberDiff line numberDiff line change
@@ -234,10 +234,18 @@ document.getElementById('each').addEventListener('keyup', function(){
234234
function eachAfter(numa, numb) {
235235
function injectStyle(numa, numb){
236236
document.getElementById('style-each-after').innerHTML = `ul.each-after li { ${preStyle} }`;
237-
document.getElementById('style-each-after').innerHTML += `.each-after li:nth-child(${numb}n) ~ li:nth-child(${numa}n){
238-
${selectedStyle}
239-
}
240-
`
237+
// if (numb < numa ) {
238+
document.getElementById('style-each-after').innerHTML += `.each-after li:nth-child(${numb - numa}n) ~ :nth-child(${numa}n){
239+
${selectedStyle}
240+
}
241+
`
242+
// }
243+
// else {
244+
// document.getElementById('style-each-after').innerHTML += `.each-after li:nth-child(${numb}n) ~ :nth-child(${numa}n){
245+
// ${selectedStyle}
246+
// }
247+
// `
248+
// }
241249
}
242250

243251
var newStyle = injectStyle(numa, numb);

‎build/stylesheets/site.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎config.rb

+2-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@
2626
###
2727
# Helpers
2828
###
29-
config[:family_lib_version] = '1.0.5'
29+
config[:family_lib_version] = '1.0.6'
30+
config[:family_mixins_number] = '26'
3031

3132
# Methods defined in the helpers block are available in templates
3233
# helpers do

‎source/javascripts/all.js

-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
'use strict';
22

33
window.onload = function(){
4-
getNbSamples()
54
childManager()
65
childIndex();
76
modalizer();
@@ -48,11 +47,6 @@ function mixPattern(num) {
4847
}
4948
}
5049

51-
function getNbSamples(){
52-
var n = document.getElementById('amount');
53-
var ex = document.querySelectorAll('.doc ul').length;
54-
n.textContent = ex;
55-
}
5650

5751
// Generate li incrementer
5852
function childManager(){

‎source/javascripts/demo.js

+12-4
Original file line numberDiff line numberDiff line change
@@ -234,10 +234,18 @@ document.getElementById('each').addEventListener('keyup', function(){
234234
function eachAfter(numa, numb) {
235235
function injectStyle(numa, numb){
236236
document.getElementById('style-each-after').innerHTML = `ul.each-after li { ${preStyle} }`;
237-
document.getElementById('style-each-after').innerHTML += `.each-after li:nth-child(${numb}n) ~ li:nth-child(${numa}n){
238-
${selectedStyle}
239-
}
240-
`
237+
// if (numb < numa ) {
238+
document.getElementById('style-each-after').innerHTML += `.each-after li:nth-child(${numb - numa}n) ~ :nth-child(${numa}n){
239+
${selectedStyle}
240+
}
241+
`
242+
// }
243+
// else {
244+
// document.getElementById('style-each-after').innerHTML += `.each-after li:nth-child(${numb}n) ~ :nth-child(${numa}n){
245+
// ${selectedStyle}
246+
// }
247+
// `
248+
// }
241249
}
242250

243251
var newStyle = injectStyle(numa, numb);

‎source/layouts/partials/_demo.html.haml

+29-29
Original file line numberDiff line numberDiff line change
@@ -219,35 +219,35 @@
219219
%li 9
220220
%li 10
221221

222-
%div.row.mixin
223-
%header
224-
%h3 each-after
225-
%pre
226-
%code#each-after
227-
:preserve
228-
<span class="param"> @include</span> each-after(<span class="num" contenteditable id="each-after-a">3</span>,<span class="num" contenteditable id="each-after-b">6</span>)
229-
230-
%ul.each-after
231-
%li 1
232-
%li 2
233-
%li 3
234-
%li 4
235-
%li 5
236-
%li 6
237-
%li 7
238-
%li 8
239-
%li 9
240-
%li 10
241-
%li 11
242-
%li 12
243-
%li 13
244-
%li 14
245-
%li 15
246-
%li 16
247-
%li 17
248-
%li 18
249-
%li 19
250-
%li 20
222+
-# %div.row.mixin
223+
-# %header
224+
-# %h3 each-after
225+
-# %pre
226+
-# %code#each-after
227+
-# :preserve
228+
-# <span class="param"> @include</span> each-after(<span class="num" contenteditable id="each-after-a">3</span>,<span class="num" contenteditable id="each-after-b">6</span>)
229+
230+
-# %ul.each-after
231+
-# %li 1
232+
-# %li 2
233+
-# %li 3
234+
-# %li 4
235+
-# %li 5
236+
-# %li 6
237+
-# %li 7
238+
-# %li 8
239+
-# %li 9
240+
-# %li 10
241+
-# %li 11
242+
-# %li 12
243+
-# %li 13
244+
-# %li 14
245+
-# %li 15
246+
-# %li 16
247+
-# %li 17
248+
-# %li 18
249+
-# %li 19
250+
-# %li 20
251251

252252
%div.row.mixin
253253
%header

‎source/layouts/partials/_footer.html.haml

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
- version = config[:family_lib_version]
2+
- num = config[:family_mixin_number]
23

34
%footer.footer-section{:role => "contentinfo"}
45
%p.text-center Made with &lt;<a href="https://github.com/LukyVj/family.scss">code</a>&gt; by <a href="http://twitter.com/LukyVj">@LukyVj</a> - <a href="#about" data-toggle-modal>About</a>
56
-# %p from <span class="icon icon-algolia-light">Algolia</span>
67
.share
7-
%a{:href => "https://twitter.com/intent/tweet?text=Family.scss%20-%20A%20set%20of%2027%20Sass%20mixins%20which%20will%20help%20you%20to%20manage%20your%20%3Anth-child%27ified%20elements%20http%3A%2F%2Flukyvj.github.io%2Ffamily.scss%2F%20via%20%40lukyvj"}
8+
%a{:href => "https://twitter.com/intent/tweet?text=Family.scss%20-%20A%20set%20of%20#{num}%20Sass%20mixins%20which%20will%20help%20you%20to%20manage%20your%20%3Anth-child%27ified%20elements%20http%3A%2F%2Flukyvj.github.io%2Ffamily.scss%2F%20via%20%40lukyvj"}
89
%img{:alt => "Twitter logo", :src => "images/twitter-icon.svg"}/
910
%p.version
1011
Version: <a href="https://github.com/LukyVj/family.scss/releases/">#{version}</a>

‎source/layouts/partials/_hero-header.html.haml

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
1+
- version = config[:family_lib_version]
2+
- num = config[:family_mixins_number]
3+
14
%header{ :role => "banner" }
25
%div{ :id => "pattern", "aria-hidden" => true }
36

47
%section.hero-container
58
%h1 Family.scss
6-
%p <strong>Family.scss</strong> is a set of <strong><span id="amount"></span></strong> smart Sass mixins which will help you to manage the style of <code>:nth-child</code>’ified elements, in an easy and classy way.
9+
%p <strong>Family.scss</strong> is a set of <strong><span id="amount">#{num}</span></strong> smart Sass mixins which will help you to manage the style of <code>:nth-child</code>’ified elements, in an easy and classy way.
710
%div.container-link
811
%a{ :href => "https://raw.githubusercontent.com/LukyVj/family.scss/master/source/src/family.scss", :class => "btn cta w-icon", :download => "download"} <svg aria-label="Reset" role="img"><use xlink:href="#icon-download" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> Download (4kb)
912
%a{ :href => "https://github.com/LukyVj/family.scss", :class => "btn cta w-icon" } <svg aria-label="Reset" role="img"><use xlink:href="#icon-github" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg> Github
1013

1114
%script#_carbonads_js{ :async => "", :src => "//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=lukyvjgithubiofamilyscss", :type => "text/javascript" }
1215

13-
- ['first', 'last', 'after-first', 'from-end', 'between','even-between','odd-between', 'n-between', 'all-but', 'each', 'each-after', 'from-first-last', 'middle', 'all-but-first-last', 'first-of', 'last-of', 'at-least','at-most', 'in-between', 'child-index'].each do |i|
16+
- ['first', 'last', 'after-first', 'from-end', 'between','even-between','odd-between', 'n-between', 'all-but', 'each', 'from-first-last', 'middle', 'all-but-first-last', 'first-of', 'last-of', 'at-least','at-most', 'in-between', 'child-index'].each do |i|
1417
%style{ :id => "style-"+i }
1518

1619

‎source/src/family.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -109,8 +109,8 @@
109109
/// @param {number} $num - id of the child
110110
/// @param {offset} $offset - number of items before applying
111111
@mixin each-after($num, $offset) {
112-
&:nth-child(#{$offset}n) ~ li:nth-child(#{$num}n) {
113-
@content
112+
&:nth-child(#{$offset - $num}n) ~ :nth-child(#{$num}n) {
113+
@content;
114114
}
115115
}
116116

‎source/stylesheets/components/_demo.scss

+7-7
Original file line numberDiff line numberDiff line change
@@ -174,13 +174,13 @@ ul {
174174
}
175175
}
176176

177-
&.each-after {
178-
li {
179-
@include each-after(3, 6) {
180-
@include selected;
181-
}
182-
}
183-
}
177+
// &.each-after {
178+
// li {
179+
// @include each-after(3, 6) {
180+
// @include selected;
181+
// }
182+
// }
183+
// }
184184

185185
&.from-first-last {
186186
li {

‎source/stylesheets/vendors/_family.scss

+9-5
Original file line numberDiff line numberDiff line change
@@ -68,11 +68,15 @@
6868
}
6969
}
7070

71-
@mixin each-after($num, $offset) {
72-
&:nth-child(#{$offset}n) ~ li:nth-child(#{$num}n) {
73-
@content
74-
}
75-
}
71+
// This mixin is commented because of a bug
72+
// It has been removed for the v1.0.6
73+
// @mixin each-after($num, $offset) {
74+
// @if $num < $offset {
75+
// &:nth-child(#{$offset - $num}n) ~ :nth-child(#{$num}n) {
76+
// @content;
77+
// }
78+
// }
79+
// }
7680

7781
// Alias of each()
7882
@mixin every($num) {

0 commit comments

Comments
 (0)