If you aren't yet comfortable with using the command line for every day development, you can use CodeKit (Mac) or Prepros (Win). They each cost around $30, but are worth it. They do more than just compile sass to css. They can include libraries (Jquery etc) into your workflow, and generally save you time.
Personally, I use Grunt(and Gulp) when I'm not working on a Rails app (asset compilation is built-in), but those stand-alone apps are a good way to get used to the new ways of front-end dev.
I'm pretty sure I'm in the minority here but I'm a measly freelancer working from home with Windows without any of the "fancy" stuff. I'm using Prepros and it couldn't be much simpler. I use Sublime for editing and when I save a scss file it autocompiles all the scss to css that I have in the project.
I am also fairly new front-end developer and started using jade for about three weeks ago, and I LOVE it! I would really recomend it if you want to try something new, speed up your HTML coding and make it alot easier to read. I watched "DevTips" video on what Jade is and how to get started. (https://www.youtube.com/watch?v=wzAWI9h3q18). If you are using Windows I can recommend "Prepros" for compiling the jade file. (https://prepros.io/)
I love using PrePros, and it comes with an automatic FTP upload feature, add well as auto-SASS compiler, CSS and JS minification, and so much more. The free version of it has a pop-up that happens every 2 minutes, but it has every feature of the paid version. It's seriously easy to use, and you don't need to mess with any command line crap. The used to be a time when web development was simple, and an art, but now it's getting to be that you have to have double as a system administrator just to make your code work. PrePros helps bring that back to a simpler state.
Stick to as basic of an editor as possible, don't get an IDE or anything that will autocomplete. Syntax highlighting and indentations are as high tech as you want to get else you won't learn the language. Personally I use Notepad++ on Windows for my php/html/css etc. Check out TextWrangler for OSX. I'd also recommend grabbing https://prepros.io Its a SASS/LESS compiler, but for your purpose, it also monitors html & css files and will autorefresh your browser when anything changes.
Try Prepros - it have infinite trial and sometimes offer to buy itself like Sublime. You add project in Prepros, press 'Preview' -> 'Open live preview' and it updates page automatically every time when you save any file from project.
The local development and git don't need to be used in conjunction.
Git can reduce frustration when learning new things by allowing you to back out of broken code easily. Or said another way, git (or any other version control system) allows you to see what changes have been made since you last committed. Problem solving is often done by breaking down things into small chunks and solving them one piece at a time. By committing small changes that work, you can guarantee that you always have a working version and you can revert (or save changes for later - see stashes) to pivot to some other problem. I believe codeschool.com has a free git video course that is excellent.
Local development simply facilitates faster development. Context switching (in this case, moving from one program to another to verify results, uploading files, refreshing browsers) slows you down and distracts you from your goal (eg. learning or actually getting work done). For example, when I'm developing UI locally, I can have two windows open, one to code CSS and another to see the css changes automatically take place in the second browser without switching windows. Remove the barriers to getting your work done - uploading files, refreshing browsers - and you'll be much happier. An excellent tool to introduce you to the power of things like "watch mode" for development, or using CSS preprocessors is an application like CodeKit (https://incident57.com/codekit/) for OSX. It compiles stuff, refreshes the browsers, and does a few other cool things.
edit: sorry, forgot you use windows. Here is something comparable, although I haven't used it: https://prepros.io/
Hey, in my humble opinion, you do not need CSS preprocessors. They just make some shit easier. Some agencies require it to maintain assets more easily. Just grow into it.
I was ignoring Sass for a long time. Mostly because using it wasn't really user friendly. Node, gulp etc. Way too much stuff to just jump into, but then I discovered that there are programs that compile it with out the usage of terminal. My favorite being Koala app and Prepros.
I finally purchased prepros this week. although this may not satisfy the cmd setup people out there. It makes setting up new projects in Sass SUPER easy. ALSO LibSass... use libsass over ruby poops.
Just wanted to say, I've been using prepros https://prepros.io/ and am loving it. I use it mainly for sass and haml. I love that I can make a change to an scss file which then can be complied uploaded to a server and the page automatically refreshed in the browser. I think codekit works similarly, but I'm using Windows 8.
Well considering you already have reusable code. There is not many ways to speed this up. I guess you can use for HTML zen coding and for CSS use LESS for a slight boost. Tools like prepros have live reload so when you save a file, the site reloads automatically.
Otherwise I have to say that you sound depressed and overworked so maybe it's time to check out some other options. Just saying. I don't know your circumstances.
I'm not entirely sure about the question, are you referring to the kind of live design feature that Dreamweaver has? where you edit the code visually in the code editor.
Or do you mean something like using things like grunt to have the page live reload when you save your changes in sublime text?
If the second is what you mean (and I hope it is, because the first one isn't going to work for you very well) then I would recommend a program called Prepros. It is kind of like grunt but without all the bells and whistles.You can get a free trial (indefinitely?) or you can buy it for $29.
What it does is essentially you drag or tell it where your root folder is and it live reloads the page every time you save it, and also puts it on a localhost that you can ccess from any device that you own (if you are on the same network of course). This is ideal for testing out php and also works beautifully for SASS and LESS as it compiles them for you, and displays them properly.
I tried to learn that but it was too confusing for me. I ended up downloading the free version of prepros which uses a GUI compiles LESS and SASS automatically.
All you need to do is drag and drop the LESS folder to prepros and edit the output settings and you're good to go.
My work laptop is Windows 10 pro with [https://laragon.org/](Largon), Prepros, Adobe cloud, MS teams and PhpStorm.
My personal setup is Laragon and PhpStorm on a Windows 10 home laptop. I have experimented with WSL2 and docker, but keep getting problems with permissions.
I attended an interesting PHP meetup last year, the talker used a relatively cheap laptop running VS code to connect to a us$10 / month server running VS Code server, he did all the coding on the server. A very interesting concept that worked for him and worked out cheap to run.
Looks like it might be possible to use react in prepros. prepros and babel Personally, I would go with create react app though. Prepros is good if you wanted to make a jquery app or something like that but react has a really good development ecosystem options outside of prepros that a lot of other technologies don’t. I don’t know your requirements though so do what’s right for your use case.
I know you mentioned Koala, but there are a couple other programs similar that will at least get you up and running.
https://prepros.io/ is a free option that is cross platform. It seems to have a more active developer than Koala.
https://codekitapp.com/ is the big dog. Mac only, but the feature set is complete and really easy to extend. Paid only though, but it's cheap at $34.
Others have mentioned and tried to help with the CLI options, so I won't repeat them. I use both Gulp and Codekit in my workflows depending on the project and they both have their PROs and CONs.
Why not use something like Prepros for Windows/Mac/Linux or CodeKit for Mac? Very simple to use without lots of set-up beforehand. Prepros has an unlimited trial with some nagging popups asking you to purchase and Codekit has a free 10 day trial. Prepros costs $29 to buy outright while Codekit costs $34. Both of these programs can handle browserSync, live reload, autoprefixing, minification, precompiling etc, all with a GUI instead of a command line.
With all of that said, I'm not recommending that you never learn Gulp or other taskrunners but for someone starting out these are perfect in my opinion.
If you're in your root dir of your project in powershell and have moved your scss files to another directory just below your root such as a scss dir thats the same level as your css dir, your command should look like
sass --watch --style expanded scss/screen.scss:css/style.css
If you're just looking to learn Sass though and don't feel like mucking around in the command line, something like prepros.io might be useful for you.
Ok I see what your saying, but you don't have to use all the JavaScript components or CSS. You can comment out the mix-ins and js you dont need in the sass/less files and recompile it and your good to go.
I use Prepros to compile my less/sass files its very easy.
cheers
Thanks for the tip - my compile times are around 3 seconds at the moment - I haven't looked into why yet, but libsass doesn't work with my framework. It just doesn't compile. Works perfectly without though. I'm a noob and use Prepros (https://prepros.io/) though - I hate the command line and love GUIs. Perhaps something to do with that.
The big CSS Frameworks, in my opinion, are for developers to add a basic look to their application. Without a framework most developers attempts at design looks horrible. With one it just lacks depth and life, but at least it is functional and doesn't hurt to look at. (I work with a lot of developers as I do frontend design for early stage startups)
I don't feel a CSS framework aside from perhaps a Grid or something should be used in any application with a designer on the team outside of an MVP or something. If your designer is overriding styles from the framework, it's just adding needless overhead and possibly making the implementor's job more difficult.
Frontend duties vary by team. I'm a frontend consultant in the Bay Area and job titles are completely ambiguous. Frontend designers come in all sorts: static designs in adobe/sketch, prototypes in something like webflow, or full working implementable code in html/[le|sc|c]ss. I'd say there's sort of three main duties: design, implementation (css/html), and development (javascript). Often one person on a team is in two of those roles (I personally work in all three). I've never seen anyone who was purely implementation without design abilities, but it's definitely possible. The implementer should be using a pre/post processors, figuring out what frameworks to use, etc., and should adapt the designer's designs, be it a PSD or HTML, into the MVC platform.
SCSS helps with organization and documentation. Since it's all being processed, be as modular as possible. Folders and filenames are documentation in their own way. I use preprocessors and postprocessors on a daily basis. If you're not using a pre/post-processor and you're working on a medium+ project, you should. I ran into this the other day, it might help with the getting started setup: prepos
Plenty of GUI tools that can do a lot of what gulp/grunt do:
It mostly is dependent on what you use in your day to day. Before I got the job I have, I used grunt pretty exclusively, now I use gulp (though... I also heavily prefer gulp after seeing the light :P).
Mixture is a GUI for all that good stuff, rather than running Gulp/Grunt in the Terminal. You could also look at Codekit, Prepros or Koala. They all provide similar functionality. I quite like Mixture as it can run a local dev server for you with live browser sync across all your test devices.
Sass doesn't have to be on the server, it's easiest to just compile all your .scss files locally and upload the final minified production .css file to the server.
Ken Wheeler wrote a pretty good tutorial on it.
https://scotch.io/tutorials/getting-started-with-sass
The easiest route to get started would be probably to use Prepros for compilation.