Problem with flexbox in sass

[Alexzanderk]

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?

[peterramsing]

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

Thanks! 😄

[Keats]

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]

@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]

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]

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]

@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]

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

[peterramsing]

@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]

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]

@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]

@Keats And thanks for your help!

[Keats]

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]

@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]

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]

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]

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]

@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]

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

Thanks for quick reply.

[corysimmons]

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