Search code examples
sass

SASS code error does not identify line error


I am getting an error from the code below and I have been unable to identify the error. This is a quasar app

Without providing a code line, the error shows "Module Warning (from ./node_modules/sass-loader/dist/cjs.js): This selector doesn't have any properties and won't be rendered.

null"

This link doesn't appear to help as there shouldn't be a space after hover. This selector doesn't have any properties and won't be rendered (for no reason)

.GL
&__select-GL__menu-link
 .default-type
   color: black
   visibility: hidden
&:hover
  background: black
  color: black
  .default-type
  color: black
    visibility: visible
&__toolbar-link
a
  color: black
  text-decoration: none
  &:hover
    opacity: 0.7
 &__menu-link:hover
background: b-primary
color: black
&__menu-link-signed-in,
&__menu-link-status
&:hover
  & > div
    background: white !important
    color: black
&__menu-link-status
  &:hover
  color: black

Solution

  • You Sass code seems to be indented incorrectly and/or missing commas between selector lists. Dumping your code as-is into the Sass playground, we get the errors:

    @warn:1
    This selector doesn't have any properties and won't be rendered.
    
    @warn:9
    This selector doesn't have any properties and won't be rendered.
    
    @warn:12
    This selector doesn't have any properties and won't be rendered.
    
    @error:18
    Inconsistent indentation, expected 2 spaces.
       ╷
    18 │  &__menu-link:hover
       │ ^
       ╵
      - 18:1  root stylesheet
    

    Possible corrected Sass code:

    .GL
      &__select-GL__menu-link
       .default-type
         color: black
         visibility: hidden
      &:hover
        background: black
        color: black
        .default-type
          color: black
          visibility: visible
      &__toolbar-link,
      a
        color: black
        text-decoration: none
        &:hover
          opacity: 0.7
      &__menu-link:hover
        background: b-primary
        color: black
      &__menu-link-signed-in,
      &__menu-link-status,
      &:hover
        & > div
          background: white !important
          color: black
      &__menu-link-status
        &:hover
          color: black
    

    See this compile with no warnings or errors in this Sass playground.