thomaspierson / libcss2less Goto Github PK

Better & easier CSS selectors handling.

See here : https://github.com/alexdunae/css_parser

I entered the output from an Icomoon font, for example:

.icon-Play2:before {
content: "\e63f";
}

And the result was identical to the input. I would have expected:

.icon-Play2 {
&:before {
content: "\e63f";
}
}

It would be really nice if this conversion worked, then I could quickly change the static Icomoon css classes into mixin-able Less.

Simply I've tried to convert a :hover change from:
.nav-pills li a:hover {
background-color: #f546e2;
}

to:
.nav-pills {
li {
a {
&:hover {
background-color: #f546e2;
}
}
}
}

But instead, I got:
.nav-pills {
li {
a:hover {
background-color: #f546e2;
}
}
}

PS - Sorry, new to GitHub. I don't know how to style.

Incorrectly parses @import 'reset.css'; command.

Propose to generate a LESS file where there are already chapters for variables, mixins, scaffolding, etc.

Grab all the same colors and define them as variables

Sometimes, parts of CSS are not compiled in the same order that they appear originally.

.foo > .blah {
    background: red;
}

... produces ...

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

input

@-webkit-keyframes popin {
from {transform: scale(0.5); top:25%;}

}

Output

@-webkit-keyframes {
popin {
from;
}
}

This looks a lot like #4.

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

Converts to:

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

The > has been done correctly, but the + has not. Also ~ seems to behave the same way. I'm not sure if there are any others.

Inserting LESS-formatted code into input instead of CSS-formatted makes the converter to crash.

Found invalid conversion case. Please check example below:

CSS:

.marketing {
margin: 60px 0;
}
.marketing p + h4 {
margin-top: 28px;
} 

LESS:

.marketing {
    margin: 60px 0;
    p {
        + {
            h4 {
                margin-top: 28px;
            }
        }
    }
}

-webkit-font-smoothing: auto; is an invalid statement in a .less file. Proper translation would be -webkit-font-smoothing: ~"auto";. Just learned this the hard way. Would be nice if the IDE at http://css2less.cc/ were smart enough to handle stuff like this. Not sure how tricky it'd be to do that... but it'd be nice!

Keep up the good work.

I tried:

#container-fluid,
#row-fluid,
#row-fluid > .span2,
#sidebar-nav,
#wrapper {
    height: 100%;
    min-height: 100%;
}

#container-fluid,
#row-fluid,
#row-fluid > .span2,
#sidebar-nav,
#wrapper {
    height: 100%;
    min-height: 100%;
}

#container-fluid,
#row-fluid,
#row-fluid > .span2,
#sidebar-nav,
#wrapper {
    height: 100%;
    min-height: 100%;
}

and it produces:
here height and min-height is repeating thrice, because above same selector repeating thrice

#container-fluid,#row-fluid,#row-fluid &>.span2,#sidebar-nav,#wrapper {
    height: 100%;
    min-height: 100%;
    height: 100%;
    min-height: 100%;
    height: 100%;
    min-height: 100%;
}

I understand these queries are now supported by less.js is there any chance this project will be updated to support them.

I have been using http://css2less.cc to convert my CSS and any file containing these queries currently fails.

Cheers,

Roy

Some things could become parameters, like "aesthetics" ones :

• Use tabs or spaces for indentation ?
• Amount of spaces used for indentation ?
• Add a blank line before a new selector ?
• Break a line before opening brackets ?

Or more technical ones :

• Create variables when some values appear several times ?
• Concatenate @import files ?
• ...

when i import css with this, it generates unvalid stuff and less shows an error
@media (max-width: 990px) {
body {
background-position: -468px 0;
}
}

You forked MIT and converted it GPL

What a shame

Spot redundant lines and wrap it into mixins.

body .navbar .nav > li > a {
  color: #333;
  font-weight: bold;
}

compiles to

body {
    .navbar {
        .nav {
            > {
                li {
                    > {
                        a {
                            color: #333;
                            font-weight: bold;
                        }
                    }
                }
            }
        }
    }
}

http://css2less.cc/

when I scroll down ane page i get error in console

Uncaught TypeError: Cannot assign to read only property 'type' of 54