How to properly declare the sass statement to produce the output css in comment ?
.formModal{
.modal-body{
.inputTextWrap{
/*
.modal-body > .inputTextWrap:first-child {
background:violet;
}
*/
}
}
}
Try this:
.formModal{
.modal-body{
.inputTextWrap{
#at-root .modal-body > .inputTextWrap:first-child{
background: violet; //Remember you need a space after the:
};
}
}
}
You can check stuff like this on sassmeister
Related
I have a simple HTML and CSS with BEM. I want style for class .block__item-header-mark inside class .block__item-header--has-round.
I use CSS .block__item-header--has-round .block__item-header-mark { /styling here/ }. But I don't think this is good syntax.
My question is:
How to call .block__item-header-mark inside .block__item-header--has-round with better syntax in my SCSS code ?
My BEM syntax is good ?
Code
.block {
&__item {
&-header {
&--has-round {
/* How to call .block__item-header-mark with better syntax ??? */
.block__item-header-mark {
/*overide style*/
}
}
&-mark {
/*normal style*/
}
}
}
}
<div class="block">
<div class="block__item">
<div class="block__item-header block__item-header--has-round"><span class="block__item-header-mark"></span></div>
<div class="block__item-body"></div>
</div>
</div>
You can create a variable to refer to the scope you want
.block {
&__item {
&-header {
$header: &;
&--has-round {
#{ header }-mark {
/* override style */
}
}
&-mark {
/*normal style*/
}
}
}
}
I would like to use the value of one root variable (which is defined by javascript) within a mixin as a condition of a #if. I think the example below is more clear than my explanation actually... Thanks for the help.
:root {
--bu:A;
}
#mixin varCheck() {
$var: var(--bu);
#if ($var == A) {
header {
background-color: blue !important;
}
}
#if ($var == B) {
header {
background-color: black !important;
}
}
}
#include varCheck();
Ok, suppose I have the following traditional CSS
.social-media { /* ... */ }
.social-media .twitter { /* ... */ }
.social-media .facebook { /* ... */ }
ul.social-media { /* ... */ }
So, I tried to do it like this with SCSS:
.social-media {
/* ... */
.twitter {
/* ... */
}
.facebook {
/* ... */
}
// Here's the problem:
ul& {
/* ... */
}
}
The last part does not work, because it seems like the ampersand should only appear at the beginning of a selector. Is there a workaround?
Sass 3.2 and older
The only thing you can do is reverse your nesting or not nest at all:
.social-media {
/* ... */
.twitter {
/* ... */
}
.facebook {
/* ... */
}
}
ul.social-media {
/* ... */
}
Sass 3.3 and later
You can do that using interpolation and the #at-root directive:
.social-media {
/* ... */
// Here's the solution:
#at-root ul#{&} {
/* ... */
}
}
However, if your parent selector contains multiple selectors, you'll need to use selector-append instead:
.social-media, .doodads {
/* ... */
// Here's the solution:
#at-root #{selector-append(ul, &)} {
/* ... */
}
}
Output:
.social-media, .doodads {
/* ... */
}
ul.social-media, ul.doodads {
/* ... */
}
I've tried to wrap my brain round this, I assume that I need an if statement somewhere along the way.
But I'd like to be able to do this with sass. But this will just take the green colour and ignore the default colour regardless of the class.
SASS
// Default Colours --------------------------------------------------------------
$textColor: #FFF;
.green {
// Base Colours --------------------------------------------------------------
$textColor: green;
}
body {
text: $textColor
}
HTML
<p>jamie</P> //Output is #FFF
<p class="green">jamie</P> //Output is green
Here is a little mixin you could use.
$base-color: green;
#mixin change-var($var: $base_color, $selector: x, $property: color) {
#if $selector == x {
$var: blue;
} #else if $selector == y {
$var: green
} #else {
$var: $var;
}
#{$property}: $var;
}
usage:
.x {
#include change-var($base-color, x, color)
}
.y {
#include change-var($base-color, y, background-color)
}
output:
.x {
color: blue;
}
.y {
background-color: green;
}
Try this
$textColor: #fff;
body {
color: $textColor;
}
.green {
$textColor: green;
color: $textColor;
}
I have the following code to target buttons that are in a disable state:
.btn-default[disabled] {
background-color: lighten(#btn-default-bg, 30%)
}
Is it possible to use nested rules to target the disabled attribute? something similar to &:Hover
You can indeed, like this:
.btn-default {
&[disabled] {
background-color: lighten(#btn-default-bg, 30%)
}
}
http://jsbin.com/aKuLire/1/edit
You can even do further nesting:
input {
&[type="submit"] {
&[disabled] {
background: #blue;
}
}
}