Bootstrap classes inside a defined class - css

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

Merging selector #extend issue

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;
}

LESS - using BEM selector with extra class on parent to deviate

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

How to extend in scss from parent (in case of BEVM)

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.

its possible css selector inside another selector

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.

Using SASS & reference for OOCSS

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 {
// ...
}
}

Resources