css SCSS和CSS中的纯CSS交叉。

Posted 2021-05-13

// Mixins and Variables are being used from this gist:
//   https://gist.github.com/zeshanshani/c4d5ae43e6a9f661d012
// Bourbon.io is also a dependency. 
// For it's CSS generated output, look at the second file below. 

$size: 22px;
position: relative;
@include size-rem( $size );

&:before,
&:after {
  content: '';
  @include size-rem( $size 1px );
  @include transform( rotate( 45deg ) );
  background-color: #fff;
  position: absolute;
  display: block;
  @include margin( $size / 2, 'top' ); // to align center the lines vertically
}

&:after {
  @include transform( rotate( -45deg ) );
}

.element {
  position: relative;
  height: 22px;
  height:  2.2rem;
  width: 22px;
  width:  2.2rem;
}
.element:before, .element:after {
  content: '';
  height: 1px;
  height:  0.1rem;
  width: 22px;
  width:  2.2rem;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: #fff;
  position: absolute;
  display: block;
  margin-top: 11px;
  margin-top:  1.1rem;
}
.element:after {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}