{"id":601,"date":"2012-03-11T14:33:22","date_gmt":"2012-03-11T20:33:22","guid":{"rendered":"http:\/\/www.techory.com\/blog\/?p=1491"},"modified":"2012-03-15T12:58:57","modified_gmt":"2012-03-15T18:58:57","slug":"simplify-css-development-with-sass-compass","status":"publish","type":"post","link":"http:\/\/techory.com\/sxsw\/?p=601","title":{"rendered":"Simplify CSS Development with Sass &amp; Compass"},"content":{"rendered":"<p><strong>Sunday, March 11 &#8211; 3:30PM &#8211; 4:30PM<\/strong><br \/>Alex Lemanski Founder\/Web Craftsman Bitfyre<\/p>\n<p>Slides, Links, Examples: <\/p>\n<ul>\n<li>Saas allows for variables so you only have to replace elements in a single place in your style sheet.<\/li>\n<li>Nesting selectors so you don&#8217;t have to repeat multiple tags or divs<\/li>\n<li>Nesting Statements as well<\/li>\n<\/ul>\n<p><strong>Tools:<\/strong><\/p>\n<ul>\n<li>Web Workbench (Visual Studio Plugin)<\/li>\n<li>Compass.app (Mac\/Windows\/Linux)<\/li>\n<li>CodeKit (Mac)<\/li>\n<li>Scount<\/li>\n<\/ul>\n<p><strong>Commandline Tools:<\/strong><\/p>\n<ul>\n<li>Saas itself<\/li>\n<li>sass convert<\/li>\n<li>Middleman<\/li>\n<li>Compass<\/li>\n<\/ul>\n<p><strong>Debugging Tools:<\/strong><\/p>\n<ul>\n<li>Generated Line Comments<\/li>\n<li>FireSass for Firebug<\/li>\n<\/ul>\n<p><strong>Common Good Practices in CSS (same for Sass):<\/strong><\/p>\n<ul>\n<li>don&#8217;t nest more than 4 selectors deep<\/li>\n<li>break things down as much as possible<\/li>\n<li>work from the main area of content out<\/li>\n<\/ul>\n<p>Number conversions can be created to convert px to em or back.<\/p>\n<p>For the actual compiled CSS output, you can display it whatever way you&#8217;d like:<br \/>nested, expanded, compact<\/p>\n<p>Nice mixins for the various browser-specific syntax &#8211; Sass can just bring them all in.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sunday, March 11 &#8211; 3:30PM &#8211; 4:30PMAlex Lemanski Founder\/Web Craftsman Bitfyre Slides, Links, Examples: http:\/\/bit.ly\/teamSass Saas allows for variables so you only have to replace elements in a single place in your style sheet. Nesting selectors so you don&#8217;t have to repeat multiple tags or divs Nesting Statements as well Tools: Web Workbench (Visual Studio [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[31],"tags":[],"_links":{"self":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/posts\/601"}],"collection":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=601"}],"version-history":[{"count":1,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/posts\/601\/revisions"}],"predecessor-version":[{"id":624,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/posts\/601\/revisions\/624"}],"wp:attachment":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=601"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}