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;
}
}
}
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;
}
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'm have currently started to learn Sass.
Now, looking on the way 'extend' is explained in the Basics documentation (http://sass-lang.com/guide) and wondering if it is really useful.
I mean: This ...
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
#extend .message;
border-color: green;
}
.error {
#extend .message;
border-color: red;
}
.warning {
#extend .message;
border-color: yellow;
}
... compiles to ...
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
I could accomplish the same if I add the class .message to every HTML-element to which I want to apply this styles.
It's no work saved if I write multiple times #extend .message compared to multiple times class="message".
Right?
Or is there something else which I haven't understood?
Then please correct me.
I use LESS and here is my example:
.arrow{
color: red;
}
.arrow:before{
content: ">";
}
.button{
background: blue;
.arrow;
&:before{
border: 1px solid;
}
}
And this is CSS after parsing:
.button{
background: blue;
color: red;
}
.button:before{
border: 1px solid; // HERE IS NO content: ">" !!!
}
How to add :before pseudo-element from .arrow class to my button?
You can use the extend option like below. It basically applies all properties of the arrow class to the button class also. The all keyword means the child classes are also extended.
LESS:
.button{
background: blue;
&:extend(.arrow all);
&:before{
border: 1px solid;
}
}
Compiled CSS:
.arrow,
.button {
color: red;
}
.arrow:before,
.button:before {
content: ">";
}
I think the Extend feature ought to do the trick:
.button {
&:extend(.arrow all);
background: blue;
&:before {
border: 1px solid;
}
}
See http://lesscss.org/features/#extend-feature
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;
}
...