Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS SASS and SCSS Reply To: SASS and SCSS

#202971
Paulie_D
Member

This as SASS

figure
  margin-bottom: 20px
  position: relative
  opacity: 0
  transform: translateX(20px)
  transition: all 0.3s ease-in-out
  overflow: hidden
  cursor: pointer
  &.is-showing
    opacity: 1
    transform: translateX(0px)
  img
    display: block
    transform: scale(1)
    transition: all 0.3s ease-in-out
  &:hover
    figcaption
      left: 0%
    img
      transform: scale(1.1)

compiles to this CSS

figure {
  margin-bottom: 20px;
  position: relative;
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  cursor: pointer;
}
figure.is-showing {
  opacity: 1;
  transform: translateX(0px);
}
figure img {
  display: block;
  transform: scale(1);
  transition: all 0.3s ease-in-out;
}
figure:hover figcaption {
  left: 0%;
}
figure:hover img {
  transform: scale(1.1);
}

Which is this in SCSS

figure {
  margin-bottom: 20px;
  position: relative;
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  cursor: pointer;
  &.is-showing {
    opacity: 1;
    transform: translateX(0px);
  }
  img {
    display: block;
    transform: scale(1);
    transition: all 0.3s ease-in-out;
  }
  &:hover {
    figcaption {
      left: 0%;
    }
    img {
      transform: scale(1.1);
    }
  }
}

Use SASSMeister to test.