Skip to main content
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
September 7, 2015
Question

FYI: LESS AutoCompile in Brackets

  • September 7, 2015
  • 6 replies
  • 9245 views

I just installed this free extension for Brackets that auto compiles CSS when you save the LESS file. 

It contains options for compiling to a separate file, compressing CSS, supressing, etc...

This is great!!

jdiehl/brackets-less-autocompile · GitHub

Nancy O.

This topic has been closed for replies.

6 replies

sinious
sinious
Legend
December 3, 2016

I think it's time to take a look back at DW again.. Thanks for the heads up Nancy!

edit:

While at first glance I don't think it's going to work for my needs, I'll give it a try. For example, one Wordpress MU I have set up has tons of themes. Right now with Koala I can set up each theme's separate SASS folder as a separate watch folder with it's own config. I defined a new site pointing toward the entire WPMS site (that's how I work on themes in Brackets, just files/folders). Now I only appear to have a single source and destination config for the entire WPMS and all themes.

In other words, it looks like it wants me to define a new site for each theme so I can get per-theme source/destination SASS mappings. Since I often use parent/child themes, I often need to access other themes files.

Is there a config I'm missing that'd let me separate the SASS source/destinations? Perhaps a header declaration that tells DW how to map it. That or I need to head over to the feature recommendation page

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertAuthor
Community Expert
December 3, 2016

Help > Submit Bug/Feature Request

Nancy O'Shea— Product User & Community Expert
sinious
sinious
Legend
November 30, 2016

I enjoyed that LESS autocompile for quite a while although I switched to SASS and really enjoy multiple configurations on watch folders. Is anyone using any SASS extensions along those lines?

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertAuthor
Community Expert
November 30, 2016

Now that Brackets & CSS Pre-processing is integrated into DW, I'm using CC 2017 now. I haven't looked at Brackets in a quite a while.

Nancy O'Shea— Product User & Community Expert
    Chirag Bhansali
    Chirag Bhansali
    Participant
    November 23, 2016

    Please tell how to compile LESS into CSS by Brackets. I've already downloaded the respective extension.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertAuthor
    Community Expert
    November 23, 2016

    Read the Compile Options below and set as required in your .less files

    Save your .less file. 

    GitHub - jdiehl/brackets-less-autocompile: Automatic compilation of LESS files for Brackets

    Nancy

    Nancy O'Shea— Product User & Community Expert
    Herbert2001
    Herbert2001
    Inspiring
    September 24, 2015

    Did you know Brackets is the built-in editor in Intel's XDK html5/css/js app development kit as well? I think it is a pretty good editor, but the instant my projects grow larger in scope, I find it a bit unwieldy, and I switch to Netbeans IDE (which has built-in SASS and LESS compilation anyway).

    The split windows in Brackets work well with a couple of documents, but I agree with Sinious: I also open a lot of files simultaneously, and Brackets starts to slow down my workflow at that point. Then again, it is a bit unfair to compare it to a full-fledged IDE, of course.

    Anyway, if anyone is interested in building apps out of their web apps, and enjoy Brackets, Intel XDK provides a very familiar environment. I love the live app preview, and the device preview which is automatically updated when changes are saved (meaning: while you work, you see the changes reflected on your actual device! Very handy!).

      sinious
      sinious
      Legend
      September 25, 2015

      Herbert2001 ~ First time I've heard of Intel XDK. I see that it uses Apache Cordova like Phonegap but also comes with some built-ins like game management systems. I'm just curious, have you tried Phonegap? It seems to me on the outer surface basically a Phonegap + game engine. In that case I'd wonder if I were just making an app, if the game portions were optional. I'm trying to discern what the merits/differences between IXDK and Phonegap + [any game engine].

      First thing that I wondered was is it a NodeJS powered system with something like gulp running (instantly update a browser when you save a file) like you were mentioning on the live preview. Sure enough it states in details "Built on Web technologies HTML, CSS, JavaScript*, and Node-Webkit back-end". That's one of my favorite uses of Node overall.

      Thanks for sharing

      Herbert2001
      Herbert2001
      Inspiring
      September 25, 2015

      Yes, I have worked with Phonegap as well, and built one or two apps with it over a year ago. For the last three~four years now I have been investigating and working with various platforms to convert html5 apps and games I created/am creating to mobile apps.

      Currently, I prefer XDK because:

      - the workflow is just... great! It provides an efficient integrated dev environment. Project management is very simple in XDK. After having worked with the CLI for many months, XDK's test and preview options, and click: build workflow is a bit of an eye-opener. Mind, I am used to the CLI, but XDK lets me focus on the html5 based app development, and spend less time fixing things in the CLI. It's actually fun working in XDK. I also have Netbeans running side by side for more complex projects.

      - USB debugger which requires no internet connection. It supports third party Cordova plugins as well. Break points and profiling included.

      - there are no limitations compared to Phonegap in terms of automated online building. With PhoneGap the free version is very limited. I also work with students, and this is an important aspect to me. Not everyone has a CC account.

      - PhoneGap requires configuring things, while XDK is a simple one-time installation, and off you go. It just works. Also handy in a class environment where the machines' disk images are reset every single class the next day.

      - the integration of Brackets is very nice. It is a good code editor.

      - live views in Chrome and Firefox without the need to save is very nice to have for the initial stages of development . The live preview on my Android devices required no configuration - again, it just works (through USB). The running app on my device is automatically updated after a code change and a save.

      - packaged web apps without Cordova can be built as well. Based on my last experience with PhoneGap, XDK seems to provide more build targets.

      - aside from my daily programming, I use Construct 2 to work on small games - Construct exports directly to a Crosswalk based project which is then imported in XDK. Simple and fast. (PhoneGap supports this since last July, I believe, as well - have not tested it with Construct, though).

      - profiler for Android devices. I find this quite handy to check memory consumption, etc. Again, a simple tab in the XDK environment.

      One drawback is the reliance on an external server to build the apps. I also have Apache Cordova installed for local building (which I prefer over the proprietary Adobe PhoneGap).

      Anyway, this is my experience.

      sinious
      sinious
      Legend
      September 7, 2015

      Thanks for that tip on the extension! I'm swimming in editors so I haven't given Brackets it's due time but any time automation comes up, I'm in!

      O
      osgood_
      Legend
      September 7, 2015

      Nancy O. wrote:

      I just installed this free extension for Brackets that auto compiles CSS when you save the LESS file.

      It contains options for compiling to a separate file, compressing CSS, supressing, etc...

      This is great!!

      jdiehl/brackets-less-autocompile · GitHub

      Nancy O.

      Yeah I been using it for a couple of weeks or more probably, time flies, as I test out brackets. Not going to use it in my mainwork flow for reasons you know but that doesnt detract from it's pretty cool for those that want to go down that route.

      You can access it and install it directly from within brackets - click on the second icon down on the right and then type in 'less'

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity ExpertAuthor
      Community Expert
      September 7, 2015

      Cool & fast.  Saved changes to the Less, / mixins / variables comes up instantly.

      In terms of speed, Bootstrap's code editing really is awesome.  I don't know why I haven't been using it more.

      Nancy O.

      Nancy O'Shea— Product User & Community Expert
      O
      osgood_
      Legend
      September 7, 2015

      Nancy O. wrote:

      Cool & fast.  Saved changes to the Less, / mixins / variables comes up instantly.

      In terms of speed, Bootstrap's code editing really is awesome.  I don't know why I haven't been using it more.

      Nancy O.

      Strangely it's now lost its ability to compile to the css file - just stopped working..... hummmmm. Was ok. I may have to completely unistall Brackets and reinstall a fresh version. I'll look at it tomorrow.

      Ok well that extension is obviously a bit unreliable. I've dumped the site folder in 'Prepros' which seems a bit more robust and compiles the css from within Brackets, rather than go through a re-install of Brackets. No idea what happened one minute it worked the next it didn't, maybe a js file got corrupted or something

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices