Jump to content


Photo
- - - - -

CSS question

LESS CSS

Best Answer Danny , 20 May 2014 - 11:05 AM

Hi,

 

Thats because nesting class declarations are not valid CSS. It is something that is allowed because SASS, SCSS and LESS (which we use) allow nested classes which then expand to standard CSS when served to the browser upon compile.

 

See some of the examples on LESSCSS.org - http://lesscss.org/

 

Nesting classes are useful as you can group all CSS associated to one class in nesting classes, for example:

 

Instead of writing this which is valid.

 

.hello { background-color: pink; padding: 40px 60px; box-sizing: border-box; }

.hello h1 { color: white; }

.hello p { color: white; margin: 15px 0; }

 

You can nest them so its easier to understand that all that is associated to the .hello class.

 

.hello {
    background-color: pink;
    padding: 40px 60px;
    box-sizing: border-box;
    h1 {
        color: white;
    }
    p {
        color: white;
        margin: 15px 0;
    }
}
Go to the full post


  • Please log in to reply
3 replies to this topic

#1 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 18 May 2014 - 07:06 AM

A quick question. Both of the following extracts of code wotk. However the second does not validate in http://jigsaw.w3.org/css-validator/

 

#menu-trial-1 .current-menu-item a, #menu-trial-1 .sub-menu .current-menu-item a {
  background: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
}
 
 
Wont validate:
 
#menu-trial-1, #menu-trial-1 .sub-menu {
  .current-menu-item a {
  background: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
  }
}
 
 
Can anyone tell me why? Thanks


#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17653 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 20 May 2014 - 11:05 AM   Best Answer

Hi,

 

Thats because nesting class declarations are not valid CSS. It is something that is allowed because SASS, SCSS and LESS (which we use) allow nested classes which then expand to standard CSS when served to the browser upon compile.

 

See some of the examples on LESSCSS.org - http://lesscss.org/

 

Nesting classes are useful as you can group all CSS associated to one class in nesting classes, for example:

 

Instead of writing this which is valid.

 

.hello { background-color: pink; padding: 40px 60px; box-sizing: border-box; }

.hello h1 { color: white; }

.hello p { color: white; margin: 15px 0; }

 

You can nest them so its easier to understand that all that is associated to the .hello class.

 

.hello {
    background-color: pink;
    padding: 40px 60px;
    box-sizing: border-box;
    h1 {
        color: white;
    }
    p {
        color: white;
        margin: 15px 0;
    }
}

  • GetMeWebDesign likes this

#3 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 20 May 2014 - 12:09 PM

Thanks Danny

 

Knew the nesting worked, just didnt realise it was a LESS thing and not CSS3, which was why I could not understand why it wouldnt validate

 

Very clear and concise explanation :)

 

Can you mark this as answered as I dont seem to be being offered the option?



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17653 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 20 May 2014 - 12:13 PM

No problem.







Also tagged with one or more of these keywords: LESS, CSS