Finding a Better Way to CSS: Navigating Sass with Compass

Editor's Notes

• #2: Welcome to Finding a Better Way to CSS with Sass and Compass. My name is Claudina Sarahe\n
• #3: Last month I gave a talk at D4D about Less (another CSS preprocessor language), Sass and Compass. It was focused on talking about LESS and CSS but at introductory level, code samples were basic\n
• #4: My Goal for this session is to dig in a bit more. \n\nThe point where you’ve already made the decision, but now you are at crossroads\n\nI’ll be covering the topics through examples in the wild. \nCover common mixins or bases. because despite the good documentation \n
• #5: Yup and that/this is what this session is here to hopefully help you with. \n\nI came across this quote and found it very fitting for the session. While I don’t necessarily think the getting there sucks, I do recognize that there isn’t as many best resources or practices as there are for CSS and it can be confusing. \n\nI know this because I’ve worked on two SASS projects where it was more combersome than helpful. It clued me into the fact that people say they know, but they don’t. I’m not claiming to be an expert. I have a big for DRY (Don’t Repeat Yourself). \n
• #6: Very quickly, Sass and its other common counter part Less are. \n\nAt their core, they extend CSS by adding dynamic behavior. CSS is pretty bloated, flat language. But it is is the language of beauty on the web. \n\nCss extensions make writing CSS fun again. Additionally, it is a very important time for optimized, snappy, effective front-ends, led by the boom in other devices for accessing information (plug the responsive session). With CSS3 and HTML5 gaining rapid rapid adoption, b/c browsers, even our beloved IE, are finally getting w/rapid adoption. there’s a lot of really great fun. things that were diffcult, annoying or just impossible are provided natively in CSS3\n
• #7: Two syntax's\n\nSass is the original indent based and SCSS, or just Sassy CSS, is the newer language. It came about primarily because of LESS. \n\nMakes no difference which one you use. In fact it is really easy to convert from one to another et\n\nI’ve been writing SCSS and the examples in this slide are from SCSS @TODO regenerate file in SASS (if time). \nRationale: \nI like that it is easy to write standard CSS within the file, especially great if working with teams. \n\nBut i’m finding myself leaving off colons and brackets, so I will more than likely be switching to Sass.\n\nMake your decision based on your circumstances - team vs solo \n
• #8: I really like the description from Compass’s site\n\nCompass is built on Sass and it is the reason I use Sass over Less. \n\nI really like the description from the compass site. in particular #2, #3, #4, #5.\n\nIn short, it satisfys core goal-reusability, community/sharing, structure-much like drupal\n
• #9: Yes there is a module but\n
• #10: but seriously...I tried the module, I tried the install directions and I was pulling out my hair. And then I remembered that Jacine set it up and I googled Jacine compass and came across the most helpful tweet\n\n\n\n\n
• #11: A colleague of mine attended my first session and suggested that the SASS files live outside the Drupal root. I really liked this idea and as best as possible I do try to do this. Commonly, the file lives in your theme. But you can move it anywhere, just have to change the defaults\n\nI like it outside the document root b/c the SASS files are the canonical files; CSS is what the browser sees. I do commit the files.\n\nYou will want to enable relative paths to assets\n
• #12: \nPartials are prefixed with underscore\nInvisible files, they are not compiled into final CSS. \n\n\n
• #13: @ show example from compass site\n\nthis is how compass works. with compass you pull in imports. you can pull in all the compass utilities but that would make your project very bloated. so the general way to do it only import what you need\n\n\n
• #14: These are the imports I find myself commonly using across all projects. I’ll talk briefly about them so we can move to the example where applied they start to make more sense. \n\nFirst things first, add these to your screen.scss/sass file\n\nthe second one I am importing just a specific subset of the compass typography helpers. Link colors allows me to set all the colors for a link with one mixin call\n\nNow, i’ve got all of these defined at the top of my screen.scss file. Let’s dive into an example to see how these get used.\n
• #15: This is example of header area. It is from a site that’s in progress at Palante Technolgy designed by Hazan and company. Thank them for letting me use it as an example. \n\nCaution: this is removed from the whole. better to look at whole design and then the pieces. ideally, as well, there is a style guide = very helpful!\n
• #16: Variables always start with dollar sign\n\nThey are one of the most sought after features missing from CSS. \n\nVariables are available to any document as long as their definition comes first. You can also alter the definition of the variable later. \n\nSass supports hidden comments\n
• #17: disclaimer: nothing responsive about these examples :)\n
• #18: create your own recipes. you know, always want to have something around just in case\n\nBrings in all of the compass mixins. but! this is not going to be necessary for most projects and compass gives you the ability to chose otherwise\n
• #19: Defining a mixin!\n\nmixins are defined with @mixin and then the name of the mixin. when you use a mixin you start with @inlude followed by the name. \n\nmixins can take arguments and the follow in parentheses. arguments are powerful and allow you to pass configuration to the mixin. \n\nyou’ll notice that some arguments have default values and some don’t. the order is important. you must put all non-value mixins first, that is why color is first because i have specified a default. the rest of the order is up to you\n\nso in my mixin i’m also doing simple if else: i noticed that for the most part i just need one property. but sometimes i need more, so i’ll use the more verbose notation. \n\nit reads: is all is set to true the use this block of code (everything within the curly), if it is false, then use this code. my default is false. \n\nnow the next thing: $side var. interpolation syntax behaves like a variable but it is used for to add vars to property names\n\nas you know the shorthand CSS notation can exist for top, right, bottom, left. I want this mixin to be reusable and borders may change. notice i set my default to Bottom but in my mixing in the menu I am setting it to right. \n\nargument order matters! the fist var is the one that doesn’t have any defined defaults. \n
• #20: okay. good basic start. we have header and nav. Let’s theme the site name. We remember from our design that we need to swap in a logo.\n\nIn CSS this is done by... \n
• #21: Text replace import comes with three mixins: pull up the site: http://compass-style.org/reference/compass/typography/text/replacement/\n\nwe can replace text\nreplace with dimenstions\nor hide\n\n\n
• #22: look at that! that’s it. That one simple line replaces text with our image. Look at the equivalent CSS\n\nVery helpful to keep debugging lines in CSS. This is set in the config.rb\n\nAlso good to look at generated css. helps teach you want is actually going \nmake fles more manageable. \n\n
• #23: okay. looking better. let’s move to the menus. to note: i went ahead and added the code for the block in the header because it doesn’t involve any fancy Sss\n\n1. Horizontal List of Links\n2. Link States\n
• #24: moving to the next two core imports: link colors and lists\n\nlists helpers provides lots of mixins for dealing with lists. We are going to focus on the horizontal list. more complex arguments\n\n\n\n
• #25: back to our code. let’s see what that looks like in CSS. \n\nmy menu is nested in #navigation\n\nnotice that compass tells us that the code comes from compass mixin and not our file!\n\nthe ampersand is part of Sass and it is a very elegant way to reference the parent selector nested context\n
• #26: \n
• #27: Another one of my compass favorites is the CSS3 modules. \n\nIf you are writing CSS3 you know it is a big big pain because each browser has its own rendering engine and its own browser support module. \n\nWith Compass you don’t have to worry about writing all of those out. In fact, you can configure which browsers to support\n\n
• #28: this is what border-radius outputs\n
• #29: getting back to the search block. so this time i need a border to the left, as per designs. \n\nAlso, the height is smaller than the containing value. instead of recalculating the height, i can simple just use math operators\nequality operators work on all types, while arithmetic and relational operators are only for numbers\n
• #30: Last we get to the share links. \n
• #31: CSS Sprites Generated. Another fantastic feature of Compass. No longer having to generate your own sprites. \n\nThere are a lot of defaults and ways to customize sprites. It can seem very overwhelming but on the simple end, enough for most needs on your site. \n
• #32: At their most basic: all that is all required to generate sprites automatically from images. \nThere are many defaults to set and you can even override the names manually. But! if you want to keep it simple just note: \n1. Note that the mixin's name is dependent on the name of the folder in which you've placed your icons.\n\n\nEarlier I introduced replace image with dimensions. With sprites, our images are generated and match the class immediately. \n
• #33: \n