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;
}
}
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 have created a number of mixins to speed up setting anchor properties for each state. In this example I have a mixin for text-decoration and another for background-color.
.link-text-decoration(#default, #hover, #active, #visited)
{
text-decoration: #default;
&:hover
{
text-decoration: #hover;
}
&:active
{
text-decoration: #active;
}
&:visited
{
text-decoration: #visited;
}
}
.link-background-color(#default, #hover, #active, #visited)
{
background-color: #default;
&:hover
{
background-color: #hover;
}
&:active
{
background-color: #active;
}
&:visited
{
background-color: #visited;
}
}
When rendering as CSS I find instead of merging the pseudo classes it redeclares another.
LESS CSS calling the Mixins
.link
{
.link-text-decoration(underline, none, none, underline);
.link-background-color(#fff, #ccc, #ddd, #fff);
}
The Result
There a 2 instances of hover, active and visited.
.link {
text-decoration: underline;
background-color: #ffffff;
}
.link:hover {
text-decoration: none;
}
.link:active {
text-decoration: none;
}
.link:visited {
text-decoration: underline;
}
.link:hover {
background-color: #cccccc;
}
.link:active {
background-color: #dddddd;
}
.link:visited {
background-color: #ffffff;
}
Desired Result
Ideally I would like the values to appear as below as this would be much more efficient.
.link {
text-decoration: underline;
background-color: #ffffff;
}
.link:hover {
text-decoration: none;
background-color: #cccccc;
}
.link:active {
text-decoration: none;
background-color: #dddddd;
}
.link:visited {
text-decoration: underline;
background-color: #ffffff;
}
I've played with the Extend function and the examples on CSS Tricks, but this does not seem to work for this scenario.
Any solution, guidance, or advice?
Thanks,
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;
}
}