I have this code:
input[type="text"] {
color: red;
.blue {
color: blue;
}
}
That gives me this
input[type="text"] {
color: red
}
input[type="text"] .blue {
color: blue;
}
How do I get something like this?
input[type="text"] {
color: red
}
input[type="text"].blue {
color: blue;
}
You're looking for the parent selector (&):
input[type="text"] {
color: red;
&.blue {
color: blue;
}
}
Related
How to write this rule in LESS? I've been looking in documentation at http://lesscss.org/, but I did not find anything :(
input.text:focus { border: 1px solid #f00; }
input.text:focus ~ label.placeholder,
input.text:not(:focus):valid ~ label.placeholder { color: #f00; }
I have figured out this, it works, but I do not know how to correctly add the third line into this:
input.text { padding: 15px; background: #fff;
&:focus { border: 1px solid #f00;
~label.placeholder { color: #f00; }
}
}
Do it like below
input.text { padding: 15px; background: #fff;
&:focus,&:not(:focus):valid {
~label.placeholder { color: #f00; }
}
&:focus {
border: 1px solid #f00;
}
}
That will compile into
input.text {
padding: 15px;
background: #fff;
}
input.text:focus ~ label.placeholder,
input.text:not(:focus):valid ~ label.placeholder {
color: #f00;
}
input.text:focus {
border: 1px solid #f00;
}
This is working perfectly:
.navbar_ind {
background-color: blue;
}
.navbar_ind .nav-link:hover {
color: red;
}
but when I am doing like this it does not work, why?
.navbar_ind {
background-color: blue;
&__nav-link:hover {
color: red;
}
}
You can use & with space ou not use it at all, like this:
.navbar_ind {
background-color: blue;
& .nav-link:hover {
color: red;
}
}
Or like this:
.navbar_ind {
background-color: blue;
.nav-link:hover {
color: red;
}
}
Both should work fine
This:
.navbar_ind {
background-color: blue;
&__nav-link:hover {
color: red;
}
}
will compile to:
.navbar_ind {
background-color: blue;
}
.navbar_ind__nav-link:hover {
color: red;
}
What you need is:
.navbar_ind {
background-color: blue;
// The ampersand selector isn't even needed.
& .nav-link:hover {
color: red;
}
}
You are using '&' selector the wrong way. It is not needed for child selectors.
The equivalent SASS for the CSS
.navbar_ind {
background-color: blue;
}
.navbar_ind .nav-link:hover {
color: red;
}
is
.navbar_ind {
background-color: blue;
.nav-link:hover {
color: red;
}
}
The equivalent SASS for the CSS
.navbar_ind {
background-color: blue;
}
.navbar_ind.nav-link:hover {
color: red;
}
is
.navbar_ind {
background-color: blue;
&.nav-link:hover {
color: red;
}
}
Read more about the & selector.
Let's say you have this SASS definition (unreal example):
.class {
margin: 1px;
background: black;
color: white;
&:hover {
color: red;
}
}
a.class {
margin: 1px;
background: black;
color: yellow;
&:hover {
color: blue;
}
}
Now, can we put the a specification of the same class as a nested selector? E.g. something like this (pseudo-code):
.class {
margin: 1px;
background: black;
color: white;
&:hover {
color: red;
}
// Some selector to show that the current class
// should be applied to this element (?)
a.& {
color: yellow;
&:hover {
color: blue;
}
}
}
I have a solution, it's a little bit tricky, but it works fine.
.class {
color: yellow;
&:hover {
color: blue;
}
&[href] {
color: white;
&:hover {
color: red;
}
}
}
You may consider to write a mixin
#mixin sample($color,$hovercolor) {
margin: 1px;
background: black;
color: $color;
&:hover {
color: $hovercolor;
}
}
.class{ #include sample(white,red)}
a{ #include sample(yello,yellow)}
Hope this helps
I made this sass placeholder for a default button and there should be additional buttons like a success or danger button.
This is my sass placeholder in short:
%button {
border: none;
background-color: $default-color;
cursor: pointer;
color: $default-color-text;
}
%button-danger {
#extend %button;
background-color: $default-color-danger;
color: $default-color-danger-text;
}
%button-success {
#extend %button;
background-color: $default-color-success;
color: $default-color-success-text;
}
Now i want to extend from these buttons and make an element with a class to a button and with additional classes to a danger/success button.
.button {
#extend %button;
&.danger {
#extend %button-danger;
}
&.success {
#extend %button-success;
}
}
The result is
.button.danger, .button.success, .button {
border: none;
background-color: #a0a0a0;
cursor: pointer;
color: #ffffff; }
.button.danger {
background-color: #d9534f;
color: #fff; }
.button.success {
background-color: #5cb85c;
color: #fff; }
Thats correct, but i think of a lot of different buttons and there could be a shorter way like that:
.button { /* only one class in this directive */
border: none;
background-color: #a0a0a0;
cursor: pointer;
color: #ffffff; }
.button.danger {
background-color: #d9534f;
color: #fff; }
.button.success {
background-color: #5cb85c;
color: #fff; }
Is there a way to compile this result, or is that not recommendable?
You can remove the extend from %button-danger and %button-success.
%button {
border: none;
background-color: white;
cursor: pointer;
color: white;
}
%button-danger {
background-color: red;
color: red;
}
%button-success {
background-color: green;
color: green;
}
.button {
#extend %button;
&.danger {
#extend %button-danger;
}
&.success {
#extend %button-success;
}
}
Is it possible to put the following in a lessCSS forloop so that just the number of each section variable will update from section1 through to section4 with each loop?
// loop starts
.section1 {
.color {
color: #section1;
}
.colorBG-medium{
background-color: #section1;
}
.colorBG, .tab.active a {
background-color: #section1;
&:hover{
background-color: #section1;
}
}
}
// loop ends
thanks!
According to the link indicated by Roddy of the Frozen Peas, yes it is possible to do a loop, but it only makes sense to use it for numeric values. For your case, I recommend using the mixins, including to improve code readability:
#foo {
.bar (#color) {
.color { color: #color; }
.colorBG-medium {
background-color: #color;
}
.colorBG, .tab.active a {
background-color: #color;
&:hover{
background-color: #color;
}
}
}
}
.section1 {
#foo > .bar(red);
}
.section2 {
#foo > .bar(blue);
}
The result:
.section1 .color {
color: #ff0000;
}
.section1 .colorBG-medium {
background-color: #ff0000;
}
.section1 .colorBG,
.section1 .tab.active a {
background-color: #ff0000;
}
.section1 .colorBG:hover,
.section1 .tab.active a:hover {
background-color: #ff0000;
}
.section2 .color {
color: #0000ff;
}
.section2 .colorBG-medium {
background-color: #0000ff;
}
.section2 .colorBG,
.section2 .tab.active a {
background-color: #0000ff;
}
.section2 .colorBG:hover,
.section2 .tab.active a:hover {
background-color: #0000ff;
}
A probably better way to achieve that result would make use of a mixin. Something like:
.section-color (#color) {
.color {
color: #color;
}
.colorBG-medium{
background-color: #color;
}
.colorBG, .tab.active a {
background-color: #color;
&:hover{
background-color: #color;
}
}
}
.section1 {
.section-color(red);
}
.section2 {
.section-color(#123456);
}
/* ... */