Skip to content

Problem with the first comment on ampersand-nested class #479

@blackgearit

Description

@blackgearit

Hi,
I'm using php css Janus and have problems with comments on this php sass compiler
My source is

/*! @noflip */
.textimage-background-fullheight {
  position: relative;
  width: 100%;
  overflow: hidden;
  @include noMargin();

  /* @noflip */
  &.right {
    .text-container {
      left: auto;
      right: $divider_60;
    }
  }

  &.left {
    .text-container {
      /* @noflip */
      left: $divider_60;
    }
  }

  &.center {
    .text-container {
      /*! @noflip */                <----------------- HERE
      left: 50%;
      /* @noflip */
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
    }
  }
}

the compiled css is

/*! @noflip */
.textimage-background-fullheight {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0;
  /* @noflip */ }
  .textimage-background-fullheight.right .text-container {
    left: auto;
    right: 60px; }
  .textimage-background-fullheight.left {
    /* @noflip */ }
  .textimage-background-fullheight.left .text-container {
    left: 60px; }
  .textimage-background-fullheight.center {
   /*! @noflip */ }   <---------------------------- HERE
  .textimage-background-fullheight.center .text-container {
    left: 50%;
    /* @noflip */
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%); 
}

The problem is that, as you can see, the comment /*! @noflip */ on
.textimage-background-fullheight.center .text-container
class is associated with the parent class
.textimage-background-fullheight.center.

this doesn't occurs with nested class without &:

.textimage-background-fullheight {
    .background {
    /* @noflip */
    display: block;
    width: 100%; }
}

is compiled to

.textimage-background-fullheight {
}
.textimage-background-fullheight .background {
    /* @noflip */
    display: block;
    width: 100%;
 }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions