Skip to content
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
Closed

Problem with flexbox in sass #197

Alexzanderk opened this issue Dec 14, 2015 · 19 comments

Comments

@Alexzanderk
Copy link

@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 Problem with flee box in sass Problem with flexbox in sass Dec 15, 2015
@peterramsing
Copy link
Owner

@peterramsing peterramsing commented Dec 29, 2015

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

Thanks! 😄

@Keats
Copy link

@Keats 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
Copy link
Owner

@peterramsing 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
Copy link

@Keats 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
Copy link
Owner

@peterramsing 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
Copy link
Contributor

@corysimmons 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
Copy link

@Keats 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
Copy link
Owner

@peterramsing 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
Copy link

@Keats 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
Copy link
Owner

@peterramsing 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
Copy link
Owner

@peterramsing peterramsing commented Jan 3, 2016

@Keats And thanks for your help!

@Keats
Copy link

@Keats 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
Copy link
Owner

@peterramsing 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
Copy link

@sdale-fevo 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
Copy link
Contributor

@corysimmons 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
Copy link

@sdale-fevo 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
Copy link
Contributor

@corysimmons 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
Copy link

@sdale-fevo sdale-fevo commented Jan 10, 2016

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

Thanks for quick reply.

@corysimmons
Copy link
Contributor

@corysimmons 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
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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
You can’t perform that action at this time.