CODEWITHSUNDEEP
cssless
Only Bolivian Here
Only Bolivian Here

Reputation: 36733

Client side LESS isn't using the styles I write

Here is the HTML content of the page:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script src="js/less-1.3.0.min.js" type="text/javascript"></script>
    <link rel="stylesheet/less" type="text/css" href="style.less" >    
</head>

If I open up source in Google Chrome and open in a new tab to see the less javascript file, and the less stylesheet I wrote, I can see the contents, meaning they are linked correctly.

Why aren't my LESS styles being applied?

Edit: Even running this from WAMP to avoid the whole "file:///" problem, doesn't apply the styles.

Edit:

The contents of the .less file:

html, body {
    margin:0;
    padding:0;
}

#headbg {
    height:497px;
    background-color:red;
}

#header-wrapper {
    width:980px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
}

#header-wrapper #left-container {
    float:left;
    position:relative;
    outline:1px solid cyan;    
}

#logo {
    margin-left:10px;
    display:block;
}

#logo-hue {
    position:absolute;
    top:20px;
}

#social {
    float:left;
    color:#fff;
}

#social .message {
    text-align:center;
}

#social .contact {
    text-align:center;
}

#header-wrapper #carusel-container {
    float:left;
    outline:1px solid cyan;
}

#bodybg {
    background-color:#fff;
}

Upvotes: 0

Views: 1205

Answers (2)

user769889
user769889

Reputation: 376

Ryan's answer is right : however with Js and Css theory says Js will start working soon as loaded depends on which function is called. but when js script is running - the css is not yet loaded. so alwasy load css first so that js ( if they working straight e.g. document.ready() ) - they have all properties, styles available which they require.

And for the same reason you should include jquery file first ( if you are using it ) before trying any of their plugins.

Hope it helps

Upvotes: 0

RSM
RSM

Reputation: 15108

Put the stylesheet reference above any others.

<head>
    <link rel="stylesheet/less" type="text/css" href="style.less" >    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script src="js/less-1.3.0.min.js" type="text/javascript"></script>
</head>

Upvotes: 2

Related Questions