SCSS
.clearfix.scss {
background: #000;
}
.container1 {
#extend .clearfix;
}
.container2 {
#extend .clearfix;
}
.container3 {
#extend .clearfix;
}
CSS Output:
.clearfix, .container1, .container2, .container3, .container4, .container5 {
background: #000;
}
How can I remove this grouping selectors.
Compilied by gulp.
Using this task:
gulp.task('sass', function () {
return gulp.src('scss/style.scss')
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer(
{
browsers: ['last 15 versions'],
cascade: true
}
))
.pipe(csscomb())
.pipe(gulp.dest('css/'))
.pipe(connect.reload()) });
You are seeing the intended output of the #extend feature. It combines extended selectors in order to result in a smaller file output. You could try using a mixin instead.
SCSS:
#mixin clearfix {
background: #000;
}
.clearfix {
#include clearfix;
}
.container1 {
#include clearfix;
}
.container2 {
#include clearfix;
}
.container3 {
#include clearfix;
}
CSS output:
.clearfix {
background: #000;
}
.container1 {
background: #000;
}
.container2 {
background: #000;
}
.container3 {
background: #000;
}
Related
I know the title is not very descriptive, so I'm going to show an example of the behaviour I need:
Input
#mixin superScopeMixin {
/* ... */
}
.one {
superScopeMixin {
.two {
.three {
/* ... */
}
}
}
}
Output
.one.two .three,
.one .two .three {
/* ... */
}
I want a selector to be prefixed both "with a space" and "without a space". Is this possible? I can use Less, Sass, or Stylus.
Thanks!
If I understand your question correctly, you can setup your mixin like this:
#mixin superScopeMixin {
&.two, .two {
color: #fff;
.three {
color: purple;
}
}
}
.one {
color: gray;
#include superScopeMixin
}
Which compiles to:
.one {
color: gray;
}
.one.two, .one .two {
color: #fff;
}
.one.two .three, .one .two .three {
color: purple;
}
I am trying to nest mixin together to update style. But I found that the output css seems not what I expected.
I am wondering if there is any way can nest mixin together and having ampersand on the right.
Below are some sample code and expected result.
Thanks.
HTML:
<html class="classA">
<div class="itemA">
<div class="itemB">Item B</div>
</div>
</html>
SCSS:
#mixin add-style-when-classA-exist() {
.classA & {
#content;
}
}
#mixin add-style-when-classB-notExist() {
html:not(.classB) & {
#content;
}
}
.itemB {
color: blue;
#include add-style-when-classB-notExist() {
color: green;
}
#include add-style-when-classA-exist() {
color: red;
#include add-style-when-classB-notExist() {
color: yellow;
}
}
}
Actual CSS Output:
.itemB {
color: blue;
}
html:not(.classB) .itemB {
color: green;
}
.classA .itemB {
color: red;
}
html:not(.classB) .classA .itemB {
color: yellow;
}
Expected CSS Output:
.itemB {
color: blue;
}
html:not(.classB) .itemB {
color: green;
}
.classA .itemB {
color: red;
}
html:not(.classB).classA .itemB {
color: yellow;
}
Consider the following code:
#mixin bar() {
#if & {
&.bar {
display: none;
}
} #else {
.bar {
display: none;
}
}
}
#include bar();
.foo {
#include bar();
}
...which compiles to:
.bar {
display: none;
}
.foo.bar {
display: none;
}
Is there a way to write this mixin without duplicating the .bar block?
You can consider it as an argument with a default value that you can easily change:
#mixin bar($c:'.bar') {
#if & {
&#{$c} {
display: none;
}
} #else {
#{$c} {
display: none;
}
}
}
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.
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 {
// ...
}
}