13 Replies Latest reply on Jul 9, 2014 9:20 AM by deadfedbs

    CSS Preprocessors?

    brucebowman Employee Moderator

      These questions are for people that want to copy CSS from Parfait.


      Do you use CSS Preprocessors in your workflows?


      If so, which one do you use most often?


      Do you ever use others, and if so, which one(s)?


      Would you like Project Parfait to provide you with CSS in the syntax needed for your preprocessor?


      Tell us about it!




        • 1. Re: CSS Preprocessors?

          Hi Bruce,


          I use LESS a lot in my day to day work flow, but as most people I know using less have semi-build-there-own mixin libraries not sure how easy that would be to integrate in without having to do a lot of restructuring your workflow, one that would be nice would be vendor prefixes as mixins, I think they are one of the few things most people have in their mixin libraries and since the syntax is fairly close to see anyway I would think it might be easier to implement efficiently!


          Glad you're thinking of these kinds of things though, ideal situation would be you have a base mixin library and let people add their own on a per-account level? Again not sure how practical this would be to generate, CSSHat have a mixin library that works with their Photoshop extension but I've not actually used it so don't know if it's any good. http://lesshat.madebysource.com/



          • 2. Re: CSS Preprocessors?

            Hi Danny,


            Thank you for the response.  Out of all the preprocessors, LESS does not seem to have a ’standard' mixin library like SASS (Compass/Bourbon) and Stylus (nib), which makes it more interesting.


            Having the ability for user-uploaded mixin generation is intriguing and definitely something for us to think about.  If we were to prescribe you to a specific mixin library for SASS, be in LESS Hat or LESS Elements, would that be a non-starter for you since you roll your own mixin library?



            • 3. Re: CSS Preprocessors?

              I use sass and compass in my project, I love it and I seldom use custom mixins except for things like animations or placeholder text on form elements. I personally would love this! It would be awesome to get both sass and scss syntax as well, I know nesting gets a little hard to predict since everyone kind of does their own html structure but I think if I could copy in native sass sytax that would be awesome!

              • 4. Re: CSS Preprocessors?
                iamdannywilson Level 1

                Hi Justin,


                It definitely wouldn't be a non-starter! I just tend to use my own because the off the shelf solutions are a little more than I tend to need, most of the ones in my lib are from LESS Elements, with a few bootstrap mixins chucked in for the grid system. If there was a standard library used that would be a good start, just don't know what the best to go for would be, as you mentioned there's no "standard" library really.

                I've played around with SASS->Compass before and seems fairly robust, I know a lot of other devs that use it heavily so that might be a better place to start?



                • 5. Re: CSS Preprocessors?
                  Jordan4jc Level 1

                  I think unfortunately they will have to go with a very specific solution to be as widely compatible, however, an idea is for them to maybe come up with their own and it minimal based on what they find people use the most.


                  Another thought which would be a lot of setup by the end user is the ability to override certain css blocks or rules, and even the way it does vendor prefixing with our own custom mixins, and then whenever it sees that combo again it will reference out custom entered mixin instead of their determined css or sass (if they go with a preprocessor)

                  • 6. Re: CSS Preprocessors?
                    brucebowman Employee Moderator

                    Hey everyone,


                    Here's an image showing how we think this could work. In this example, an layer in the PSD that has a gradient fill is selected, and the CSS Inspector is showing the CSS for the gradient. Then, changing the CSS Inspector to show SCSS.


                    Let us know what you think.





                    css preprocessor mockup.png

                    • 7. Re: CSS Preprocessors?
                      Jordan4jc Level 1

                      That's exactly how I imagined it as well, I think that is a logical user flow. I hope compass makes an appearance! Keep up the great work guys!

                      • 8. Re: CSS Preprocessors?

                        I use CSS-On-Diet preprocessor. It's fast to write and modify CSS. And you don't need learn much to use it.

                        • 9. Re: CSS Preprocessors?
                          brucebowman Employee Moderator

                          Hi Danny - LESS + Hat is now supported in Parfait. Choose it from the CSS menu above the CSS Inspector.


                          Please give us feedback on how it works for you.




                          • 10. Re: CSS Preprocessors?
                            iamdannywilson Level 1

                            Hi Bruce,


                            I'll have a look at that later on this week and make sure to provide some feedback, just taken a look and the switch between CSS/SCSS/LESS is simple and clean so think that works well just not had a chance to test out how it works yet!


                            Thanks for the update.



                            • 11. Re: CSS Preprocessors?
                              Igor Pisorev

                              It would be great to add support Stylus like:

                              height 50px  width 40px

                              without the colons and semicolons

                              • 12. Re: CSS Preprocessors?
                                brucebowman Employee Moderator

                                Thanks Igor. This is not the first request we've gotten for Stylus, and we're considering adding it too.



                                • 13. Re: CSS Preprocessors?

                                  +1 for SCSS + Compass...  Seems to be a pretty popular preprocessor...