column-offset function

[xaddict]

I'm looking for an easy way to calculate just the offset of a column (think of bootstrap's col-sm-offset-3).

column-width(3/12) + column-gutter(1/12) would be an easy way to calculate this but both of those functions return a string.

To get rid of the string I need the following code:
$offset3: to-number(str-slice(column-width(3/12), 0, -2)) + $gutter + unquote("%");

where to-number is an annoying helper function just to get the percentage string to be recognised as a float.

Is there any way column-width and column-gutter can be modified to only return a float?

[corysimmons]

You're trying to get column-width + column-gutter? Or do you need half a gutter?

I think we could add something like span-width to do this.

[corysimmons]

I'd also heavily suggest you check out postcss-ant. It was specifically developed to get whatever sizes you could possibly imagine in an intuitive way.

For instance, here is a column, column + 1/2 gutter, column + full gutter: https://codepen.io/corysimmons/pen/dvNNbj?editors=1100

[xaddict]

yeah, column width (3/12) plus one whole gutter width. with a '12 column' grid the column-offset for 3/12 would (1/12 column + 1/12 gutter)*3

…

On Wed, 8 Mar 2017 at 21:35 Cory Simmons ***@***.***> wrote: I'd also heavily suggest you check out postcss-ant <http:///corysimmons/postcss-ant>. It was specifically developed to get whatever sizes you could possibly imagine in an intuitive way. For instance, here is a column, column + 1/2 gutter, column + full gutter: https://codepen.io/corysimmons/pen/dvNNbj?editors=1100 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#525 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADJIhOtfrdNIKGeXXjqZGTgFASYfIMvxks5rjxEogaJpZM4MXLoj> .

[xaddict]

Before Jeet I used to ONLY use Less CSS. And in LESS it's pretty easy (if Jeet supported LESS): @column2: column-width(2/12); // 14.1666666667% @gutter: column-gutter(1/12); // 3% .col-sm-offset-3 { margin-left: (@column2 + @gutter); } And the margin-left would be an added up percentage (17.1666666667%). No need for postCSS, just LESS compiling to CSS.

…

On Wed, 8 Mar 2017 at 23:13 Luuk Lamers ***@***.***> wrote: yeah, column width (3/12) plus one whole gutter width. with a '12 column' grid the column-offset for 3/12 would (1/12 column + 1/12 gutter)*3 On Wed, 8 Mar 2017 at 21:35 Cory Simmons ***@***.***> wrote: I'd also heavily suggest you check out postcss-ant <http:///corysimmons/postcss-ant>. It was specifically developed to get whatever sizes you could possibly imagine in an intuitive way. For instance, here is a column, column + 1/2 gutter, column + full gutter: https://codepen.io/corysimmons/pen/dvNNbj?editors=1100 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#525 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADJIhOtfrdNIKGeXXjqZGTgFASYfIMvxks5rjxEogaJpZM4MXLoj> .

[corysimmons]

Sorry, I hate, and have hated, LESS' syntax so I never ported Jeet to it.

Why would you need the full gutter? span() works by getting half gutter. I see a case for span-column() being introduced, but think your need might be too fringe to warrant more API.

So far as postcss-ant, if you're already into a project, then I wouldn't migrate, but for future projects you should really look into it. It works with any preprocessor (i.e. LESS) or even vanilla CSS.

I think wrapping what you're trying to do in a function is your best bet for now: https://codepen.io/corysimmons/pen/bqgrqo?editors=1100

And this should serve as a lesson that Sass, and other preprocessors, are grossly underpowered. I think they should be used for syntax sugar, but for libs, or anything custom, PostCSS is king.

@pixeldesu Thoughts on this issue?