Parse error: failed at "&:extend(.clearfix all);

1

I am new here and am trying to get my head around using less and grunt in one fowl swoop. I stumbled upon Roots and decided I wanted to give it a go. I normally just manually code my Wordpress themes the “traditional” way, using Bootstrap. Everything is going fine until I tried to get Live Reloading working. I’m on a Mac so I figured I needed to buy and install this, which I have done: http://livereload.com/

My Problem

ParseError: Syntax Error on line 643 in ../assets/less/bootstrap/mixins.less:643:25
642   padding-right: (@grid-gutter-width / 2);
643   &:extend(.clearfix all);
644 }

I get that error when I make an edit to one of my less files. I think it’s related to Bootstrap 3 and I have read about how I need to use a php version of less. But as you can imagine, being new to less I have no idea how to go about fixing this. Without Live Reloading using less is going to be painful and I will have to resort to doing things the old way in pure css. Help.

2

Looks like that app uses an older version of LESS that’s not compatible with newer features used in BS3. You should give Grunt another go! The Gruntfile in Roots already comes with a LiveReload task, you just need to change false to true in the task: https://github.com/roots/roots/blob/master/Gruntfile.js#L86

3

Still no success.

  • What I did this morning was, reinstall Grunt globally sudo npm install -g grunt-cli
  • Dropped a new instance of Roots into my theme folder and ran npm install from that new directory
  • Edited the Gruntfile and set livereload to true
  • Made sure my LiveReload server was running and watching for changes

Then when I edit any of my files it pops up this error dialogue:

Surely I can’t be the first to encounter this? Would buying and watching the How Roots Uses Grunt screencast be worthwhile for me solving this issue?

This looks like the same problem I’m having…

4

Grunt is the LiveReload server. The browser plugin is the client. You don’t need to have the server from livereload.com running at all.

5

When I close the LiveReload application, nothing happens, no errors or changes in the browser when I edit a Less file. Perhaps my problem is with the browser plugin, I’m using Chrome. A bit frustrating, I was really looking forward to using Roots & Grunt.

6

Open a terminal, cd to your app’s directory and run: grunt watch
LiveReload should now work every time the LESS recompiles.

1 Like
7

That did the trick, thanks.

8

@Foxaii, is this command something you have to do each time or do you just have to run it once? Sorry I’m a newb… When you say cd to your apps dir, app being literally LiveReload, or the theme folder? In both cases I got fatal errors. Thanks, Marc

9

I cd’d to my theme folder @Marc and ran grunt watch

10

Hmm so weird, I get this error:

Waiting...Fatal error: Port 35729 is already in use by another process.

I cd’d to the theme folder (i.e. Roots theme)

11

Start fresh, quit everything and restart. Open terminal and cd to your roots theme folder. Type grunt into the terminal and make sure Grunt is working, then type grunt watch. If it tells you that it’s running the watch task and it’s waiting OK, then go and make an edit to one of your LESS files, save it and you should see activity in the terminal. You might have to still refresh your browser but the changes will be ready for it to display.