css nesting

[hackalive]

Hi guys,

 

I saw this in some CSS ages ago and cannot remember where so cannot remember how it goes exactly ... but i'd like to do somehting like this with my css:

 

<htmi id="something">

 

<style>

#something {

 

 h1 {

}

 

}

 

#other {

 

 h1 {

}

 

}

 

so if anyone know how it works or how to make it work thatd be great!

 

cheers

Edited June 1, 2013 by hackalive

[requinix]

CSS doesn't have "nesting" like that but you can

#something h1 { }
#other h1 { }

for the same effect.

[computermax2328]

CSS doesn't have "nesting" like that but you can

 

 

CSS doesn't have it, but SASS does. SASS is pretty much CSS on steroids. It saves a lot of time and aggravation. Not only does it let you nest elements, but it also lets you assign variables to values. So instead of having to scroll through your style sheet for that hex-code or rearrange and reorganize your structure, you can do something like $white=#fff; and use it over and over again.

 

Give it a try. 

[cpd]

Compiling that every time you make a change could get very tedious! The concept behind it is really cool though.

[DaveyK]

Its actually NOT tedious at all. I use Less for everything, running a program call WinLess in the background. Every time I change a Less file, the Less gets compiled into a bootstrap.css file in the css folder automatically. Bootstrap.css is also minified!

 

Couldnt be easier. Use it.

Edited June 9, 2013 by DaveyK

[shumaila]

#something h1 { }
#other h1 { }

 

this is the right way

no nesting 

[DaveyK]

#something h1 { }

#other h1 { }

 

this is the right way

no nesting 

 

the right way according to who? Less and SASS always you as much nesting as you want, nothing against that.

[Frank P]

the right way according to who? Less and SASS [allows] you as much nesting as you want, nothing against that.

 

The right away according to the normal CSS syntax.

[DaveyK]

SASS and Less both compile into normal CSS syntax. Its for ease of use.

[computermax2328]

Nesting is cool and all, but the real reason I use SASS is for variables like I said before. Saves a lot of time! You don't have to address multiple id's for just one CSS statement. Makes things a lot more organized. For me at least. 

[Irate]

I can very much understand people when they say that they want to use .sass because of variables...

 

Continuously assigning margin: 0 auto; or whatever styles you might repeat over a few lines for multiple selectors can get tiresome!

[DaveyK]

And dont forget mixins ^^