Create Reusable CSS with Mixins - time saver..?

this doesn’t seem like a time saver to me…what am i missing…??

do i need line 2 of my code? it passes test with or without it?

why would i not code the @include line as
@include $radius;
since $radius is the name of my variable…??

thnx

Your code so far


<style type='text/sass'>
$radius:border-radius(15px);

 @mixin border-radius($radius){
  -webkit-border-radius:$radius;
  -moz-border-radius:$radius;
  -ms-border-radius:$radius;
  border-radius:$radius;
  };
      
  #awesome {
    width: 150px;
    height: 150px;
    background-color: green;    
    @include border-radius(15px);
  }
</style>

<div id="awesome"></div>
  

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/sass/create-reusable-css-with-mixins

I’m not convinced it does save time or provide benefit. Other than having to use them to contribute to other projects, I don’t use preprossesors. It’s just another way of writing the same code, and you still have to compile. Blargh.

@include includes the mixin you created, not the variable which is used in the mix in.

A lot of extra code to write border-radius: 15px;

The point is to create a simple way to write in all the support prefixes so you don’t have to do it over and over again. Which I’d be more worried about if you have to do, which by the way you don’t anymore for border-radius.

But learning it for the possibility of getting a job that requires it, that’s worth while.

1 Like