Custom styling in _buttons.scss not working?

1
Hello, I am following the course: "Style your app with CSS”. And I got stuck at 5.4.2 and specific point 5. and 6. Point 5: I've added the given styles within  .btn, mx-button{} selector. But I don't know what to do at point 6. It seems like nothing is working and the style keeps the same.  This is my code at point 5:   So my question is: what do I have to do at point 6?  PS: this is the question: On lines 60 - 66, you should see two @include button-variant(). These are whats known in SASS as mixins, but in other development languages closely resemble functions. These mixins allow you to pass in CSS properties, and the mixin will export code. In this case, it will create different looking buttons based on the colors you pass in. Use the graphical spec to define the arguments for btn-primary and btn-info.
asked
4 answers
4

Hi Lennart,

Have you compiled your css changes with css compiler? Or can you checked the style in your browser by inspecting the element or by searching in the source tab 

If your changes are not reflected here, it will not be applied in your button.

 

Hope this helps!

answered
0

Hi Lennart, 
as far as I’ve understood the assignment in 5.4.2 you should do the following: 

  1. add the common styling properties to the “superclass” .btn, mx-button {}, what you did
  2. Change the parameters of the mixins to resemble the wanted results
    → You’ve added a :hover style on btn, mx-button
    → The hover style will be overwritten by the mixin, because the mixin has been added below the mx-button class
    In general, only the last styling directive will be displayed by the browser.

 

I hope this helps

answered
0

Thanks for answering, but I don't really know what you mean. 

I've put the following code below the mixin. 

.btn-primary{
    font-size: 18px;
    font-weight: 700;
    border-radius: 0;
    text-transform: uppercase;
    background-color: #fff;
    color: $brand-primary;

    &:hover{
        background-color: $brand-primary;
        color: #fff;
    }
}

.btn-info{
    font-size: 18px;
    font-weight: 700;
    border-radius: 0;
    text-transform: uppercase;
    background-color: #fff;
    color: $brand-info;

    &:hover{
        background-color: $brand-info;
        color:#fff;
    }
}

 

What do I have to do with the mixin parameters? Change them? Or do I need to change someting in the @include line?

answered
0

I was stuck at the same point in this course, but the $btn-primary-color etc. that are displayed in the mixin's below are variables that are stored in the _variables.scss.

// Button style variations
// @mixin button-variant(text color, background color, border color, hover background color) {
.btn-primary {
    @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color, $btn-primary-bg-hover);
}

.btn-info {
    @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color, $btn-info-bg-hover);
}

When you edit the 4 variables for each mixin you get the result as mentioned in the example. You can put the properties of the buttons that are shared (f.e. text-transform) in the .btn, mx-button{} class.

answered