New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with flexbox in sass #197

Closed
Alexzanderk opened this Issue Dec 14, 2015 · 19 comments

Comments

Projects
None yet
5 participants
@Alexzanderk

Alexzanderk commented Dec 14, 2015

I have problem with flex box.
When I write the code in my style.sass

@lost flexbox flex

section 
  lost-center: 980px

div 
  lost-column: 1/3

Everything's broken!! How I must write this @lost flexbox flex in style.sass?

@Alexzanderk Alexzanderk changed the title from Problem with flee box in sass to Problem with flexbox in sass Dec 15, 2015

@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Dec 29, 2015

Owner

@wellapex Could you provide a bit more code as reference to help see what's up?

Thanks! 😄

Owner

peterramsing commented Dec 29, 2015

@wellapex Could you provide a bit more code as reference to help see what's up?

Thanks! 😄

@Keats

This comment has been minimized.

Show comment
Hide comment
@Keats

Keats Jan 2, 2016

I think the issue is that all the docs are using postcss and there's nohting on how to use it from sass or less etc

Keats commented Jan 2, 2016

I think the issue is that all the docs are using postcss and there's nohting on how to use it from sass or less etc

@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Jan 2, 2016

Owner

@Keats I hear you. There should be a way to make it clearer for those using preprocessors as this has come up several times.

In theory, there shouldn't be any special docs needed for preprocessors like Sass or LESS. The properties should be treated like margin-right might. The preprocessor passes it along without any care. So just like margin or padding doesn't care about the preprocessor neither should lost-column. @Keats Does that help? I think this might be wort documenting a bit better and having some examples to show this.

Owner

peterramsing commented Jan 2, 2016

@Keats I hear you. There should be a way to make it clearer for those using preprocessors as this has come up several times.

In theory, there shouldn't be any special docs needed for preprocessors like Sass or LESS. The properties should be treated like margin-right might. The preprocessor passes it along without any care. So just like margin or padding doesn't care about the preprocessor neither should lost-column. @Keats Does that help? I think this might be wort documenting a bit better and having some examples to show this.

@Keats

This comment has been minimized.

Show comment
Hide comment
@Keats

Keats Jan 2, 2016

From my point of view, not sure about @wellapex :
I'm currently looking for a grid for an app and I've looked at Susy, Foundation for apps and ended up on this one. Since I don't use postcss (well apart from autoprefixer), I don't really know how it would fit in my build, ie i'm guessing i need to put a gulp-postcss call somewhere but having how to use at the top of the README would be nice

Keats commented Jan 2, 2016

From my point of view, not sure about @wellapex :
I'm currently looking for a grid for an app and I've looked at Susy, Foundation for apps and ended up on this one. Since I don't use postcss (well apart from autoprefixer), I don't really know how it would fit in my build, ie i'm guessing i need to put a gulp-postcss call somewhere but having how to use at the top of the README would be nice

@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Jan 2, 2016

Owner

You're totally right about getting something at the top of the README.md. Since inheriting this project last week I'm tying to prioritize what things to do and when. Documentation is coming soon but just not quite yet. This doc is going to be replaced soon but might help.

I also have a testing project that has gulp working.

Owner

peterramsing commented Jan 2, 2016

You're totally right about getting something at the top of the README.md. Since inheriting this project last week I'm tying to prioritize what things to do and when. Documentation is coming soon but just not quite yet. This doc is going to be replaced soon but might help.

I also have a testing project that has gulp working.

@corysimmons

This comment has been minimized.

Show comment
Hide comment
@corysimmons

corysimmons Jan 2, 2016

Contributor

@peterramsing It might be a good idea to create a few different repos:

  • lost-css-example
  • lost-scss-example
  • lost-sass-example
  • lost-less-example
  • lost-stylus-example

And just make them as barebones as possible demos. Then you can link to them in the README as well as on the future website, as well as in these Issues.

It'd also be nice to have just to confirm Lost works in all the preprocessors without special treatment.

I know you've got a lot going on, so feel free to backburner this.

I'd also try to start collecting other people's Lost projects in a Wiki or something to send people to who are curious about more complex uses.

Contributor

corysimmons commented Jan 2, 2016

@peterramsing It might be a good idea to create a few different repos:

  • lost-css-example
  • lost-scss-example
  • lost-sass-example
  • lost-less-example
  • lost-stylus-example

And just make them as barebones as possible demos. Then you can link to them in the README as well as on the future website, as well as in these Issues.

It'd also be nice to have just to confirm Lost works in all the preprocessors without special treatment.

I know you've got a lot going on, so feel free to backburner this.

I'd also try to start collecting other people's Lost projects in a Wiki or something to send people to who are curious about more complex uses.

@Keats

This comment has been minimized.

Show comment
Hide comment
@Keats

Keats Jan 2, 2016

Completely missed the Installation link in the readme as it's part of the table of content but is actually a link

Keats commented Jan 2, 2016

Completely missed the Installation link in the readme as it's part of the table of content but is actually a link

@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Jan 2, 2016

Owner

@Keats Would you mind creating a Gist and copy the raw README.md in there and somehow identify anything that is confusing to you? You're more than welcome to explain exactly what is confusing but even if you just identify areas that don't make sense that would be amazing! I'll take that to help write update the existing README and also where I need to focus on the documentation.

Hopefully that can help answer questions for you as well! No pressure of course. Let me know if I can help in any way with your app.

PS: I'm not asking out of lazy, I promise. I've just gone through it enough that I don't spot the things that need attention. 😄

Owner

peterramsing commented Jan 2, 2016

@Keats Would you mind creating a Gist and copy the raw README.md in there and somehow identify anything that is confusing to you? You're more than welcome to explain exactly what is confusing but even if you just identify areas that don't make sense that would be amazing! I'll take that to help write update the existing README and also where I need to focus on the documentation.

Hopefully that can help answer questions for you as well! No pressure of course. Let me know if I can help in any way with your app.

PS: I'm not asking out of lazy, I promise. I've just gone through it enough that I don't spot the things that need attention. 😄

@Keats

This comment has been minimized.

Show comment
Hide comment
@Keats

Keats Jan 3, 2016

I'll do that next week but from a quick look the readme seems to be doing the job of a website, ie something like http://neat.bourbon.io/examples/
Another really cool thing to do (if there is time) is examples like http://foundation.zurb.com/apps/page-templates.html

Keats commented Jan 3, 2016

I'll do that next week but from a quick look the readme seems to be doing the job of a website, ie something like http://neat.bourbon.io/examples/
Another really cool thing to do (if there is time) is examples like http://foundation.zurb.com/apps/page-templates.html

@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Jan 3, 2016

Owner

@Keats You're reading my mind. I'm currently looking for the best option for creating the docs. I'm hoping to have them out of the README soon. There is currently a page that has some examples but there is no documentation that goes with it. This is also coming soon. Not enough time in the day, I suppose.

Owner

peterramsing commented Jan 3, 2016

@Keats You're reading my mind. I'm currently looking for the best option for creating the docs. I'm hoping to have them out of the README soon. There is currently a page that has some examples but there is no documentation that goes with it. This is also coming soon. Not enough time in the day, I suppose.

@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Jan 3, 2016

Owner

@Keats And thanks for your help!

Owner

peterramsing commented Jan 3, 2016

@Keats And thanks for your help!

@Keats

This comment has been minimized.

Show comment
Hide comment
@Keats

Keats Jan 5, 2016

I'll just comment here rather than making a gist:

  • Installation in table of contents is a link to the wiki, not a part of the README like you would expect. How to use with gulp/grunt and sass/stylus/less/etc would be better imo
  • I don't find comparison tables useful if you need to click to see what the author meant for a row and a paragraph is usually better imo, comparing like that always feel like a bad selling technique. So a paragraph/list at the beginning explaining what lost is, what does it do, what is a waffle grid (still not sure about that one, a visual explanation would help), that it can do flexbox grid (and drawbacks/advantages) etc
  • Keep the global settings and move all the api docs to the website
  • Eventually link to some examples repo if it exists

Overall as I said before, more stuff on the website since you can have visual examples there.
I'll probably try to use Lost this week so I might have more to add after that

Keats commented Jan 5, 2016

I'll just comment here rather than making a gist:

  • Installation in table of contents is a link to the wiki, not a part of the README like you would expect. How to use with gulp/grunt and sass/stylus/less/etc would be better imo
  • I don't find comparison tables useful if you need to click to see what the author meant for a row and a paragraph is usually better imo, comparing like that always feel like a bad selling technique. So a paragraph/list at the beginning explaining what lost is, what does it do, what is a waffle grid (still not sure about that one, a visual explanation would help), that it can do flexbox grid (and drawbacks/advantages) etc
  • Keep the global settings and move all the api docs to the website
  • Eventually link to some examples repo if it exists

Overall as I said before, more stuff on the website since you can have visual examples there.
I'll probably try to use Lost this week so I might have more to add after that

@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Jan 6, 2016

Owner

@Keats This is helpful to know were some of the major pain-points are. Thanks for taking the time to note them here! Really appreciate it!

Owner

peterramsing commented Jan 6, 2016

@Keats This is helpful to know were some of the major pain-points are. Thanks for taking the time to note them here! Really appreciate it!

@sdale-fevo

This comment has been minimized.

Show comment
Hide comment
@sdale-fevo

sdale-fevo Jan 10, 2016

Hi,
We're having a similar issue as @wellapex, I think.. but I don't think it has anything to do with flexbox, but indeed - the preprocessor.

We're using Gulp, which processes .less, then PostCSS, which we added to experiment with Lost.

When trying to use global Lost vars, like :

@lost gutter 60px;
.box {
  lost-column: "25/30 flex";
}

Here's my Gulp output:

[23:26:07] Finished 'less' after 1.95 s
[23:26:07] Starting 'watch'...
[23:26:07] Finished 'watch' after 40 ms
[23:26:12] Starting 'patterns-css'...
[23:26:12] Finished 'patterns-css' after 29 ms
[23:26:12] Starting 'less'...
[23:26:13] { [Error: Unrecognised input in file /xxx.less line no. 72]
  type: 'Parse',
  filename: 'xxx.less',
  index: 1206,
  line: 72,
  callLine: NaN,
  callExtract: undefined,
  column: 1,
  extract: [ '', '~"@lost gutter 60px;"', '' ],
  message: 'Unrecognised input in file xxx.less line no. 72',
  stack: undefined,
  lineNumber: 72,
  fileName: 'xxx.less',
  name: 'Error',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-less',
  __safety: { toString: [Function: bound ] } }
{ [Error: Unrecognised input in file xxx.less line no. 72]
  type: 'Parse',
  filename: 'xxx.less',
  index: 1206,
  line: 72,
  callLine: NaN,
  callExtract: undefined,
  column: 1,
  extract: [ '', '~"@lost gutter 60px;"', '' ],
  message: 'Unrecognised input in file xxx.less line no. 72',
  stack: undefined,
  lineNumber: 72,
  fileName: 'xxx.less',
  name: 'Error',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-less',
  __safety: { toString: [Function: bound ] } }
[23:26:13] Finished 'less' after 1.62 s

I found this closed issue but this is about how to escape CSS values in LESS. The ~ char doesn't escape a full declaration, which is needed for Lost var declaration

Am I missing something? I don't know build systems very well. Curious if you are aware of this, before I get DevOps involved on my end...

Much appreciated,
=: s

sdale-fevo commented Jan 10, 2016

Hi,
We're having a similar issue as @wellapex, I think.. but I don't think it has anything to do with flexbox, but indeed - the preprocessor.

We're using Gulp, which processes .less, then PostCSS, which we added to experiment with Lost.

When trying to use global Lost vars, like :

@lost gutter 60px;
.box {
  lost-column: "25/30 flex";
}

Here's my Gulp output:

[23:26:07] Finished 'less' after 1.95 s
[23:26:07] Starting 'watch'...
[23:26:07] Finished 'watch' after 40 ms
[23:26:12] Starting 'patterns-css'...
[23:26:12] Finished 'patterns-css' after 29 ms
[23:26:12] Starting 'less'...
[23:26:13] { [Error: Unrecognised input in file /xxx.less line no. 72]
  type: 'Parse',
  filename: 'xxx.less',
  index: 1206,
  line: 72,
  callLine: NaN,
  callExtract: undefined,
  column: 1,
  extract: [ '', '~"@lost gutter 60px;"', '' ],
  message: 'Unrecognised input in file xxx.less line no. 72',
  stack: undefined,
  lineNumber: 72,
  fileName: 'xxx.less',
  name: 'Error',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-less',
  __safety: { toString: [Function: bound ] } }
{ [Error: Unrecognised input in file xxx.less line no. 72]
  type: 'Parse',
  filename: 'xxx.less',
  index: 1206,
  line: 72,
  callLine: NaN,
  callExtract: undefined,
  column: 1,
  extract: [ '', '~"@lost gutter 60px;"', '' ],
  message: 'Unrecognised input in file xxx.less line no. 72',
  stack: undefined,
  lineNumber: 72,
  fileName: 'xxx.less',
  name: 'Error',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-less',
  __safety: { toString: [Function: bound ] } }
[23:26:13] Finished 'less' after 1.62 s

I found this closed issue but this is about how to escape CSS values in LESS. The ~ char doesn't escape a full declaration, which is needed for Lost var declaration

Am I missing something? I don't know build systems very well. Curious if you are aware of this, before I get DevOps involved on my end...

Much appreciated,
=: s

@corysimmons

This comment has been minimized.

Show comment
Hide comment
@corysimmons

corysimmons Jan 10, 2016

Contributor

Seems like LESS tries to parse all at-rules even though it seems like it's against the W3C spec...

Opened an Issue with them. Maybe there's a way to escape it so PostCSS can do its thing.

In the meantime, might I suggest one of these fine preprocessors?

👉 http://stylus-lang.com
👉 http://sass-lang.com

Contributor

corysimmons commented Jan 10, 2016

Seems like LESS tries to parse all at-rules even though it seems like it's against the W3C spec...

Opened an Issue with them. Maybe there's a way to escape it so PostCSS can do its thing.

In the meantime, might I suggest one of these fine preprocessors?

👉 http://stylus-lang.com
👉 http://sass-lang.com

@sdale-fevo

This comment has been minimized.

Show comment
Hide comment
@sdale-fevo

sdale-fevo Jan 10, 2016

Thanks for the quick reply @corysimmons
Ok, just wanted to make sure I wasn't missing anything.

I prefer SASS as well. However, our build system has some things that rely on LESS and it's a switch our team is hesitant atm: we have an upcoming product launch and tons to do still.

Til then, I'd like to continue exploring. Do I lose any abilities if I don't use global vars and declare flex , gutter and cycle in each instance instead?

Thanks,
=: s

sdale-fevo commented Jan 10, 2016

Thanks for the quick reply @corysimmons
Ok, just wanted to make sure I wasn't missing anything.

I prefer SASS as well. However, our build system has some things that rely on LESS and it's a switch our team is hesitant atm: we have an upcoming product launch and tons to do still.

Til then, I'd like to continue exploring. Do I lose any abilities if I don't use global vars and declare flex , gutter and cycle in each instance instead?

Thanks,
=: s

@corysimmons

This comment has been minimized.

Show comment
Hide comment
@corysimmons

corysimmons Jan 10, 2016

Contributor

@sdale-fevo Here ya go:

.escape-at-rules(@literal) {
    @namespace ~"lostgrid; @{literal}";
}

.escape-at-rules("@lost flexbox flex");

It will produce:

@namespace lostgrid;
@lost flexbox flex;

Let me know if that works and we can add it to the Gotchas.

Contributor

corysimmons commented Jan 10, 2016

@sdale-fevo Here ya go:

.escape-at-rules(@literal) {
    @namespace ~"lostgrid; @{literal}";
}

.escape-at-rules("@lost flexbox flex");

It will produce:

@namespace lostgrid;
@lost flexbox flex;

Let me know if that works and we can add it to the Gotchas.

@sdale-fevo

This comment has been minimized.

Show comment
Hide comment
@sdale-fevo

sdale-fevo Jan 10, 2016

Sweet, that worked!
Now on to the good stuff...

Thanks for quick reply.

sdale-fevo commented Jan 10, 2016

Sweet, that worked!
Now on to the good stuff...

Thanks for quick reply.

@corysimmons

This comment has been minimized.

Show comment
Hide comment
@corysimmons

corysimmons Jan 10, 2016

Contributor

@peterramsing Could you add that to the gotchas then this can be closed?

Contributor

corysimmons commented Jan 10, 2016

@peterramsing Could you add that to the gotchas then this can be closed?

peterramsing added a commit that referenced this issue Jan 11, 2016

Adds a gotcha regarding Less and @ rules to address issue #197
When using Less there needs to be a mixin to escape the @ rules. This
adds some simple documentation for it.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment