PostCSS — Autoprefixer

Hi all, I’m a virgin :heart: to webdesign and all that, as i was doing my little experiments with Pinegrow, i’ve noticed that my ignorant way to do things misunderstood one really important thing: prefix…than i reminded my self that i used Parcel Bundler - good guy, so i went again on my hunts and i found out i could do just with PostCss and it’s Autoprefixer plugin [please, if anything of what i write, sound silly, point me where i’m wrong, i admit to have like maybe, 2% of knowledge, but 98% of will to learn :smiling_face_with_three_hearts: ] So, i was just asking myself andYou all, if it’s possible to integrate PostCSS, Parcel Bundler like with VS Code, or just simply, i need to go to Vs and then finish my work there? If it’s so, ok, i was curious to know if i could do it.

Thank You all, wish a good life!

Hey @tytusie,
I’m not positive if it is an official Pinegrow sanctioned trick, but…
PG uses autoprefixer with SASS and LESS style sheets. SASS doesn’t really mind what you feed it, so while working on your project, there is a workaround.

  1. Duplicate your stylesheet you want prefixed and name it with the file extension ‘.scss’. So for example, ‘style.css’, is duplicated as ‘style.scss’.
  2. Next, go into the “Manage stylesheets…” under the “File” menu.
  3. Select the stylesheet to be prefixed and click the “Use SCSS/LESS” link.
  4. Select the newly duplicated stylesheet.
  5. Add any new rules to the SCSS stylesheet - when you save it will update the original stylesheet with prefixes.
  6. when you are done with the project you can safely delete the SCSS sheet and use the original style.css (minified, of course).
    Note that under the “Support” menu in the “Settings…” section you can change how the autoprefixer works.
    Hope this helps!

@RobM Hey Rob, thank you, i had some initial troubles with it, but with a bit of patience, i managed. So now as i see i have my css file being updated through the scss like in the screenshot
and that happens because i have my css linked through “Manage stylesheets…” panel under file. And then, i’ll just have to minify the end css file, right? I was been using during my first tests Parcel Bundler. But what in a way make confused was the amount of file, which i was not sure if had to upload them all again at every change i was been doing. But, nevertheless, for the moment it’s enough for my needs. I really appreciated your reply and it helped me a lot! :100:

Correct, you just have to minify the “style-grafica.css” file when you are done.

@tytusie That said, if you’re just getting started with creating CSS styles, imho, dealing with PostCSS, Autoprefixer and minifying your stylesheets shouldn’t really be the main concerns of your learning :slight_smile:

@Emmanuel Hello Emmanuel, you might be right, but in a way i t was really helpfull to discover the prefixer function, just because while i tried out my small little project on my server i had like a non sense layout on chrome, where it wasn’t so in mozilla, and then discovering this function already existing in Pinegrow, made me once again, more happy that i’m using Your software. That i think, it’s a really good feature in Pinegrow, and i’m happy to not to have make all the workarounds. Simple as that, hit save and publish the project, of course, i could learn even the prefix stuff…but I was always asking my self why do they still exist after such a long time of web development and pretty amazing implementations from the past decades.
Anyway, this is solved, so, we can be happy again :tada:

Don’t get me wrong, this specific knowledge is very good to have, I just wanted to say that it wasn’t really a must have to start with :slight_smile: