{"id":18140,"date":"2012-09-09T14:54:05","date_gmt":"2012-09-09T21:54:05","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=18140"},"modified":"2015-10-05T18:41:39","modified_gmt":"2015-10-06T01:41:39","slug":"018-making-our-project-use-compass","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/lodge\/v10\/018-making-our-project-use-compass\/","title":{"rendered":"#018: Making our Project use Compass"},"content":{"rendered":"<p>We could write our own Sass <code>@mixin<\/code>s to help with CSS3 stuff (like gradients), but there is a Sass framework that already exists called <a href=\"http:\/\/compass-style.org\/\" rel=\"noopener\">Compass<\/a> 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 guess no more than using a preprocessor to begin with), but it&#8217;s worth it. <\/p>\n<p>Why is using Compass a good idea?<\/p>\n<ul>\n<li>The @mixins are very well written. They match the spec where they can and are very consistant.<\/li>\n<li>Compass updates so you&#8217;ll stay up to date on current best practices automatically. It will probably do a more comprehensive job of doing that than you can alone.<\/li>\n<li>It has a bunch of other powerful stuff you can tap into, like spriting (which we won&#8217;t get to in this project but is sweet).<\/li>\n<\/ul>\n<p>CodeKit works great with Compass (it even ships with it). We lose some of the control we had in CodeKit (like controlling file compiling paths directly) but it&#8217;s not a big deal. We can still control most stuff from the config.rb file now in our project. <\/p>\n<p>Ultimately we use Compass to @include transitions for the navigation links giving them a softer feel. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 guess no more than using [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":18010,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"lodge-video.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":20051,"url":"https:\/\/css-tricks.com\/lodge\/artists-website\/010-codekit-for-great-success\/","url_meta":{"origin":18140,"position":0},"title":"#010 &#8211; 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":6674,"url":"https:\/\/css-tricks.com\/video-screencasts\/88-intro-to-compass-sass\/","url_meta":{"origin":18140,"position":1},"title":"#88: Intro to Compass\/Sass","date":"June 23, 2010","format":false,"excerpt":"Ask a bunch of designers what they wish CSS could do that it can't now, and you'll get a big list that reads much like the list of features for the Compass\/Sass framework. If you are like me, you don't have any trouble writing CSS, but the thought of being\u2026","rel":"","context":"In \"compass\"","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":18140,"position":2},"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":192767,"url":"https:\/\/css-tricks.com\/snippets\/sass\/fix-number-n-digits\/","url_meta":{"origin":18140,"position":3},"title":"Fix a Number to N Digits","date":"January 9, 2015","format":false,"excerpt":"When dealing with numbers in JavaScript or any other programming language, there is a way to truncate a number after n digits. Unfortunately, there is no such function in Sass. Still, rounding and precision issues do happen when dealing with percentage based grid systems for instance. Here is a Sass\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":191219,"url":"https:\/\/css-tricks.com\/snippets\/sass\/opposite-direction-function\/","url_meta":{"origin":18140,"position":4},"title":"Opposite-direction Function","date":"December 19, 2014","format":false,"excerpt":"Sass framework Compass provides a handy function to get the opposite direction of a position, for instance left when passing right as argument. This function not only does not need Compass, but it also accepts a list of positions rather than a single one. It also handles invalid value gracefully.\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":193485,"url":"https:\/\/css-tricks.com\/snippets\/sass\/sass-things-links\/","url_meta":{"origin":18140,"position":5},"title":"Sass Things for Links","date":"January 17, 2015","format":false,"excerpt":"via Alex King, you can use variables for selectors: $a-tags: 'a, a:active, a:hover, a:visited'; $a-tags-hover: 'a:active, a:hover'; #{$a-tags} { color: red; text-decoration: none; } #{$a-tags-hover} { color: blue; } You can even nest like that, which is where this gets even more useful: .module { #{$a-tags} { color: blue; text-decoration:\u2026","rel":"","context":"With 8 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18140"}],"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=18140"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18140\/revisions"}],"predecessor-version":[{"id":18141,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18140\/revisions\/18141"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18010"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=18140"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=18140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}