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;
}
Related
How to write the code below in less. How to optimally shorten the code.
Thanks in advance!
Code:
.border {
border: solid 1px;
}
.border-color-inherit {
border-color: inherit !important;
}
.border-top {
border-top: solid 1px;
}
.border-left {
border-left: solid 1px;
}
.border-bottom {
border-bottom: solid 1px;
}
.border-right {
border-right: solid 1px;
}
.border-none {
border: none !important;
}
I try:
#x: ~"solid 1px";
.res (#border)
{
border-top: #x;
border-left: #x;
border-right: #x;
border-bottom: #x;
}
.border-top{
.res (#x);
.border-left{
.res (#x);
}
}
So, I tried in many ways to make it possible but without any success.
It does not look good.
Try it this way
.border {
border: solid 1px;
border-color: inherit !important;
}
.border-none {
border: none !important;
}
If if have something like:
input, select {
&:focus {
border: solid 1px blue;
}
}
.has-error {
input, select {
border: solid 1px red;
}
}
Then an input within a .has-error will still be styled blue, because the input:focus is more specific.
Is there an elegant way to override this?
The best I've got is:
input, select {
&:focus {
border: solid 1px blue;
}
}
.has-error {
input, select, input:focus, select:focus {
border: solid 1px red;
}
}
You need more nesting:
.has-error {
input, select {
&, &:focus {
border: solid 1px red;
}
}
}
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;
}
}
From what I understand this is valid LESS syntax :
.some-mixin(#color)
{
border-top:1px solid #color;
}
.some-element {
.some-mixin (#FFFFFF);
}
And would result to this :
.some-element {
border-top:1px solid #FFFFFF;
}
Now let's say our original CSS syntax is like this :
ul.sidebar li.categoryA { border-left: 15px solid #F3661F; }
ul.sidebar li.categoryA.active,
ul.sidebar li.categoryA.active a {
background: #F3661F;
border-top:1px solid #F3661F;
border-bottom: 1px solid #F3661F;
}
ul.sidebar li.categoryA:hover {
color:#AAA; border-left:229px solid #F3661F;
}
Let's also take into account, that under ul.sidebar li there are lots of different "categories" (and not just A), all different just in the color. So that's what I thought :
/* MIXIN */
.category-item (#color)
{
border-left: 15px solid #color;
&.active, &.active a {
background: #color;
border-top: 1px solid #color;
border-bottom: 1px solid #color;
}
&:hover {
color: #color;
border-left: 229px solid #color;
}
}
/* RULES */
ul.sidebar li {
.categoryA { .category-item(#F3661F); }
.categoryB { .category-item(#FF0000); }
.categoryC { .category-item(#00FF00); }
/* Etc... */
}
However : this last one is not working.
Am I doing something wrong? Did I invent another... LESS?
P.S. Just found this answer. Guess what I'm trying to do is still unsupported? Hmmm...
Try this:
ul.sidebar li {
&.categoryA { .category-item(#F3661F); }
&.categoryB { .category-item(#FF0000); }
&.categoryC { .category-item(#00FF00); }
/*Etc.*/
}
this works fine for me. The output is:
ul.sidebar li.categoryA {
border-left: 15px solid #f3661f;
}
ul.sidebar li.categoryA.active,
ul.sidebar li.categoryA.active a {
background: #f3661f;
border-top: 1px solid #f3661f;
border-bottom: 1px solid #f3661f;
}
ul.sidebar li.categoryA:hover {
color: #f3661f;
border-left: 229px solid #f3661f;
}
...