Targeting children in LESS is easy such as:
header {
a { color: white; }
}
But what I'm asking is how to assign color: white; to both the parent and the child? I can do:
header {
color: white;
a { color: white; }
}
But that is adding the same thing twice and I'm sure there's a better way in LESS.
If you really want nesting there, then:
header {
&, a {color: white}
}
For more details see Parent Selectors.
Related
Is it possible in CSS/SASS/LESS to combine multiple selectors with the same attribute into one selector without repeating the attribute?
For example:
div.foo[data="123"] {
color: red;
}
p.bar[data="123"] {
color: red;
}
p.bar[data="123"], div.foo[data="123"]{
color: red;
}
Combine them somehow? Such as this invalid scenario:
(div.foo, p.bar)[data = "123"] {
color: red;
}
You could do it like that:
div.foo,
p.bar {
&[data="123"] {
color: red;
}
}
first step:
combine your main selectors
second step:
adds the data selector
I am looking for some way to not repeat a class name within css. For example if I have
.class1 div { color: red }
.class1 h2 { color: blue }
.class1 p { color: yellow }
is there some way I can group the 3 rules under the one class, something like
.class1 {
div { color: red }
h2 { color: blue }
p { color: yellow }
}
With SASS (or SCSS), you can write :
.class1 {
& div { color: red }
& h2 { color: blue }
& p { color: yellow }
}
Where the '&' sign means 'write what you are actually in' (here, it means 'write .class1'). With an SASS or SCSS compiler, this will output :
.class1 div {
color: red;
}
.class1 h2 {
color: blue;
}
.class1 p {
color: yellow;
}
You can start using Online SCSS compiler to start learning it without installing it. You can use the the official Documentation , which is pretty good, or browse Youtube to find some good tutorials.
Hope it helped !
Rule nesting is not possible in CSS. You've to use SASS for this.
I had to covert some PSD-s into html, but every page had its own styling so I went forward and made one for each.
The client now requires them to be joined into a single one. Is that possible?
Thanks.
Edit: They don't have unique ID/classes.
Since you converted the PSD's to HTML, I assume you've still got access to the code? In which case, your best best is to give each page a unique identifier (class or ID) at a high enough level that you can specificy with parent / child selectors. Example:
Page 1:
<body id="aboutus">
Page 2:
<body id="services">
You can then target via CSS the elements that are on each page within the same CSS file (the laws of specificity will take effect: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/):
#aboutus h1 {
color: red;
}
#services h1 {
color: green;
}
Option 2 (Credit to Darren Sweeney):
In addition to adding an id / class to the body element I've mentioned above, you can make the process of adding styles for each page a lot easier by using a CSS preprocessing language such as SASS / SCSS. For example:
SCSS:
#aboutus {
h1 {
color: red;
}
p {
font-size: 10px;
}
a {
text-decoration: underline;
.active {
color: #fff;
}
}
}
#services {
h1 {
color: green;
}
p {
font-size: 15px;
}
a {
text-decoration: underline;
.active {
color: #000;
}
}
}
My css is structured in components, each component is stand-alone.
example:
.menu {
background: black;
}
The framework I'm using sometimes adds a class to the body-tag. For example for logged in users it would look like this:
<body class="loggedIn">
<div class="menu"</div>
</body
I would like to keep the css structured inside each component. Is it possible to add a selector in less that is added before the parent? Something like:
.menu{
%loggedIn{
color: red
}
}
should give loggedIn users a red menu.
Unless I am completely missunderstanding you, and there is a possibility, then the ampersand-parent-selector is exactly what you need!
.menu{
.loggedIn & {
color: red
}
}
Should result in
.loggedIn .menu {
color: red
}
You can reference the parent selector using &: http://lesscss.org/features/#parent-selectors-feature
LESS
.menu {
background: black;
.loggedIn & {
color: red
}
}
Will compile to CSS
.menu {
background: black;
}
.loggedIn .menu {
color: red
}
how can I set styles for an element and some of his descendants? Like for example:
.datepick-month-header, .datepick-month-header select, .datepick-month-header input {
background-color: black;
color: #fff;
font-weight: bold;
}
in less documentation I've found nested styles, who works well, but I want to select BOTH $this and the descendants.
.datepick-month-header {
select, input { // this selects "select" and "input",
}
}
how can I set all the three elements (parent, childrens) in one declaration?
thank you
use & to reference the parent context, eg.
.a {
&, & .b .{
}
}
I know I can do this, but get redundancy code in output css:
.datepick-month-style {
background-color: #datepickMonthHeaderBackgroundColor;
color: #datepickMonthHeaderColor;
font-weight: bold;
}
.datepick-month-header {
.datepick-month-style;
select, input {
.datepick-month-style;
}
}