16

SASS, HAML, and ... ?

6 years ago from , Position @ Company

I work primarily in Bootstrap, WP, and Shopify, and don't touch anything beyond HTML / CSS / jQuery (no custom JS or app dev or anything like that)

I've recently begun learning SASS and HAML (with CodeKit) to help clean up / streamline my development process, but I'm wondering what other languages / shortcuts / frameworks people use to expedite / simplify those processes

37 comments

  • Santiago BaigorriaSantiago Baigorria, 6 years ago

    Both are fine. For SASS, I'd suggest using Bourbon, the best mixin library out there. For JS, (I don't use it), but I know you can use CoffeeScript for example, but since you don't do much custom JS, kind of my case, I don't see the point, and that's why I don't use it.

    8 points
    • Wil NicholsWil Nichols, 6 years ago (edited 6 years ago )

      Bourbon is killer. And *trawling codepen for mixins

      5 points
    • Ian WilliamsIan Williams, 6 years ago

      I used to use mixins for this kind of stuff, but then I started using Autoprefixer instead. Then your mixins are reserved for capturing repeated style.

      4 points
      • Wil NicholsWil Nichols, 6 years ago

        I use Bourbon for most prefixing, custom mixins for breakpoint-dependent styles, hidpi assets, etc. Have yet to see a postCSS hidpi method

        0 points
      • Alex ChanAlex Chan, 6 years ago

        Yep, with autoprefixer you never need to worry about prefixes. You can even set it to prefix for certain browser compatibility.

        0 points
    • Dan DiGangiDan DiGangi, 6 years ago

      +1 on Bourbon or even Compass. I'm not a huge fan of CoffeeScript anymore with ES6 coming to fruition (especially with the ability to transform/translate it back to ES5 spec).

      0 points
    • Chris ColemanChris Coleman, 6 years ago

      Bourbon was great three years ago. These day, it's silly if all you need is vendor prefixes. You should be using a workflow that includes autoprefixer. Your end result will be better.

      2 points
      • Santiago BaigorriaSantiago Baigorria, 6 years ago

        You know, Never thought of it that way, and it makes total sense. Will give autoprefixer a shot. As soon as it came out, I thought it was awful. Plus I loved Bourbon and it's clean @keyframes mixins for instance.

        0 points
  • Dan DiGangiDan DiGangi, 6 years ago

    You should check out Gulp (or Grunt) for building your assets. They are essential in my workflow now when developing.

    I also would check out Bourbon, Compass, Autoprefixer, Suzy, and LiveReload to name a few.

    5 points
    • Nathan HueningNathan Huening, 6 years ago (edited 6 years ago )

      OP already uses Codekit, which essentially obviates the need for Gulp/Grunt, Autoprefixer, and LiveReload.

      0 points
      • Alex ChanAlex Chan, 6 years ago

        Not if you want to do more advanced tasks.

        1 point
      • Rick LanceeRick Lancee, 6 years ago

        if your dev process is "simple"like the OP mentions yeah it's fine, but when you work with more team members or need some more custom stuff gulp (or webpack in my case) really becomes a necessity.

        0 points
      • Sander VisserSander Visser, 6 years ago

        And, for me at least, Gulp is a lot faster in compiling SASS and JS than Codekit.

        0 points
    • Bryce York, 6 years ago

      I can't imagine OP is going to go beyond Codekit in the near future given their JS work hasn't extended beyond jQuery.

      0 points
      • Dan DiGangiDan DiGangi, 6 years ago

        Looking back this post, I'd have to agree with the above. Most of what I had mentioned as well as others is far beyond the junior developer who is creating hero sliders with jQuery. Lol

        1 point
  • Carolann Merchant, 6 years ago

    If you were highly recommend https://middlemanapp.com for making static websites, blogs, etc. Easy to use for beginners or pro's.

    3 points
  • Kyle CesmatKyle Cesmat, 6 years ago

    To compliment everyone whose already said it, learning grunt/gulp is a huge advantage to speeding up your development process.

    I would encourage you to distance yourself from Codekit as a tool. I've worked on codebases that depend on codekit too much for their build process, and using a more modular toolkit like gulp helps to future-proof projects.

    The other area you might be able to streamline is your dev environment. I used mamp for the longest time, but recently switched to a vagrant configuration. Makes my life so much easier to develop on, and my projects a little more configurable. (ability to spin up an nginx or apache config separately). Perhaps start with Scotch.io's 'Scotchbox' - great way to get a WP environment up and running.

    2 points
    • Guy MeyerGuy Meyer, 6 years ago

      "I've worked on codebases that depend on codekit too much for their build process"

      Could you elaborate on that please?

      0 points
      • Kyle CesmatKyle Cesmat, 6 years ago

        Sure!

        I was given the task at a previous job of reorganizing a quite large project's stylesheets and compiling an updated styleguide, basically optimizing and giving it a small facelift. I learned quickly that the previous design team had configured codekit 1.x to watch/compile/etc our ~250 sass partials. The reason they used it was because they didn't know much about the command line, build processes, etc, just that they needed their sass compiled to css in an easy way. So they built the platform for ~2 years using Codekit. Codekit 1.x unfortunately at the time was becoming unsupported and did not provide an upgrade path to 2.0, you'd have to re-configure your project to use it. No way to export your includes or dependancies. So essentially, due to the disorganized and monolythic scale of the frontend, moving those stylesheets into a modular process like grunt or gulp was not easy.

        To be fair, it wasn't the tools fault as much as the nature of letting codebases become disorganized. But to be so heavily coupled to a tool managed by one person (who BTW is a fantastic developer and has created a great tool!) for a project as large as the one I was working on (popular .com site, ~5m users, 15-20 person technical team) isn't the best way to go.

        Which is why, I recommend to take some time and learn grunt/gulp/cli tools rather than using codekit/cactus/gui tools - because the extensibility, modularity, portability, and just overall ease of reconfiguration is such an upside to the rigid/proprietary nature of gui tools.

        5 points
  • Weston VierreggerWeston Vierregger, 6 years ago

    I use Jade, Stylus and Coffeescript -- no reason other than I think they're pretty. :)

    2 points
    • Julian LloydJulian Lloyd, 6 years ago

      Some old colleagues of mine turned me onto Jade and Stylus, but there’s something about Coffeescript that doesn’t hook me. I tried it years ago before dot chaining was supported, so I lost interest... and just haven’t found any again.

      0 points
  • Leo Succar-FerréLeo Succar-Ferré, 6 years ago

    Learned through Bootstrap 4 that Bootstrap 5 will most likely use something like PostCSS - some pretty neat, future-leaning concepts there.

    PostCSS can do the same work as preprocessors like Sass, Less, and Stylus. But PostCSS is modular, 3-30 times faster, and much more powerful.

    2 points
  • Drew AlbinsonDrew Albinson, 6 years ago

    Beyond what you've got there, I've been using Grunt and Jekyll to automate more of my development process. There are dozens of great articles on how to incorporate those into your current workflow, and the learning curve isn't that large.

    2 points
  • Gonçalo MoraisGonçalo Morais, 6 years ago

    *Sass

    1 point
  • Stefano TirloniStefano Tirloni, 6 years ago

    Jade + stylus + coffee —> the best combo

    0 points
  • Jason CJason C, 6 years ago (edited 6 years ago )

    Since no one has focused on the fact that one of your primary frameworks is WordPress, I highly recommend the Roots stack. I wrote a bit about how it helps me over here, but it basically gives you gulp, sass, bootstrap, and development and deployment options for WordPress development.

    Aside from that, haml is for ruby, so I'm not sure how that fits into your stack, but I'd encourage you to learn slim over haml if you're looking for html templating.

    0 points
  • Rick LanceeRick Lancee, 6 years ago

    Just a opinion: i really hate HAML it really makes me think of coffee script; yeah your html is a bit smaller, but it really becomes hard to read and maintain.

    0 points
    • Alec LomasAlec Lomas, 6 years ago

      Jade is much better for readability. Though my past two sites I've just used vanilla HTML... I do really miss mixins and includes.

      0 points
  • Daryl GinnDaryl Ginn, 6 years ago (edited 6 years ago )

    React/Deku, CSSNext, Webpack/Gulp, Babel.

    That's my workflow.

    0 points
  • Erik BeesonErik Beeson, 6 years ago

    Don't bother with CoffeeScript. Five years ago it was a decent bandaid for some things in JavaScript that were harder than necessary.

    Nowadays, if you want to get started with JavaScript, start with ES6, the latest standard that can automatically be backported to work in environments that don't support it yet. If you want to get a bit more fringe, check out TypeScript and/or Elm.

    As others have said, I prefer Jade, but it's pretty similar to HAML.

    As far as JavaScript libraries, there's so many that it's hard to generally recommend any in particular beyond maybe lodash as a good general purpose library.

    0 points
  • Max SchultzMax Schultz, 6 years ago

    Maybe not exactly what you're looking for but I spent some time a few years back learning a lot about front-end performance optimization. In a nutshell, making your projects load as fast and as beautifully as possible. Here's a nice place to start: http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/

    0 points
  • Sherizan SheikhSherizan Sheikh, 6 years ago (edited 6 years ago )

    Gulp (from experience it compiles faster) Imagemin - optimises images Autoprefixer - fixes cross browser prefixers BrowserSync - Works extremely well if you design for mobile and auto refresh helps If you are working mostly with Wordpress, you should definitely try Roots.io as they use Bootstrap as the starter theme. And go with Capistrano for one-line deployment.

    0 points
  • Amazing RandoAmazing Rando, 6 years ago

    Grunt (and Gulp) can make your workflow magic.

    0 points
  • Paul KinchlaPaul Kinchla, 6 years ago

    Grunt and SASS for front end tooling. Gridset for grids. _s as wordpress starter theme. I worked with HAML on a rails project awhile ago and didn't get the point. It seemed masochistic TBH.

    0 points