Do vendor specific elements need to be added for every property in Sass mixin?

HTML-CSS
1

Challenge

Logic to Sass Templates

code

 @mixin border-stroke($val) {
    @if $val == light {
      border: 1px solid black;
    }
    @else if $val == medium {
      border: 3px solid black;
    }
    @else if $val == heavy {
      border: 6px solid black;
    }
    @else {
      border: none;
    }
  }

Do we need to add moz-border, webkit-border ms-border when we use SASS for practical usages?

If that is the case then won’t writing Style sheets be very bulky?

2

It depends on what browsers you want to support.

I include all of them to avoid any unexpected behaviors in different browsers especially for an enterprise/company app.

3

You have to CTRL+C and CTRL+V everytime along with the propertynames in the end?

Is there a way to globally declare them as variables like $moz: moz; $wb: webkit that developers use?

4

Definitely yeah. One of the FCC course covers it.

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

5

A. Prefixed properties denote experimental properties being tested by browsers or properties only implemented by a specific browser. border is not an experimental property.
B. At this point in time very few things need prefixes.
C. You shouldn’t ever be doing this by hand anyway, there is a tool called autoprefixer that does it all automatically.

1 Like