Sass And Browsersync With Md (Improve Your Dev Speed)

Hey all,

For the last few months I've been using a couple tools that have helped my development on my client projects.

The most notable two are Sass and Browsersync. They are probably the most useful things I've ever come across.

I recorded a quick video to show you how I use it.

Here's the link: https://max-nachamkin.wistia.com/medias/dkie2dngja

For those who are familiar with Node and Gulp, I attached the child theme with my Gulpfile and the SASS template I created for MD so that you can get started in your own child theme. 

For those who aren't familiar with Node and Gulp, here's what you'll want to do to get setup:

1. Install MAMP and get a local dev server up and running. The free version works great.
2. Install Wordpress on the MAMP server you just created.
3. Upload the MD theme & activate the child theme on there.
4. Install Node on your machine. The latest LTS release will work fine.
5. Go to command line and navigate to your MD child theme.
6. Run the command npm install gulp gulp-util gulp-sass gulp-cssbeautify node-neat browser-sync
7. Once everything installs perfectly (which it may not on the first try, you may have to deal with random errors setting everything up and debug as you go), make sure MAMP Apache is set to port 1337 (because you're an elite mofo, don't forget). Restart the MAMP server and get it up and running, pointed to your local WP install.
8. In the command line, under your child theme directory, run gulp watch. Make sure you downloaded my child theme below and have either put those files into your own child theme, or started a new one with that template. This command will automatically launch a browser window with Browsersync activated.
9. Edit your SASS file (style.scss in the scss folder), and save it. Watch the magnificence change real-time in your browser, and on your phone if you point it to that localhost URL. Google Sass tutorials for more about how Sass works.

If anyone's interested in more of a tutorial here, let me know and I'm happy to record something in-depth on how to setup the local server, get node installed, all that jazz.

Anyways, thought I'd share as this has been such a help for me in developing. No more saving/uploading the files to FTP all the time, and SASS + BrowserSync just saves a tremendous amount of time on larger projects.

Cheers,

Max

md-child-theme.zip

 

[Alex]

Damn dude, thanks for posting all of this here, I learned something new. I've never really played with most of these tools despite knowing how cool SASS is. I've stuck with Coda 2 as my text editor since it has the save and upload as you're describing here (live refresh too, but I don't use it), but I remember using Sublime and how awesome of an editor it was. This BrowserSync seems a lot more powerful than what I used to use for the live refresh, CodeKit I think.

I downloaded the child theme and like what I see. I don't really understand the @mixin media queries but I guess you'd set them up that way so you don't have to rewrite the media query declaration? If so, that may be reason enough for me to go over (variables FTFW too) because I always feel like I write too many media queries in my stylesheets!

I definitely wouldn't be opposed to more tutorials on this stuff, you speak clear enough in your videos to keep going hard on them if you wanted.

 

[Max Nachamkin]

My pleasure. 

Yeah, ideally the media queries could be named differently. I was using them at different breakpoints and gave them a name depending on the device that was being used...

For instance, I had a query called "for-phone-only" and one called "for-desktop-only", so that it was simply easier to read in the SASS file. Maybe as I understand the MD breakpoints better I can find better names.

Other than that you'd still have to write the query in the file. I find it easier to do it in SASS and then rewrite the variable if I need to make a change, rather than do search & replace for the whole file. 

The most useful thing in SASS in my opinion is the nesting. Saves me tons of time trying to get things working and keeps the code organized quite nicely. Mixed with BrowserSync I doubt I'll go back to the whole FTP upload thing unless it's for small hot-fixes during production.

Word.