Treehouse: Grow your CSS skills. Land your dream job.

LESS variables problem

  • # June 3, 2013 at 9:25 am

    I new to LESS, first using it, but from the start have problem.

    I can apply variables at all, here is photo with background-color, as you can see Chrome cross background-colour, but if I use #HEX it works. Thanks for the help

    # June 3, 2013 at 10:04 am

    images aren’t going to be enough.

    Could you make a reduced case in Codepen?

    # June 3, 2013 at 10:15 am

    Never mind…it works for me in Codepen:

    Under what circumstances does it not work?

    I assume you are using a pre-processor app?

    # June 3, 2013 at 10:39 am

    Found help on Stock Overflow.

    instead of

    link rel="stylesheet" href="styles.less"

    I have to link in this way

    link rel="stylesheet/less" href="styles.less"
    # June 3, 2013 at 10:47 am

    I’m not entirely sure that’s true although I have little knowledge of LESS.

    LESS is a shorthand way of writing CSS, you would always need to link to a CSS file in your `head`.

    Whatever processor you are using will take your `styles.less` file and create a separate `styles.css` file.

    Or do I have that wrong?

    # June 3, 2013 at 10:48 am

    You probably didn’t compile it.

    Did you include less.js in the head tag?

    Yes, indeed, you need to specify the rel to be “stylesheet/less”, but you still need to include the .js preprocessor to compile the file and output it as a proper css syntax.

    # June 3, 2013 at 10:53 am

    @jimmyniceguy, you are right it’s my **head**

    # June 3, 2013 at 12:07 pm

    JavaScript can compile LESS stylesheets on the fly but you shouldn’t ever do that. It’s terrible.

    # June 3, 2013 at 12:15 pm

    Still it’s possible and the only solution if you do not compile it manually. I hinted it, because the OP tried to include it as .less only.

    # June 3, 2013 at 12:18 pm seems to do the job pretty well.

    # June 3, 2013 at 6:27 pm

    Yes, of course – I just explained what he did wrong from the head markup POV.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.