css - Can this selector be shortened? -


i've been using less css little while - basics.

i have scenario - i've tried shorten not found solution yet, feels should possible. ideas?

.grid-container {     & > h1, & > h2, & > h3, & > h4, & > h5, & > h6     {         &:extend(.grid);     } } 

i want apply extend children of .grid-container, headers. know can remove ampersand, there short code route? i'm thinking (which doesn't work):

& > h1,h2,h3,h4,h5,h6 {} 

the selector short , don't think need shorten further. if wish whatever reasons, try below:

h1, h2, h3, h4, h5, h6 {   .grid-container > &:extend(.grid){}; } 

here, & means every selector in parent selector group , properties of .grid extended headings under .grid-container.

compiled css

.grid, .grid-continer > h1, .grid-continer > h2, .grid-continer > h3, .grid-continer > h4, .grid-continer > h5, .grid-continer > h6 {   /* rules */ } 

or, more simpler assign 1 common class headings , following:

.grid-container .common-props-for-all-headings:extend(.grid){}; 

.grid-container .common-props-for-all-headings{    width: 50%;    border: 1px solid steelblue;    margin: 10px auto;  }  h1{    color: red;  }  h2{    color: blue;  }  h3{    color: green;  }  h4{    color: orange;  }  h5{    color: gold;  }  h6{    color: brown;  }
<div class='grid-container'>    <h1 class='common-props-for-all-headings'>heading 1</h1>    <h2 class='common-props-for-all-headings'>heading 2</h2>    <h3 class='common-props-for-all-headings'>heading 3</h3>    <h4 class='common-props-for-all-headings'>heading 4</h4>    <h5 class='common-props-for-all-headings'>heading 5</h5>    <h6 class='common-props-for-all-headings'>heading 6</h6>  </div>


Comments

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

jquery - javascript onscroll fade same class but with different div -