3 Replies Latest reply: Nov 7, 2014 1:11 PM by charlesschutz RSS

    Working with LESS in Dreamweaver 2014

    charlesschutz Community Member
    charlesschutz Nov 7, 2014 5:02 AM

      Can anyone point me to information on how LESS files are supported in Dreamweaver 2014. Specifically how to edit .less files and save them to be used within the site.

      Thanks!

        • 1. Re: Working with LESS in Dreamweaver 2014
          Herbert2001 Community Member
          Herbert2001 Nov 7, 2014 11:02 AM (in response to charlesschutz)

          less and Sass files are supported in DW, but they will not compile through DW (you need a preprocessor like Prepros, or Ruby/Sass, etc. for that).

           

          There is a handy extension that extends DW's Less options: http://www.dmxzone.com/go/21528/dmxzone-less-css-compiler/

          • 2. Re: Working with LESS in Dreamweaver 2014
            charlesschutz Community Member
            charlesschutz Nov 7, 2014 11:18 AM (in response to Herbert2001)

            Thanks for the URL. I installed dmxzone's free tool but both it and Prepros fail to produce changes to the CSS files, minified or otherwise when I tested .less files by inserting a comment in the .less file, running the compilers and viewing the targeted .css files. This result prompted by query about how .less files work in Dreamweaver. Your comment is correct, both file types are visible but I can't find much discussion of how LESS and Dreamweaver in Adobe's documentation.  Chuck Schutz

            • 3. Re: Working with LESS in Dreamweaver 2014
              Herbert2001 Community Member
              Herbert2001 Nov 7, 2014 11:56 AM (in response to charlesschutz)

              The way it works is that a Less or Sass file will be 'watched' by a preprocessor tool like Prepros, Koala, etc., or Ruby/sass (command line watch statement) - when you save the less/Sass file in Dreamweaver or another IDE/editor, those 'watchers' will then sense the change in the saved version, and automatically convert to a new css version in your css folder.

               

              Of course, you must set up the required tools correctly before it works. Prepros also supports a live realtime update of your browser preview after processing a less/sass file, which is very handy, and saves you time.

               

              Also, make sure source maps are generated so you can use the browser inspector in Chrome and Firefox to make directed changes in your scss/less files.

              Using source maps with Sass 3.3

               

              The reason you do not see much of a documented workflow from Adobe is because the less/sass workflow is described on the sass/less websites - it is an external process to DW. The process is identical for almost any editor/IDE ...and there are so many less and Sass tutorials out there as well.

               

              Some IDEs support less and Sass compilation from within the project, such as NetBeans.

               

              Btw, any reason why you decided to work with Less instead of Sass? Sass is arguably a better choice.

              • 4. Re: Working with LESS in Dreamweaver 2014
                charlesschutz Community Member
                charlesschutz Nov 7, 2014 1:11 PM (in response to Herbert2001)

                Thanks for such a complete reply. I appreciate your time!

                 

                I'm using Less because it's part of the template the team chose for the project we're all working on. Otherwise it would have been Sass. I've likely not setup the right environment for using the compilers since both failed to change their css targets. Thanks again!