Comments (5)
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)
from bootstrap-stylus.
I found this converter right now, but it's not working
from bootstrap-stylus.
[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 #"
from bootstrap-stylus.
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.
from bootstrap-stylus.
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)
from bootstrap-stylus.
Related Issues (20)
- Conflicting module names HOT 9
- @require mixins in modules for better dependency management HOT 2
- @extend .clearfix in mixins HOT 3
- Invalid import path in index.styl HOT 10
- Failed to locate @import file bootstrap/variables.styl HOT 3
- Why imported paths have "bootstrap" folder? HOT 4
- Import font files HOT 1
- navbar build fails HOT 5
- Tag v3.3.6 ?
- index.styl suppose under root? HOT 14
- Stylus bootstrap loaded but not compiled with Webpack HOT 18
- How would i go about adding a XL grid breakpoint with this? HOT 2
- Is the relative path in `index.styl` wrong? HOT 3
- Make it possible to deploy to Webjars HOT 1
- Question: which files just for the Bootstrap grid? HOT 3
- Error with Webpack Can't resolve '../fonts/glyphicons HOT 7
- Webpack's CSS Module and PostCSS loaders underisbly applied on Bootstrap as well
- Index.sty failed to locate imports HOT 1
- bootstrap 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootstrap-stylus.