New to Sass (Wordpress theme development). Need help with workflow.
October 9, 2014 8:27 AM Subscribe
New to Sass (Wordpress theme development). What the what? Need help with understanding the workflow.
I am putting together a rather simple wordpress theme, I'm competent with HTML/CSS/PHP enough to be dangerous. I want to use the foundation theme as a good framework to start with, but now am running into the fact that they (and many other base themes I'm finding) use Sass for the stylesheets. Cool, from what I've read it's makes developer's lives easier. But as someone not doing this full-time, this is an added step that has turned into a complete roadblock for me.
I went to Zurb's documentation (http://foundation.zurb.com/docs/sass.html), did all of the steps listed. In all of the technical instructions, the downloading programs, installing through Terminal, I'm having trouble making the connection to what I actually am working on. It all seems abstract, even these programs that I supposedly downloaded (bower, compass, etc.)
I think what I need to know is workflow. I understand how Sass is a preprocessor, spits out an app.css file that is used to style the content. I went through the terminal, entered in everything correctly, got the folder of files on the other end, but....what do I do with them? Which files am I actually working on, what program do I use to compile them?
So in short, I need a very general, beginner overview of how to manipulate these files to serve the same purpose of what would have been working directly in the CSS (which I can do).
Let me know if there's any other information I can provide. Thanks for your help!
I am putting together a rather simple wordpress theme, I'm competent with HTML/CSS/PHP enough to be dangerous. I want to use the foundation theme as a good framework to start with, but now am running into the fact that they (and many other base themes I'm finding) use Sass for the stylesheets. Cool, from what I've read it's makes developer's lives easier. But as someone not doing this full-time, this is an added step that has turned into a complete roadblock for me.
I went to Zurb's documentation (http://foundation.zurb.com/docs/sass.html), did all of the steps listed. In all of the technical instructions, the downloading programs, installing through Terminal, I'm having trouble making the connection to what I actually am working on. It all seems abstract, even these programs that I supposedly downloaded (bower, compass, etc.)
I think what I need to know is workflow. I understand how Sass is a preprocessor, spits out an app.css file that is used to style the content. I went through the terminal, entered in everything correctly, got the folder of files on the other end, but....what do I do with them? Which files am I actually working on, what program do I use to compile them?
So in short, I need a very general, beginner overview of how to manipulate these files to serve the same purpose of what would have been working directly in the CSS (which I can do).
Let me know if there's any other information I can provide. Thanks for your help!
I would start at the sass website language tutorial page, it's a good overview.
I also made a Prezi presentation a few years ago called Sass makes CSS less sucky, which may (or may not) include some quick tidbits that would help you.
First thing to know about Sass is you should immediately stop ever working directly in the .css file and only work on the .scss file. This is because when you make a change to .scss and process it into .css, if you had any changes just in the .css file you lose them.
From the command-line, the most important tool I use is sass --watch some_dir, which will monitor changes in .scss files in that directory and immediately create the .css files when they happen. This saves a lot of time.
posted by mcstayinskool at 8:57 AM on October 9, 2014 [1 favorite]
I also made a Prezi presentation a few years ago called Sass makes CSS less sucky, which may (or may not) include some quick tidbits that would help you.
First thing to know about Sass is you should immediately stop ever working directly in the .css file and only work on the .scss file. This is because when you make a change to .scss and process it into .css, if you had any changes just in the .css file you lose them.
From the command-line, the most important tool I use is sass --watch some_dir, which will monitor changes in .scss files in that directory and immediately create the .css files when they happen. This saves a lot of time.
posted by mcstayinskool at 8:57 AM on October 9, 2014 [1 favorite]
Unless you want to learn SASS or want to be able to use some of the neat things it can do, you could just modify the .css file that was spit out and continue as normal. If you do want to work with SASS, look into Scout. That way you don't need to use the command line or install Ruby.
posted by FreezBoy at 9:28 AM on October 9, 2014 [1 favorite]
posted by FreezBoy at 9:28 AM on October 9, 2014 [1 favorite]
You can totally use Foundation without SASS. I've used it at work for the last couple of years and am only just now getting into SASS.
If you have your heart set on using SASS (which is really cool once you get it up and running) you can use a build system like Gulp to compile your scss edits and reload your browsers, which makes the workflow pretty much the same as what you're used to with css. It's pretty slick.
posted by smartyboots at 11:24 AM on October 9, 2014 [1 favorite]
If you have your heart set on using SASS (which is really cool once you get it up and running) you can use a build system like Gulp to compile your scss edits and reload your browsers, which makes the workflow pretty much the same as what you're used to with css. It's pretty slick.
posted by smartyboots at 11:24 AM on October 9, 2014 [1 favorite]
+1 for CodeKit if you're on a Mac.
Basically, you tell CodeKit 'watch this .scss file for changes'. When you edit that file, it compiles it to a .css file. That's it. It is REALLY SIMPLE to use and you don't have to fuck around in the command line, you just write supercharged CSS that lets you name colors and nest class definitions and stuff.
Foundation is a web framework - basically it provides a bunch of pre-made classes and structures for you to build on top of. You don't need to use it, or any other framework to start writing/modifying stuff in Sass. Unless the theme you're modifying is built on top of Foundation, which of course it is.
(If you're on Windows, a quick survey of the google results for 'codekit for windows' looks like Prepros is the tool everyone loves. CodeKit can handle using frameworks like Foundation, I don't know if Prepros can)
posted by egypturnash at 1:26 PM on October 9, 2014 [2 favorites]
Basically, you tell CodeKit 'watch this .scss file for changes'. When you edit that file, it compiles it to a .css file. That's it. It is REALLY SIMPLE to use and you don't have to fuck around in the command line, you just write supercharged CSS that lets you name colors and nest class definitions and stuff.
Foundation is a web framework - basically it provides a bunch of pre-made classes and structures for you to build on top of. You don't need to use it, or any other framework to start writing/modifying stuff in Sass. Unless the theme you're modifying is built on top of Foundation, which of course it is.
(If you're on Windows, a quick survey of the google results for 'codekit for windows' looks like Prepros is the tool everyone loves. CodeKit can handle using frameworks like Foundation, I don't know if Prepros can)
posted by egypturnash at 1:26 PM on October 9, 2014 [2 favorites]
SASS made coding fun again for me; but to be honest, I let compass do all the heavy lifting:
http://compass.kkbox.com/
Here's an overview of how this might work fit into your workflow (assuming you have already installed Compass, sounds like you have):
- Get your project files set up in some dev folder on your machine
- Set up your child theme files in the appropriate folder in your project files (/wp-content/themes/child-theme)
- Click on the Compass icon in your system tray and select "Watch a Folder...", then browse to the folder where your project's child theme files are located
- Open your theme's SCSS files, make an edit; Compass should compile the change into the CSS for you; to test it out, FTP or deploy (or whatever you typically do) to your server and see if the change was made.
Compass has pretty good error reporting, too, if your syntax isn't quite right. Really, the biggest hurdle is learning the SASS syntax, and adjusting to writing sweet, sweet mixins and variables. I learned a lot from looking at some of the sample code on the Compass documentation site, too.
posted by missmobtown at 8:41 AM on October 10, 2014 [1 favorite]
http://compass.kkbox.com/
Here's an overview of how this might work fit into your workflow (assuming you have already installed Compass, sounds like you have):
- Get your project files set up in some dev folder on your machine
- Set up your child theme files in the appropriate folder in your project files (/wp-content/themes/child-theme)
- Click on the Compass icon in your system tray and select "Watch a Folder...", then browse to the folder where your project's child theme files are located
- Open your theme's SCSS files, make an edit; Compass should compile the change into the CSS for you; to test it out, FTP or deploy (or whatever you typically do) to your server and see if the change was made.
Compass has pretty good error reporting, too, if your syntax isn't quite right. Really, the biggest hurdle is learning the SASS syntax, and adjusting to writing sweet, sweet mixins and variables. I learned a lot from looking at some of the sample code on the Compass documentation site, too.
posted by missmobtown at 8:41 AM on October 10, 2014 [1 favorite]
« Older How do you respond to "You're too expensive?" | Help me find my holy grail of travel coffee mugs Newer »
This thread is closed to new comments.
As for editing and development, you're going to be writing in the SASS/SCSS syntax—and then CodeKit will crank out css for you. I'd head over to sass-lang.com and poke around there to see what power lurks within SASS. Hope this helps. Feel free to mefimail me if you need more help. Good luck! SASS is really good stuff.
posted by littlerobothead at 8:55 AM on October 9, 2014 [1 favorite]