{"id":16991,"date":"2012-05-13T09:49:39","date_gmt":"2012-05-13T16:49:39","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=16991"},"modified":"2015-02-25T20:11:53","modified_gmt":"2015-02-26T03:11:53","slug":"111-get-yourself-preprocessing-in-just-a-few-minutes","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/111-get-yourself-preprocessing-in-just-a-few-minutes\/","title":{"rendered":"#111: Get Yourself Preprocessing in Just a Few Minutes"},"content":{"rendered":"
There is nothing to be afraid about in this brave new world of preprocessing. Native apps make it so easy that it should be a vital part of any modern workflow. In this video we have a simple project in which we use Jade and Sass on. We use CodeKit to watch the project, which not only makes the preprocessing trivially easy, but helps in more ways like refreshing the browser, injecting styles, and optimizing images.<\/p>\n
Links from the video:<\/strong><\/p>\n There is nothing to be afraid about in this brave new world of preprocessing. Native apps make it so easy that it should be a vital part of any modern workflow. In this video we have a simple project in which we use Jade and Sass on. We use CodeKit to watch the project, which […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":15539,"url":"https:\/\/css-tricks.com\/video-screencasts\/107-livereload\/","url_meta":{"origin":16991,"position":0},"title":"#107: LiveReload, a Menu Bar App for Preprocessors and Speedy Development","date":"December 14, 2011","format":false,"excerpt":"LiveReload is a Mac-only menu bar app that is quite helpful for web developers. Just tell it to watch a specific folder, and when a file is saved, the browser will automatically refresh showing the change. So no need to switch applications and manually refresh, which is awkward and prone\u2026","rel":"","context":"With 27 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":157918,"url":"https:\/\/css-tricks.com\/video-screencasts\/130-first-moments-grunt\/","url_meta":{"origin":16991,"position":1},"title":"#130: First Moments with Grunt","date":"December 10, 2013","format":false,"excerpt":"There are all these tasks that we need to do as front end developers. Concatenate and compress our files. Run our preprocessors. Optimize images. Run tests. The list goes on and on. Using different tools for all of them is getting increasingly difficult. Running them manually makes it worse, and\u2026","rel":"","context":"With 63 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20051,"url":"https:\/\/css-tricks.com\/lodge\/artists-website\/010-codekit-for-great-success\/","url_meta":{"origin":16991,"position":2},"title":"#010 – CodeKit For Great Success","date":"January 30, 2013","format":false,"excerpt":"In this screencast we have CodeKit start watching our project. This makes lots of developer tasks much easier. The first thing we do is us it to losslessly optimize an image. Easy one click. Then we install Compass in the project. This gives us the ability to use CSS3 mixins\u2026","rel":"","context":"In \"codekit\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":155747,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/29-getting-production-ready\/","url_meta":{"origin":16991,"position":3},"title":"#29: Getting Production Ready","date":"November 12, 2013","format":false,"excerpt":"We're going to bring it back out to a normal text editor in this screencast, just as we started. In a \"real world\" situation, these things are true: You want to break up your JavaScript into as many small files as makes sense to you. Just like we broke up\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18049,"url":"https:\/\/css-tricks.com\/lodge\/v10\/009-setting-up-dev-environment\/","url_meta":{"origin":16991,"position":4},"title":"#009: Setting Up our Local Dev Environment","date":"September 7, 2012","format":false,"excerpt":"We certainly aren't \"done\" in Photoshop forever for this design, but we have enough to work from to get started creating this design in the browser. After all, this is a website we're building not a picture of a website (as they say). We create a folder that will be\u2026","rel":"","context":"With 19 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18140,"url":"https:\/\/css-tricks.com\/lodge\/v10\/018-making-our-project-use-compass\/","url_meta":{"origin":16991,"position":5},"title":"#018: Making our Project use Compass","date":"September 9, 2012","format":false,"excerpt":"We could write our own Sass @mixins to help with CSS3 stuff (like gradients), but there is a Sass framework that already exists called Compass that already has that stuff ready to go. It takes a bit of a leap of faith to reliquish control of stuff like this (I\u2026","rel":"","context":"With 14 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/16991"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=16991"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/16991\/revisions"}],"predecessor-version":[{"id":17000,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/16991\/revisions\/17000"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=16991"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=16991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n