CODEWITHSUNDEEP
sass
Rost
Rost

Reputation: 185

Error when trying to compile SASS code

I'm using Sass for styles. When i try to compile this part of code: 

.heart {
  width: $size * 2;
  height: $size * 1.65;
  cursor: pointer;

  &:before {
    position: absolute;
    content: "";
    left: $size;
    width: $size;
    height: $size * 1.65;
    background: #fff;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
  }
  &:after {
    @extend .heart:before;
    left: 0;
    transform: rotate(45deg);
    transform-origin :100% 100%;
  }
}

I got this message: 

@extend .heart:before;
Error: compound selectors may longer be extended.
Consider `@extend .heart, :before` instead.
See http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extending_compound_selectors for details.

@extend .heart:before;

It doesn't compile with terminal, but it's compile and works as expected with Prepros application. Any ideas why it doesn't work when i try to compile with sass command?

I used this example: https://codepen.io/souporserious/pen/yEntv

Upvotes: 3

Views: 4693

Answers (2)

Eljah
Eljah

Reputation: 5155

for angular 8

npm install node-sass --save-dev

should be tried; also remove sass with

npm remove sass

and comfigure to use node-sass only in your webpack.prod.js

   const sass = require('node-sass');
   ...
   {
        test: /\.scss$/,
        use: ['to-string-loader', 'css-loader', {
            loader: 'sass-loader',
            options: { implementation: sass }
        }],
        exclude: /(vendor\.scss|global\.scss)/
    },

just adding node-sass as it is described in some github issues answers didn't help me, I was forced to remove sass and point explicitly to node-sass implementation

Upvotes: 3

J Quest
J Quest

Reputation: 603

I think you need to create a placeholder like this; Also I know that there are some bugs in command line compiling with @extand and pseudo-elements around 2016.

%placeholder {
    position: absolute;
    content: "";
    left: $size;
    width: $size;
    height: $size * 1.65;
    background: #fff;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

.heart {
  width: $size * 2;
  height: $size * 1.65;
  cursor: pointer;

  &:before {
    @extend %placeholder;
  }
  &:after {
    @extend %placeholder;
    left: 0;
    transform: rotate(45deg);
    transform-origin :100% 100%;
  }
}

Upvotes: 5

Related Questions