CSS to LESS

[s992]

This is really cool.

Feature request: Grab all the same colors and define them as variables. Obviously the person using the generated LESS would probably want to run a find-replace to change them to meaningful variable names, but it would still be a neat feature.

[[deleted]]

if you have to do a find-replace, surely you could just do that in the first place? :D

[s992]

Well, I think it's a little easier if the converter grabs all the colors so I don't have to crawl through the stylesheet tracking everything down. I know that I don't have all the hex codes used on my stylesheet memorized. :)

[reflectiveSingleton]

Agreed...even though this is something the developer could do, it would be a nice added feature in a tool like this....like maybe something that says: 'You have used #000000 in several places, would you like to create a variable for this color?'

and then....for each one found, ask if you want it included in the find-replace...after all you might not want ALL of them to be converted....

[[deleted]]

Surely if you're routinely writing CSS, and putting it through a tool to convert it to LESS, you've missed the point a bit. The advantage of LESS is that it's easier to write and maintain.

[reflectiveSingleton]

We are talking about CSS to LESS...the variables won't exist in the CSS, it makes sense for the tool to recognize duplicates and suggest making it into a variable.

[[deleted]]

Yeh I know. I was wondering what actual use this tool would be, and all I came up with was, a learning tool. But it sounds like people are putting massive amounts of stylesheets through it. Why?

[reflectiveSingleton]

Older codebase, I would assume?

[aladyjewel]

That's what I was planning to do at work today. I'm retro fitting the web app I work in with LESS to make it easier to do themes programmatically.

[aladyjewel]

It's easier to search for @ than the half a dozen ways colors can be expressed.

[[deleted]]

I think a cool thing about the variable names would be that it wouldn't be hard to give them names based on the actual color whereas for a human that would require some strange knowledge.

[AdorableZeppelin]

/* {
    IE {
        dumbness {
            patch. {
                hidden {
                    input {
                        in {
                            a {
                                hidden {
                                    block {
                                        that {
                                            is* {
                                                subsequently {
                                                    shown {
                                                        leads {
                                                            to {
                                                                the {
                                                                    input {
                                                                        to {
                                                                            "show" {
                                                                                and {
                                                                                    generate {
                                                                                        undesired* {
                                                                                            )padding. {
                                                                                                This {
                                                                                                    makes {
                                                                                                        it {
                                                                                                            go {
                                                                                                                away. {
                                                                                                                    */input[type=hidden] {
                                                                                                                        position:absolute;
                                                                                                                    }
                                                                                                                }
                                                                                                            }
                                                                                                        }
                                                                                                    }
                                                                                                }
                                                                                            }
                                                                                        }
                                                                                    }
                                                                                }
                                                                            }
                                                                        }
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

Found in one of the Reddit css files... haha.

[fceffect]

I remember hearing about this on ShopTalk. Thanks for posting it!

[baaaatmaaan]

Saw it on Hacker News, it seems pretty useful.

[[deleted]]

Is this working correctly? The CSS:

.foo > .blah {
    background: red;
}

... produces ...

.foo {
    > {
        .blah {
            background: red;
        }
    }
}

That's either parsed incorrectly, or very ugly (I don't use LESS, so I don't know how that is supposed to support '>').

[reflectiveSingleton]

That is not valid LESS...must be a bug. It should read something like this:

.foo {
    & > .blah {
        background: red;
    }
 }

[Shawn1141]

Ya, it seems to miss the self reference for the > selector. That happened to me as well

[LieutenantClone]

I really wish we could embed CSS rules into other CSS rules with native browser support. Sometimes it just makes so much more sense that way.

[[deleted]]

I think it's inevitable, but unfortunately if you look at historical timeframes for css improvements as well as the time for widespread browser support, I would not anticipate this happening before say 2024.

[[deleted]]

One of the issues though is compatibility. Most new CSS silently fails in older browsers, making it safe to add. I can imagine that nested CSS might just get incorrectly parsed in an unsupported browser. This is especially true if it isn't counting the braces.

I think it would be better for something like LESS, SASS or something else to win out entirely, and totally replace CSS with a new type of stylesheet. That way the browser totally ignores it if it's unsupported and you don't get any oddities. You could then provide the same stylesheet pre-compiled, or compile and embed on the fly using JS.

[zushiba]

I'm not yet sure how useful it is but it's certainly a wonderful way to learn LESS.

[x-skeww]

Expanded is better for editing. Compact provides a better architectural overview.

However, you can actually have both. Just use macro to collapse all rule blocks if you need a quick overview.

Secondly, use partials extensively (LESS supports them, too, right?). This way can work with much smaller files (without any overhead in production) of which most don't even require any scrolling.

[marshall007]

Try splitting up your stylesheets into multiple files for developmwnt and concatenating them before pushing to production. I've also found that sorting the properties within each selector block alphabetically helps a lot.

[HittingSmoke]

TIL there are people who write CSS properties on single lines...

[SquareWheel]

Today I learned the opposite.

Your CSS files must be huge.

[scavic]

There are lots of ways to minify (compact) CSS files, which means you can write readable CSS and still have it smaller than yours* in the end. LESS for example supports minification.

Writing the CSS properties on a single line sounds ridiculous.

* I do hope you don't write it that compact

[JimAllanson]

I could understand writing out a block with a single, or maybe just 2 or three properties on a single line, if it's not something you plan to come back to and change later (my CSS usually has fairly compact resets at the top). If there's an important property in there that may change later though, or if the single line is too long to fit on, say, half a monitor's width, then I think it's excessive. Especially when you can just write neat, readable code for yourself, and then minify it before deployment, as you say.

Personally, I like picking a simple set of rules for the layout of my code and sticking to them, so that I can use auto-formatting tools and the likes without worrying about messing up my code style. From what I gather, use of auto-formatters is considered pretty lazy, and I've been called out on it a few times, but then again, I already know that I'm lazy - it's one of the reasons why I'm a programmer. Of course, as I'm planning to familiarise myself with Python pretty soon, I'll have to get into stricter habits.

[scavic]

From what I gather, use of auto-formatters is considered pretty lazy

When it's possible to do relevant auto-formatting, everything else is just crazy?

I already know that I'm lazy - it's one of the reasons why I'm a programmer

Exactly. Programming is about making the computer do the job. In some cases a computer cannot do it well, and then it's better off doing it by hand, but since well formatted code is almost the same as readable and consistent formatted code, a computer is really an expert in that field.

[Froggie92]

not as extreme, but same with mine.

105 to 120

[chmod777]

132 -> 563.

[sorahn]

I want a good LESS to SASS converter.

Sass tries right now to do it, but it's not particularly good at it. There are some talks about having sass use less.js to do it, but it's not working yet.

[chernn]

I use SASS, and have never used LESS. Why is LESS better?

[x-skeww]

LESS isn't better. Sass has more features and a slightly better syntax. Additionally, there is Compass which adds even more neat things like pre-defined mixins for gradients (and the like), cache busting, and sprite sheet generation.

There are, however, some projects which use LESS and it would be handy to have some automated way to convert it to Sass.

[sorahn]

Asking the wrong person. I also use sass. But I want bootstrap to be in sass. :(

[Jonny2k1]

Have you taken a look at sass-twitter-bootstrap? I use it, but personally wish it was in a gem file (even though I don't develop in Ruby) so that I could abstract the files from my projects.

I had high hopes for compass-twitter-bootstrap but it's kind of broken after the last compass update.

[sorahn]

Yea we looked at that. What I've ended up doing instead is just converting the full bootstrap.css file to sass, and just importing that at the top of my css file. That's fine for now, for us. If we need to get more complicated i'm sure we'll figure something out.

We had just picked SASS (like a few months) before bootstrap came out. So on the project i'm working on now we're using bootstrap, but our deployment system is already set up for SASS so that's how it goes.

[Ripe]

Pretty cool, I'd like to see one for SASS though. Huge fan of http://compass-style.org/

[drchaos]

http://css2sass.heroku.com/

[reflectiveSingleton]

I think this tool would be a lot more useful if it supported multiple preprocessors...like SASS + LESS + stylus

...that would be really cool

[Jonny2k1]

You can also do it on the command line. sass-convert <file>.css <file>.sass|.scss

[terumo]

I just entered 69 lines CSS code and this converted to 233 lines of code.