Block-grid for Bootstrap

[jpcmf]

Hello. I'm trying to use this mixin in sass https://gist.github.com/Jursdotme/67abe379d4a357233d3c in stylus but it's not working. Is possible adpat this mixin for stylus? Any help is much appreciated. Thank you

[maxmx]

Unrelated to this repo, but here goes, I used a sass to stylus converter.

This will need to be imported after the clearfix mixin has been declared.

[class*="block-grid-"]
  display: block
  margin: -1 * ($grid-gutter-width/2);
  padding: 0
  clearfix()

.block-grid-item
  display: inline
  margin: 0
  padding: ($grid-gutter-width / 2)
  height: auto
  float: left
  list-style: none

block-grid($per-row)
  & > .block-grid-item
    width: (100% / $per-row)
    $nth-equation = #{$per-row}n + "+" + 1
    &:nth-of-type(n)
      clear: none
    &:nth-of-type({$nth-equation})
      clear: both

block-grids($size)
  .block-grid-{$size}-1
    block-grid(1)
  .block-grid-{$size}-2
    block-grid(2)
  .block-grid-{$size}-3
    block-grid(3)
  .block-grid-{$size}-4
    block-grid(4)
  .block-grid-{$size}-5
    block-grid(5)
  .block-grid-{$size}-6
    block-grid(6)
  .block-grid-{$size}-7
    block-grid(7)
  .block-grid-{$size}-8
    block-grid(8)
  .block-grid-{$size}-9
    block-grid(9)
  .block-grid-{$size}-10
    block-grid(10)
  .block-grid-{$size}-11
    block-grid(11)
  .block-grid-{$size}-12
    block-grid(12)

block-grids(xs)

@media (min-width: $screen-sm-min)
  block-grids(sm)

@media (min-width: $screen-md-min)
  block-grids(md)

@media (min-width: $screen-lg-min)
  block-grids(lg)

[jpcmf]

I found this converter right now, but it's not working

[jpcmf]

[14:15:35] Starting 'stylusSrc'... [14:15:35] Finished 'stylusSrc' after 2.96 ms Potentially unhandled rejection [110] ParseError: C:/xampp/htdocs/front-bootstrap/assets/css/mixins/block-grid.styl:19:26 15| block-grid($per-row) 16| & > .block-grid-item 17| width: (100% / $per-row) 18| 19| $nth-equation = #{$per-row}n + "+" + 1 --------------------------------^ 20| &:nth-of-type(n) 21| clear: none 22| &:nth-of-type({$nth-equation})

invalid right-hand side operand in assignment, got "selector #"

[jpcmf]

I figured out the problem in this line

$nth-equation = #{$per-row}n + "+" + 1

and replace for this and works

$nth-equation : (#{$per-row}n) + "+" + 1

This is only a syntax problem. Btw, thank you and I'm sorry to post this in this repo.

[maxmx]

Cool

I ended up testing locally and replaced that line with the s function

Thats guaranteed to work since I tried it.

[class*="block-grid-"]
  display: block
  margin: -1 * ($grid-gutter-width/2);
  padding: 0
  clearfix()

.block-grid-item
  display: inline
  margin: 0
  padding: ($grid-gutter-width / 2)
  height: auto
  float: left
  list-style: none

block-grid($per-row)
  & > .block-grid-item
    width: (100% / $per-row)
    $nth-equation = s('%sn+1', $per-row)
    &:nth-of-type(n)
      clear: none
    &:nth-of-type({$nth-equation})
      clear: both

block-grids($size)
  .block-grid-{$size}-1
    block-grid(1)
  .block-grid-{$size}-2
    block-grid(2)
  .block-grid-{$size}-3
    block-grid(3)
  .block-grid-{$size}-4
    block-grid(4)
  .block-grid-{$size}-5
    block-grid(5)
  .block-grid-{$size}-6
    block-grid(6)
  .block-grid-{$size}-7
    block-grid(7)
  .block-grid-{$size}-8
    block-grid(8)
  .block-grid-{$size}-9
    block-grid(9)
  .block-grid-{$size}-10
    block-grid(10)
  .block-grid-{$size}-11
    block-grid(11)
  .block-grid-{$size}-12
    block-grid(12)

block-grids(xs)

@media (min-width: $screen-sm-min)
  block-grids(sm)

@media (min-width: $screen-md-min)
  block-grids(md)

@media (min-width: $screen-lg-min)
  block-grids(lg)