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.
Related
I have a root element div.container at my page, there is div.block.scarlet inside with red color for text.
But we also have body is a parent for div.container element. And when body has class .landing I need to make pink color instead of red.
I don't understand how write it correctly. Help with a syntax please!
/* how I do it now */
.container {
.block {
&.scarlet {
color: red;
}
}
}
body.landing .container {
.block {
&.scarlet {
color: pink;
}
}
}
Tooooo much extra copy-paste code! Is it possible to write in one line? Maybe a trick or smth like sass &. What I want:
.container {
.block {
&.scarlet {
color: red;
#if(body.landing || container.landing) { color: pink }
}
}
}
This is short rule that recolor my text if the root nesting element changed.
You need to use parent selector reference to construct complete selector from current context:
.container {
.block {
&.scarlet {
color: red;
body.landing & {
color: pink;
}
}
}
}
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.
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
}
I was trying to use a class with psuedo class in the less css mixin
a:link{
color:#138CB4;
text-decoration:none;
}
a:visited{
a:link;
color:#84B6CD;
}
But out put I got is this, which an invalid css
a:link{
color: #138CB4;
text-decoration: none;
}
a:visited{
a: link;
color: #84B6CD;
}
Am I missing something here or mixins don't support pseudo classes yet.
I was a little confused by this at first, too, and found myself jumping through hoops to get it to work. Although your post is old enough that it might pre-date this functionality for all I know.
Anyway, if you're just trying to add additional styles to an existing style via pseudo-selectors, you can use the '&' operator. It works kind of like a 'this' keyword, and turns nesting into a simple combination. So you should be able to do:
a {
color: #138CB4;
text-decoration: none;
&:visited {
color: #84B6CD;
}
}
This should compile out to something like:
a {
color: #138CB4;
text-decoration: none;
}
a:visited {
color: #84B6CD;
}
Note that you can also use the & to combine 'sub-selectors':
.outer {
color: blue;
.error {
//this will select elements that are .error inside-of/descending-from .outer
}
&.error {
//This will select elements that are .outer AND .error
color: red;
}
}
The official definition is unfortunately hiding in plain sight in the Nesting Rules part of the documentation.
I don't believe that is how you use mixin's in Less.
You have defined the link pseudo class and then nested it under the visited pseudo class. This doesn't actually mean anything and is why your are getting that output.
If I think what you are aiming for is to re-use your link styles across :visited and :link, you actually will want this:
.link {
color: #138CB4;
text-decoration: none;
}
a:link {
.link;
}
a:visited{
.link;
color: #84B6CD;
}
Not fully sure, what you want to achieve. But if you got tired of :link,:visted,:active (aka normal link) vs. :focus, :hover (hover styles), this works:
.anchor( #- ) {
a, a:link, a:visited, a:active {
#-();
}
}
.anchorH( #- ) {
a:focus, a:hover {
#-();
}
}
for example:
.anchor({
background: #fff;
});
.anchorH({
background: #ddd; /* darken on hover or focus */
});