CODEWITHSUNDEEP
csssassautoprefixer
user6610859
user6610859

Reputation: 11

Can the Sass default compiler autoprefixes?

If I have the example code:

:fullscreen a {
  display: flex;
}

Can the default sass compiler make it:

:-webkit-full-screen a {
  display: -webkit-box;
  display: flex;
}
:-moz-full-screen a {
  display: flex;
}
:-ms-fullscreen a {
  display: -ms-flexbox;
  display: flex;
}
:fullscreen a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

and not just the normal CSS non-prefixed version?

I've been using Autoprefixer for this task, but I want to know if there's a better way of doing it then using 2 programs.

Upvotes: 0

Views: 104

Answers (1)

Dan Mindru
Dan Mindru

Reputation: 6104

You can use Compass with SASS, but it's not as elegant as autoprefixer.

From the docs:

You can configure the compass default browser support matrix by setting these variables as needed.

This file can be imported using: @import "compass/support"

There's more about it here.

However... I suggest you find a good strategy for autoprefixer using either Gulp, Grunt or Webpack and make it a boilerplate so you can reuse it in all your projects. Is far more hassle-free and you don't need to add extra code to your stylesheets to make it work. The main reason autoprefixer exists is to keep you for writing additional code in your CSS file, so make use of it.

If curios, here's what the creator of autoprefixer had to say about it:

We can use mixin libraries with preproccesors like Compass for Sass or nib for Stylus. They solve a lot of problems, but create other problems instead. They force us to use a new syntax. They iterate much slower than modern browsers do, so a stable release can have a lot of unnecessary prefixes, and sometimes we need to create our own mixins.

Read the full article here.

Upvotes: 1

Related Questions