Finding a Better Way to CSS: Navigating Sass with Compass

Finding a Better Way to CSSNavigating Sass with Compass

I’m...Claudina Sarahe@itsmisscsitsmisscs.com

So besides trying to learn a cool…not sure what toactually call Compass or Sass…technology? Youhave to dive into using the command line...actuallyUSING these things is great. Getting there sucks.The install process is a bitch...I know that thissounds discouraging, but I am here to tell you thatALL that crap…is worth it. Just be prepared forsome serious learning and a lot of searching.http://jc-designs.net/blog/2010/10/a-review-of-compass-for-sass/

Sass: SyntacticallyAwesome Style SheetsCSS Extensions or CSS PreprocessorsAdds Dynamic Behavior: $Variables @Mixins (Arguments) Operations

Sass and SCSSSass is indent based #header background: redSCSS follows CSS structure #header { background: red; }

FRAMEWORK:An essential supporting structureA basic structure underlying a system, concept, or text

Up and RunningCompass is ruby gem.Installs SassUse with ANY Drupal themeThere is a Drupal module...

sudo gem update --systemsudo gem install compasscompass versioncompass create path/to/projectcd path/to/projectcompass watch

File Structure &conﬁg.rb

_partials.scssAlways prefixed with underscoreNot compiled into CSSGreat way to break out files _vars.scss _mixins.scss _drupal.scssPut in own folder (best/common practice)

@import “_partials”; SCREEN.SCSSLoad partials into files that get compiled to CSS Any file that doesn’t start with underscore gets compiledCascade order preserved

Core Imports @import “compass/typography/text/replacement”; @import “compass/css”; @import “compass/typography/links/link-colors”; @import “compass/typography/lists”; @import “compass/utilities/sprites”;

Image Logo Social Media LinksLink states Button (submit inputs)Sites colors: Red, Orange, Brown, White

Set up $variables in_vars.scss$main: rgb(90,72,42); // main type brown$white: rgb(255,255,255);$red: rgb(177, 32, 36); // Header$dbrown: rgb(62,45,12); // Darker Brown$green: rgb(113,124,51); // green$orange: rgb(239,151,33); // orange$hover: rgb(249,170,26); // Menu state

#header { background: $red url(../i/bg-header.png) no-repeat right top; height: 129px; @include border($white;)}#navigation { $height: 30px; background: $dbrown; margin-bottom: 22px; height: $height; SASS SUPPORTS NESTING BLOCKS color: $white; REDUCES CODE CLUTTER .block { @include fl; }}

Mixins => RecipesProvide chunks of reusable codeExtended with argumentsCompass provides collections of mixins @import “compass”;

@INCLUDE BORDER($WHITE); @mixin border($color, $all: false, $side: bottom, $width: 1px, $style: solid){ @if $all { border-width: $width; border-style: $style; ARGUMENTS border-color: $color; } @else { border-#{$side}: $width $style $color; } INTERPOLATION SYNTAX

<h1 class="site-name"> <a href="/" class="active">Social Justice Leadership</a></h1>

@import “compass/Core Imports:typography/text/ http://compass-style.org/reference/compass/ typography/text/replacement/ Replace text with Images Mixin for hiding text (with accessbility)

.site-name { margin: 10px 10px 0 10px; a{ @include replace-text-with-dimensions("../i/sjl-logo.png"); display: block; /* line 63, ../sass/screen.scss */ } .site-name a {} text-indent: -119988px; overflow: hidden; text-align: left; background-image: url(../i/../i/sjl-logo.png? 1310669861); background-repeat: no-repeat; background-position: 50% 50%; width: 319px; height: 108px; display: block; .site-name { margin: 10px 10px 0 10px; }

<div id="navigation"><div class="limiter clearfix"> <div class="region region-nav"> <div class="block block-system block-menu clearfix" id="block-system-main-menu" <div class="block-content clearfix"> <ul class="menu"> <li class="first leaf"><a class=”active” href="/jobs-in-social-justice-organizing" title="Programs">Programs</a></li> <li class="leaf"><a href="/upcoming-events" title="Current, Upcoming and Past Events">Calendar</a></li> <li class="leaf"><a href="/resources" title="Resources">Resources</a></li> <li class="last leaf"><a href="/media-clips" title="Media">Gallery</a></li> </ul> </div> </div>

@include horizontal-list-item; http://compass-style.org/reference/compass/ typography/lists/horizontal_list/ @import “compass/typography/links/link-colors”; http://compass-style.org/reference/compass/ typography/links/link_colors/ Set the color for link: Normal, Hover, Active Visited, Focus

#navigation .menu { .menu { margin: 0; @include horizontal-list(false); padding: 0; a{ border: 0; overflow: hidden; @include link-colors($white, $hover); *zoom: 1; @include border($white, right);} font-weight: bold;#navigation .menu li { text-transform: uppercase; list-style-image: none; display: block; list-style-type: none; padding: 5px 10px; margin-left: 0px; &.active { white-space: nowrap; display: inline; background: $hover; ﬂoat: left; }} }#navigation .menu a { color: white; /* line 24, ../../../../../../../../../../../../Library/Ruby/Gems/1.8/gems/ border: 1px solid white; compass-0.11.3/frameworks/compass/stylesheets/compass/typography/ font-weight: bold; links/_link-colors.scss */ text-transform: uppercase; #navigation .menu a:hover { display: block; color: #f9aa1a; padding: 5px 10px; }} #navigation .menu a.active { background: #f9aa1a; }

Core Imports@import “compass/css3”; http://compass-style.org/reference/compass/css3/ Cross browser mixins for CSS properties Configure which browsers you support http://compass-style.org/reference/compass/ support/

@mixin button($bg, $color: $white, $f-w: normal, $t-trans: uppercase,$pad: 2px 3px) { @include border-radius; background: $bg; color: $color; input[type="submit"] { font-weight: $f-w; -moz-border-radius: 5px; text-transform: $t-trans; -webkit-border-radius: 5px; padding: $pad; -o-border-radius: 5px; border: none; -ms-border-radius: 5px; cursor: pointer; -khtml-border-radius: 5px;} border-radius: 5px; background: #717c33; color: white; font-weight: normal; input[type="submit"] { text-transform: uppercase; @include button($green); padding: 2px 3px; } border: none; cursor: pointer; }

.block-search { Operations @include ﬂ(right); @include border($white, left); height: $height; Equality operations (==, =!) input[type="text"] { Arithmetic on numbers (+, -, *, /, %) width: 127px; Relational operators (<, >, <=, >=) height: $height - 4px; margin: 1px; } }

<div class="block block-boxes block-boxes-simple clearfix" id="block-boxes-social-media"> <h2 class="block-title clearfix">Follow</h2> <div class="block-content clearfix"> <div id="boxes-box-social_media" class="boxes-box"> <div class="boxes-box-content"> <ul> <li class="icon-fb"><a href="" title="SJL on Facebook">Facebook</a></li> <li class="icon-twitter"><a href="" title="Follow SJL">Twitter</a></li> <li class="icon-rss"><a href="rss.xml" title="Keep up with SJL feed">RSS</a></li> </ul> </div> </div> </div></div>

@import “compass/Core Imports:utilities/sprites”; http://compass-style.org/reference/compass/helpers/ sprites/

/* SPRITES ------------------------------------------------------------*/@IMPORT "ICON/*.PNG";@INCLUDE ALL-ICON-SPRITES;.icon-sprite, .icon-fb, .icon-rss, .icon-twitter { background: url(../i/icon-s430e9af5f6.png)no-repeat;}.icon-fb { background-position: 0 0;}.icon-rss { background-position: 0 -19px;}.icon-twitter { background-position: 0 -38px;}

http://compass-style.orghttp://adamstacoviak.com/posts/referencing-parent-selectors/https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.htmlhttp://palantetech.comhttp://hazanco.com Resources & Credits Thanks!

http://insites.co.il	21
http://twitter.com	3
http://www.slideshare.net	2
http://dev2.insites.co.il	2
http://drizzlin.com	1
http://the-refreshing-sip.blogspot.com	1
http://ayudamutuapadresenprocesodeduelo.blogspot.com	1
http://tweetedtimes.com	1
https://twitter.com	1
http://www.bbvatech.com	1

Finding a Better Way to CSS: Navigating Sass with Compass

by Claudina Sarahe on Aug 01, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 34

Statistics

Finding a Better Way to CSS: Navigating Sass with Compass — Presentation Transcript