I am learning SASS and trying out some examples. I have some problem understanding Selector Sequence and why SASS merges them.
In a real world scenario the output can have unwanted css. For eg:-
a{
color: #0086B3;
&:hover{
text-decoration: none;
}
}
#footer a{
color: #a61717;
}
.head-links{
#extend a;
font-weight: bold;
}
This block of code complies to :-
a, .head-links {
color: #0086B3;
}
a:hover, .head-links:hover {
text-decoration: none;
}
#footer a, #footer .head-links {
color: #a61717;
}
.head-links {
font-weight: bold;
}
The problem is that
#footer .head-links
might never be used. So what is the point of merging selector sequence if it is not required.
How can I avoid this.How can I make it extend only :-
a{
color: #0086B3;
&:hover{
text-decoration: none;
}
}
Would that require me using a class instead...
because you are extending the element a here:
#extend a;
if you remove it, then the SASS won't "merge" them.
you have footer a and when extending the a in .head-links it will add #footer .head-links to the already existing rule #footer a
Which means it will extend to ANY a in the CSS, not just the selector a alone
UPDATE
How can I avoid this.How can I make it extend only :-
a{
color: #0086B3;
&:hover{
text-decoration: none;
}
}
Would that require me using a class instead...
yes you would need to use a class or an ID for that.
something like this:
.uniqueclass{
color: #0086B3;
&:hover{
text-decoration: none;
}
}
here is a SASS demo
Related
I have all links on my site underlined when hovered using the following css:
a:hover {
text-decoration: underline;
}
How can I make a class which will override this?
.footer {
text-decoration: none;
}
Your second selector is less accurate than the first one, therefore it's the first one that is applied.
Plus, you shouldn't target such a wide selector (.footer) in order to only style your links. What you should do is:
.footer a:hover{ text-decoration: none; }
(As I assume that default a state doesn't have a text-decoration: underline;)
This code seemed to fix it although it wasn't working earlier:
a:hover {
text-decoration: underline;
}
.footer a{
text-decoration:none;
}
I'm using Sass 3.4.1 and BEM so my scss is:
.photo-of-the-day{
&--title{
font-size: 16px;
}
}
and I want every time hover over .photo-of-the-day something happen with title, that's pretty common so usually in css:
.photo-of-the-day:hover .photo-of-the-day--title{
font-size:12px
}
the thing is using BEM this is the only way I found and looks kinda ugly
.photo-of-the-day{
&--title{
font-size: 16px;
}
&:hover{
background: red;
/* this is ugly */
.photo-of-the-day--title{
text-decoration: underline;
}
}
}
so I was wondering if I can inherit .photo-of-the-day selector and use it inside the hover to avoid copy again the full selector.
Ideally would be something like:
.photo-of-the-day{
&--title{
font-size: 16px;
}
&:hover{
background: red;
&&--title{
text-decoration: underline;
}
}
}
Or something close to comeback to the parent selector for BEM. Is it possible?
If you insist on nesting everything, the best you can do is this:
.photo-of-the-day {
$root: &;
&--title{
font-size: 16px;
}
&:hover{
#{$root}--title {
text-decoration: underline;
}
}
}
You can use this syntax:
.photo-of-the-day {
&--title {
font-size: 16px;
}
&:hover &--title {
text-decoration: underline;
}
}
How could I make the following work?
.menu a {
text-decoration: none;
:active {
color: #666;
}
:link {
color: #666;
}
:hover {
color: #666;
}
}
I know its not valid (or at least id does not work), so how could I fix it? I would like to make it easier for the further programming, so I would like to put :(selector) inside the "a" tag.
Ps.: I really don't want to use SASS or any framework for this.
What you're showing in the code sample is not valid CSS.
I know you mentioned that you do not want to use SASS or any framework, but that's precisely why SASS and other CSS preprocessors (e.g. LESS) were developed. This article contains more information on CSS preprocessors.
Alternatively, you can repeat the "parent" selectors and indent accordingly:
.menu a {
text-decoration: none;
}
.menu a:active {
color: #666;
}
.menu a:link {
color: #666;
}
.menu a:hover {
color: #666;
}
Is there a way of styling links using a id or a class without having to create a new selector for each individual element? for example
something like this or close to this would be preferable
#logo {
a: link {color: black}
a: visited{color: black}
a: hover{color: black}
}
However, the above syntax does not work instead all i can find is
#logo a:hover {
color: black;
}
#logo a:visited {
color: white
}
I feel like there's an easier way than this.
Heres how to do it to all links
I believe it should work:
#logo a:link,
#logo a:visited,
#logo a:hover {
color: black;
}
Not all browser support the above methodology of separating the tag styles with class or ID when you are dealing with different style in CSS with tag in single page.
One can follow below method:
**If using ID with Field**
a:link#myID {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited#myID {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover#myID {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active#myID {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
Click Here
**If using Class with Field**
a:link.myClass {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited.myClass {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover.myClass {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active.lx {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
Click Here
Not directly in css, but there are some projects that extend css
Check out sass:
http://sass-lang.com
I also believe current CSS syntax is not all that optimal. My personal choice is to go with something like LESS where you get much more intuitive and compact syntax to style your work.
With pure CSS you must specify each pseudo-selector but you can group them to apply the same style attributes;
#logo a:link,
#logo a:visited,
#logo a:hover {
color: black;
}
Beware that The order of link pseudo-classes matters.
I've a button and I wanted to know if it is possible to make the css bellow shorter.
.button a:link, .button a:visited, .button a:hover, .button a:active {
color: #000;
text-decoration: none;
}
I mean maybe:
.button a:* {
color: #000;
text-decoration: none;
}
Maybe there isn't any shorter way, but I just wanted to know.
I found something like this out:
.button a:link:visited:hover:active {
color: #000;
text-decoration: none;
}
But it wasn't working, don't know why..
For information - I've general css for a in the top of the file:
a:link {
color: #DA5632;
}
a:visited {
color: #CE3408;
}
a:hover {
color: #289BF8;
}
a:active {
color: #CE3408;
}
So the button class a should overwrite the main a css.
.button a is all you need
I always set a default style on a, and target pseudo classes only when I need to have a different effect.
Edit to include fix from comments:
Because a default style for the a element is declared like:
a:link {
color: #DA5632;
}
a:visited {
color: #CE3408;
}
a:hover {
color: #289BF8;
}
a:active {
color: #CE3408;
}
at the top of the stylesheet, we need to make it body .button a by increasing selectivity we increase the importance of the styles applied.
Here are some things to try
make sure that your stylesheet has a rule for ".button a" - also make sure this stylesheet is included after the global one defining rules for "a".
If that doesn't work, try being more specific, as in: ".button > a", only selecting direct descendants.
If THAT doesn't work, while it's bad practice, you could always mark your styles as important, like so:
color: #fff !important;
this will demand that they are parsed last.