I am moving from Sass to PostCSS (it's what is used here in my company).
I would like to be able to chain the parent selector to my selector what I did with the #at-root syntax in Sass.
I already installed the postcss-atroot plugin but when I use the Sass syntax I get the following error:
SyntaxError
(514:0) Unknown word
The error seems to come from this part {&}
That's what I try to achieve:
Sass:
.foo {
color: blue;
text-decoration: underline;
#at-root {
p#{&} {
color: red;
text-decoration: none;
}
.bar#{&} {
color: red;
text-decoration: none;
}
}
}
CSS:
.foo {
color: blue;
text-decoration: underline;
}
p.foo {
color: red;
text-decoration: none;
}
.bar.foo {
color: red;
text-decoration: none;
}
How would I have to write this the PostCSS way?
Thanks in advance for your help!
Related
I'm working on a project for school, and I wanted the three links I have to be set to the different colors I need. But when I call a class in my CSS file, I'm told:
Unknown property 'a'. Expected RBRACE at line 12, col 11.
How can I set different classes so that my different links are different colors? Below is my CSS code.
body {
background-color: white;
color: black;
src: url('PressStart2P-Regular.ttf') format('truetype');
font-family: Times;
}
.colorlink {
/* unvisited link */
a:link {
color: darkred;
text-decoration: underline;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: powderblue;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
}
you are using a inside .colorlink selector , so it saw it as a property not a selector , thus its Unknown , you cannot nest selectors in css
what you can do instead is use multiple selectors like this :
a.colorlink:link {
color: darkred;
text-decoration: underline;
}
/* visited link */
a.colorlink:visited {
color: green;
}
/* mouse over link */
a.colorlink:hover {
color: hotpink;
}
/* selected link */
a.colorlink:active {
color: powderblue;
}
a.colorlink:link {
text-decoration: none;
}
a.colorlink:visited {
text-decoration: none;
}
a.colorlink:hover {
text-decoration: underline;
}
a.colorlink:active {
text-decoration: underline;
}
to only remove a style
a {
color : inherit ;
text-decoration : none ;
}
The error appears because it is not possible to use nested styles in pure CSS. Thus CSS thinks you are trying to a CSS-Property to .colorlink. Use a preprocessor like SCSS for that.
Besides, I assume you are trying to achieve something similar like this:
body {
background-color: white;
color: black;
font-family: Times;
}
.link1 {
color: green;
}
.link2 {
color: red;
}
.link3 {
color: blue;
}
a:visited {
color: green;
text-decoration: none;
}
a:hover {
color: hotpink;
}
a:active {
color: powderblue;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
My Link
My Link
My Link
scss
a {
text-decoration: none;
&:active {
color: $color-secondary;
}
&:visited {
color: $color-primary;
}
&:hover {
color: $color-accent;
}
}
css
a:active {
color: #E4E4E4;
}
a:visited {
color: #333;
}
a:hover {
color: #6DB48B;
}
The compiled css only takes the last property into consideration.
How do I use multiple ampersands for an anchor element?
The :active styles fail to show because they get overridden by the styles that appear lower down in your Sass. To fix this, reorder your Sass in this order:
:visited
:hover
:active
I have this scss code:
button.green{
background-color: $green;
.current {
color: $white;
}
}
I want to apply two classes to my button <button class="green current"></button> but my scss code just does not work. How would you fix that in a proper scss manner?
Also tried that with no luck:
button {
.green{
background-color: $green;
}
& .current {
color: $white;
}
}
Nearly correct, missing "&" in your nesting to connect button.green and .current.
The css output of your scss is:
button.green > .current
meaning, you style an element "current" within its parent "button.green".
Correct:
button.green{
background-color: $green;
&.current {
color: $white;
}
}
Which outputs:
button.green.current
.green.current {
background-color: $green;
color: $white;
}
This will apply both class!!
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;
}
}
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.