CSS Errors Compiling

Question

I am having a bit of an issue programming my website for OceanGrownFin.com. If you scroll thru the site, the three sections I'm having trouble with are the CSS backgrounds for the events, my video pop out, and my twitter feed. On each of these, I've went into the .less files and pointed to the picture I was looking to use, but for some reason it isn't displaying. For example:

.cbx-event {
    background: url(/assets/img/shows_bg.png)no-repeat center fixed;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    color: #ffffff;
    .cbx-inner {
        .bg-rgba(@black-color, 0.8);
        padding: 11rem 0 11.4rem;
    }

    .cbx-heading {
        h2 {
            i {
                color: @white-color;
                span {
                    background: @white-color;
                }
            }

        }
    }

that's the code that's used in my event.less file. I was told that I need to compile these .less files, which I tried to do using Koala and WinLESS. On both programs I receive this error when I attempt to compile:

C:\Users.........\themeforest-17690374-musix-music-band-html-template\ogf\assets\less\event.less NameError: variable @black-color is undefined in C:\Users\royal\Desktop\OG FIN WEB\themeforest-17690374-musix-music-band-html-template\ogf\assets\less\event.less:14:17

13     .cbx-inner {
14         .bg-rgba(@black-color, 0.8);
15         padding: 11rem 0 11.4rem;

Sorry if this is too much detail, I'm just trying to make sure I put all the info I have. I have some familiarity with HTML but I'm not a great coder so it may be something very simple.

Dinca Adrian · Accepted Answer · 2017-02-07 09:32:59Z

1

So as stated in the error and explained here http://lesscss.org/ YOU need to define the variables.

So before your styles, in the top of the file, or in another file with variables which you will load/import it before everything else define the colors as this:

@black-color: #000000;
@white-color: #FFFFFF;

And then try to compile the files.

answered Feb 7, 2017 at 9:32

Dinca Adrian

1,23013 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Errors Compiling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related