List arguments on SASS


#1

$stripe-properties: to bottom, 15%, blue, white;



@mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF) {
  background: repeating-linear-gradient(
    $direction,
    $stripe-background,
    $stripe-background ($width-percent - 1),
    $stripe-color 1%,
    $stripe-background $width-percent
  );
}

@mixin transform($transformation) {
  transform: $transformation;
  -webkit-transform: $transformation;
  -moz-transform: $transformation;
  -ms-transform: $transformation;
  -o-transform: $transformation;  
}

@mixin photo-content {
  object-fit: cover;
}


//Add your own mixins here
@mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF) {
  background: repeating-linear-gradient(
    $direction,
    $stripe-background,
    $stripe-background ($width-percent - 1),
    $stripe-color 1%,
    $stripe-background $width-percent
  );

@mixin transform-style($style){
   transform-style: $style;
  -moz-transform-style: $style;
  -o-transform-style: $style;
  -ms-transform-style: $style;
  -webkit-transform-style: $style;
}

@mixin transition($time){
  transition: $time;
  -webkit-transition: $time;
  -moz-transition: $time;
  -o-transition: $time;
}

.notecard {
  width: 300px;
  height: 180px;
  border: 1px solid black;
  display: inline-block;
  margin: 20px;
  font-family: Roboto, sans-serif;
  box-shadow: 1px 1px 2px 2px rgba(0,0,0,.2);
  @include transform-style(preserve-3d);
  @include transition(0.4s);
  
  &:hover{
  	@include transform (rotatey(-180deg));  
	}	
  
  .front, .back {
    width: 100%;
    height: 100%;
    position: absolute;
    @include backface-visibility;
  }
  
  .front {
  z-index: 3;
  font-size: 20px;

    .word {
      display: block;
      text-align: center;
      position: relative;
      top: 40%;
    }    
  }
  
  
  .back {
  z-index: 1;
  word-wrap: break-word;
  line-height: 1.6;
  @include transform(rotatey(-180deg));  
    
    .definition {
      width: 100%;
      height: 100%;
          @include stripes($stripe-properties...);  
      .photo {
        width: 60%;
        margin: 0px auto;
          
      }
    }
  }
}

Tell me what is wrong on this one I cannot give up!!!!!!!!!!!!!!!!!!!!!!!!!!

`


#2

Can you tell us what exercise and/or provide a link? Thanks :slight_smile:


#3

SASS 6/9 Mixin and selectors List Arguments that is my topic


#4

Sorry, I must've missed the topic. Did you by chance copy and paste the snippets from the instructions? I've noticed, and especially with SASS, that it doesn't always take copied code. Which in the long run helps for remembering syntax and structure.


#5

all I kmow is that did you put in the $stripes mixin what does that mean?


#6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.