I don't understand why the code below generates .test a.test {color: black;}
instead expected a.test {color: black;}?
I thought it's an opposite method to &.a which generates just test.a (in this case).
.test {
width: 10px;
a#{&} {
color: black;
}
}
I just found a solution to style a.test with class a nested in .test.
There is a special sass directive #at-root which allows to emit a style block at root of the list.
// Sass
.test {
#at-root a#{&} {color: blue;}
}
// Generated CSS
a.test {color: blue;}
Demo
Related
I am looking for some way to not repeat a class name within css. For example if I have
.class1 div { color: red }
.class1 h2 { color: blue }
.class1 p { color: yellow }
is there some way I can group the 3 rules under the one class, something like
.class1 {
div { color: red }
h2 { color: blue }
p { color: yellow }
}
With SASS (or SCSS), you can write :
.class1 {
& div { color: red }
& h2 { color: blue }
& p { color: yellow }
}
Where the '&' sign means 'write what you are actually in' (here, it means 'write .class1'). With an SASS or SCSS compiler, this will output :
.class1 div {
color: red;
}
.class1 h2 {
color: blue;
}
.class1 p {
color: yellow;
}
You can start using Online SCSS compiler to start learning it without installing it. You can use the the official Documentation , which is pretty good, or browse Youtube to find some good tutorials.
Hope it helped !
Rule nesting is not possible in CSS. You've to use SASS for this.
I'm having some trouble understanding the placeholder behavior for selectors when compiled into css. So I've created a placeholder inside a class selector (.test) and I'm trying to extend it into another class (.test1) inside a third class (.test2). it compiled into css without any error although I'm curious how the selectors formed when compiled. here are the output and code snippets.
This is not actual use case but I'm just wondering how the selectors formed in the output?
.test {
%placeholder {
font-size: 14px;
}
}
.test2 {
.test1 {
#extend %placeholder;
}
}
Output
.test .test2 .test1, .test2 .test .test1 {
font-size: 14px;
}
According to Vue docs here:
Due to the way browsers render various CSS selectors, p { color: red }
will be many times slower when scoped (i.e. when combined with an
attribute selector). If you use classes or ids instead, such as in
.example { color: red }, then you virtually eliminate that performance
hit
So if you put the following in the Vue's style section:
<style scoped>
.parent .child {
background-color: red;
}
.parent p {
background-color: red;
}
</style>
The VueJs will transform it into this:
<style>
.parent[data-v-12345] .child {
background-color: red;
}
.parent[data-v-12345] p {
background-color: red;
}
</style>
The document says, the second selector is many times slower than the first one.
Can someone explain why the second selector is slower?
In a scss file, I saw the below code snippet:
#mixin myMixin() {
:global(.rtl) & {
#content;
}
}
I understand the keywords #mixinas well as #content and tried to understand :global() from this link:
What does :global (colon global) do?.
But I am not sure what "&" does here or what this whole mixin does.
The ampersand (&) is a combinator used in nesting and in this case it is being used to qualify a selector.
For a general example:
// This Sass...
.foo {
.bar & {
color: red;
}
}
// ...would compile to this CSS
.bar .foo { color:red; }
In your example, the mixin declaration replaces .foo, and would look like:
// If you called your mixin at .bar
.bar {
#include myMixin {
color: red;
}
}
// It should compile to something like this
:global(.rtl) .bar { color: red; }
More details about ampersands and qualifying selectors in this CSS Tricks article.
I was trying to use a class with psuedo class in the less css mixin
a:link{
color:#138CB4;
text-decoration:none;
}
a:visited{
a:link;
color:#84B6CD;
}
But out put I got is this, which an invalid css
a:link{
color: #138CB4;
text-decoration: none;
}
a:visited{
a: link;
color: #84B6CD;
}
Am I missing something here or mixins don't support pseudo classes yet.
I was a little confused by this at first, too, and found myself jumping through hoops to get it to work. Although your post is old enough that it might pre-date this functionality for all I know.
Anyway, if you're just trying to add additional styles to an existing style via pseudo-selectors, you can use the '&' operator. It works kind of like a 'this' keyword, and turns nesting into a simple combination. So you should be able to do:
a {
color: #138CB4;
text-decoration: none;
&:visited {
color: #84B6CD;
}
}
This should compile out to something like:
a {
color: #138CB4;
text-decoration: none;
}
a:visited {
color: #84B6CD;
}
Note that you can also use the & to combine 'sub-selectors':
.outer {
color: blue;
.error {
//this will select elements that are .error inside-of/descending-from .outer
}
&.error {
//This will select elements that are .outer AND .error
color: red;
}
}
The official definition is unfortunately hiding in plain sight in the Nesting Rules part of the documentation.
I don't believe that is how you use mixin's in Less.
You have defined the link pseudo class and then nested it under the visited pseudo class. This doesn't actually mean anything and is why your are getting that output.
If I think what you are aiming for is to re-use your link styles across :visited and :link, you actually will want this:
.link {
color: #138CB4;
text-decoration: none;
}
a:link {
.link;
}
a:visited{
.link;
color: #84B6CD;
}
Not fully sure, what you want to achieve. But if you got tired of :link,:visted,:active (aka normal link) vs. :focus, :hover (hover styles), this works:
.anchor( #- ) {
a, a:link, a:visited, a:active {
#-();
}
}
.anchorH( #- ) {
a:focus, a:hover {
#-();
}
}
for example:
.anchor({
background: #fff;
});
.anchorH({
background: #ddd; /* darken on hover or focus */
});