Can't find problem with 7. @extend vs @mixin


#1

@import url(https://fonts.googleapis.com/css?family=Pacifico); //CSS import
@import "helper/placeholders";
@import "helper/mixins";
@import "helper/variables";

h1 {
  font-family: Roboto, sans-serif;
  @extend %center;
}

.banner {
  font-family: 'Pacifico', cursive;
  height: 400px;
  background-image: url($lemonade-banner);
  border: {
    top: $border;
    bottom: $border;
  } 

  .slogan {
    background-color: $translucent-white;
    border: 4px solid black;
    top: 200px;
    left: 25%;
    line-height: 200px;
    @include dimensions
      (50%,200px);
    @extend %absolute;

    %absolute{
      position: absolute
    }
    
    span {
      @extend%center;
      width: 40%;
      left: 30%;
      @extend %absolute;
    }
  }
}

.container {
  font-family: 'Pacifico', cursive;

  .icon {
    display: inline-block;
    margin: 2%;
    border: $border;
    @include dimensions(300px, 300px);
  }
}

#2

this is what should be in the helper/_mixins.scss file

@mixin center{
  @extend %center;
}

and this in the helper/_placeholders.scss file

%center{
  text-align: center;
  vertical-align: middle;
}

Is helper/placeholders.scss supposed to be blank at start of lesson 7?
#3

@coursecoder12779,
And with

sass --watch app/sass:public/stylesheets

you should see all files

Please read
http://sass-lang.com/guide


#4

span {
@extend%center; --- You are missing space @extend %center
width: 40%;
left: 30%;
@extend %absolute;
}


#5

2 posts were split to a new topic: How can we access helper/_mixins.scss and helper/_placeholders.scss in order to edit the files?


#6

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