Sass: Create Reusable CSS with Mixins Problem

HTML-CSS
#1

Tell us what’s happening:

Hello,

Could you please explain me the purpose of specifying the same thing 4 times in the @mixin code? All of them use the same argument $radius, so why we would need to have specified 4 times and 3 out of 4 is a the same code re-written for each browser as I understand.

Thank you,
Konstantin

Your code so far


<style type='text/sass'>
@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/80.0.3987.132 Safari/537.36.

Challenge: Create Reusable CSS with Mixins

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

#2

I may be mistaken, and someone else please correct me if I’m wrong, but you use these extra statements, webkit, moz, ms, as browser-specific instructions for new CSS features that have not been universally adopted yet. Once a feature becomes standard, it is no longer necessary to use those other prefixes.

2 Likes
#3

Yeah agree @LuosRestil; all those you see @konstantin.krumin is known as vendor prefixes. This allows for css compatibility across various web browsers. Each vendor prefixes has their individual name:
-moz- = mozilla
-ms- = Internet Explorer
-webkit- = Chrome/Safari
-o- = opera browser.

Recall: CSS and HTML are evolving on a continual basis just like any other technology. That said, such improvements are implemented across different vendor browsers slow and steady.

1 Like
#4

You can read a bit more about vendor prefixes.

Using them has had some unintended consequences and vendors have now moved towards developing features behinds config/feature flags in the browser. For example, CSS grid was mostly developed behind browser flags (with the exception of IE/Edge and the initial specs that came from Microsoft which are still behind the -ms- prefix).

If you checkout caniuse for css grid you can see a little green flag on some of the browser versions from different vendors. That is the feature flag.

1 Like
#5

@passive @lasjorg @LuosRestil

Thank you guys for your replies!
Now I got it

#6