Is there a way to put made classes inside a class?
e.g.
.my-upper-class{ .hidden-md, .hidden-sm, .hidden-lg}
Not with plain CSS, but with Sass, like so—
.hidden-sm {
background: red;
}
.hidden-md {
color: blue;
}
.hidden-lg {
font-size: 1em;
}
.my-upper-class {
#extend .hidden-sm;
#extend .hidden-md;
#extend .hidden-lg;
}
which outputs the final CSS as below, which is pretty much what you are looking for.
.hidden-sm, .my-upper-class {
background: red;
}
.hidden-md, .my-upper-class {
color: blue;
}
.hidden-lg, .my-upper-class {
font-size: 1em;
}
Related
I have a problem about "#extend" directive in SCSS.
.header {
.introduction-group {
text-align: center;
color: $white;
width: 70%;
}
.about {
&__description-group {
#extend .introduction-group;
This code block does not work. However,
.header {
&__introduction-group {
text-align: center;
color: $white;
width: 70%;
}
.about {
&__description-group {
#extend .header__introduction-group;
Second one works. Why?
Thank you.
As mentioned here nested classes won't be applied with #extend. Your second code block targets the specified class including the parent prefix. The first code block doesn't, it only targets the nested class.
I made a small codepen demo to illustrate the problem in a simple way. Make sure you checkout the Sass docs for a more comprehensive explanation!
<h1 class="wrong">Test style gone wrong</h1>
<h1 class="right">Test style gone right</h1>
.test {
.nested {
color: red;
}
&-nested {
color: red;
}
}
.wrong {
#extend .test;
#extend .nested;
}
.right {
#extend .test-nested;
}
I have some markup that looks about like this -
<div class="card">
<div class="card__icon">Icon</div>
<div class="card__text">Text</div>
</div>
Which I am styling with a little LESS like so -
.card {
&__icon {
font-size: 1.75em;
#media (min-width: 992px) {
font-size: 2em;
}
}
&__text {
font-size: 1em;
}
}
This works great - however the parent is getting toggled a class .current on it and I was trying to change one of the childrens styles using the same methods, but could not seem to get it working. I was trying this -
.card {
&__icon {
font-size: 1.75em;
#media (min-width: 992px) {
font-size: 2em;
}
}
&__text {
font-size: 1em;
}
&.current {
// this is not working
&__text {
color: red;
}
}
}
I can change the &__text inside the &.current to .card__text and it works fine - however I was wondering if there was a way I could keep the &__text syntax inside the &.current with using LESS. Thanks!
According to the documentation, the parent selector & expands to the whole parent nested rule, taking each nested rule parent as is and inserting it in place of `&, so in your case
.card {
&.current {
&__text {
color: red;
}
}
}
compiles to
.card.current__text {
color: red;
}
which is not what we want, because class current__text does not exist. To avoid that you may rearrange the class selectors in your less rules like so:
.card {
.current & {
&__text {
color: red;
}
}
}
which compiles to:
.current .card__text {
color: red;
}
A working example can be found in this codepen
I try to understand BEVM+SCSS philosophy.
I don't know how to extend V from BE in this case.
What I want to achieve:
.block {
&__element {
background-color: black;
&--variation-a {
#extend &__element; //won't work
color: red;
}
&--variation-b {
#extend &__element; //won't work
color: green;
}
}
}
What I want to avoid:
.block {
&__element {
background-color: black;
&--variation-a {
#extend .block__element; //work but ugly
color: red;
}
&--variation-b {
#extend .block__element; //work but ugly
color: green;
}
}
}
The only way I've found it's to have a kind of %element { ... } aside and extends from it, but it's not exactly what I want.
You can use variables. $b to store block name and $e to store element name.
Sassmeister demo.
.block {
$b: &;
&__element {
$e: #{$b}__element;
background-color: black;
&--variation-a {
#extend #{$e};
color: red;
}
&--variation-b {
#extend #{$e};
color: green;
}
}
}
But it's bad practice to nest element styles by modifier. Modifier must only override styles.
sorry but it's confusing to me, somebody knows how it's possible or it's not possible..
#divp {
background-color: lightgrey;
.odiv {
background-color: yellow;
.pp { background-color: black; }
a { color:red; }
}
.pp { background-color: lightgreen; }
a { color:blue; }
}
#divw {
background-color: lightblue;
.odiv {
background-color: blue;
.pp { background-color: white; }
a { color:yellow; }
}
.pp { background-color: green; }
a { color:lightblue; }
}
i want create divs with internal css rules and i dont want to write all the time the same..... like
#diw .odiv .pp { background-color: white }
#diw .odiv .a { color: white }
#diw .odiv .other { color: blue }
is it possible?
Nesting selectors is not possible, but you might want to checkout CSS preprocessors, which will let you do this. http://lesscss.org/ for example.
It is not possible in standard CSS. But it is possible in Sass (and other CSS Preprocessors): http://sass-lang.com/guide#3
It works exactly as you posted in your question:
.div1{
background-color: red;
p{ font-size: 18px; }
}
Will output this:
.div1{ background-color: red }
.div1 p{ font-size: 18px; }
Check out http://sassmeister.com/ for a way to play around with Sass.
Usually i use LESS for my projects but now im trying to go with SASS.
In LESS i do things like this
.module {
background-color: blue;
&-title {
color: black;
}
&-type-2 {
background-color: red;
}
}
and the output CSS will be
.module {
background-color: blue;
}
.module-title {
color: black;
}
.module-type-2 {
background-color: red;
}
In SASS wont work, there is someway to do it in SASS?
As of Sass 3.3, you can do that with the following syntax:
.block{
&__element {
// ...
}
&--modifier {
// ...
}
}