Advanced sass/compass

Advanced http://picklebums.com/wp-content/uploads/2010/06/crayon-drawing.jpg

Who is this guy? Nick Cooley Principal Front-End Architect, TandemSeven: http://www.tandemseven.com @nickcooley http://www.github.com/nickcooley

What we’ll talk about in this session...• Recap of Sass/Compass• Advanced Sass • Control Structures • Color Functions• Advanced Compass • Geometric functions and constants• Application to Sencha Touch• DEMOS!

What this Presentation ISN’T • Sass vs LESS vs Stylus • Why using a CSS Preprocessor is better than not using one • A conversation about how Preprocessors can bloat your CSSMany great articles arguing the merits/gotchas of using apre-processor. Here’s one I really agree with:http://bit.ly/SassisntbadMy personal opinion: “Like everything in technology,preprocessors are a tool in your arsenal. You shouldunderstand the fundamentals of CSS before relying on them.”

What this Presentation ISN’T • How to code/structure CSSThe hope is that you have *some* CSSknowledge and are aware of best practices. Ifnot, here’s a great article for you: kiano.sh/Inxxym • How to build apps with Sencha TouchWhile we will go over examples that includedemo Sencha Touch apps, the focus really is onthe Sass/Compass and resulting CSS

Let’s Recap:

What is Sass?• Stands for “Syntactically Awesome StyleSheets”• “Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.”• The foundation for style implementations in ExtJS and Sencha Touch

SassMost Popular Features:• Nesting• Variables• Mixins• Functions• @extend

Sass: Nesting•Sass: Allows you to nest selectors within a parent selector.•This provides an approach that’s clean, concise, unique and DRY

Sass: Nesting•Sass: Allows you to nest selectors within a parent selector.•This provides an approach that’s clean, concise, unique and DRY div { &.content { .element { h1 {...} } } } //outputs div.content .element h1 {...}

Sass: Variables• Allow you to quickly parameterize your CSS• Create diverse variations in seconds!• Helps you create design standards for your CSS.• Using a main color in a number of

Sass: Variables• Allow you to quickly parameterize your CSS• Create diverse variations in seconds!• Helps you create design standards for your CSS.• Using a main color in a number of $color: #fff; $pxHeight: 10px;

Sass: Mixins• Mixins:Sass :: Functions:Javascript• Allow you to deﬁne patterns for reuse• Mixins can be imported across projects, helping you to create your own framework

Sass: Mixins • Mixins:Sass :: Functions:Javascript • Allow you to deﬁne patterns for reuse • Mixins can be imported across projects, helping you to create your@mixin own framework pictos-iconmask($name) { .x-button .x-button-icon.x-icon-mask.#{$name} { -webkit-mask-image: theme_image($theme-name, "pictos/" +$name + ".png"); }}

Compass• Collection of Sass mixins and variables• X-Browser CSS3 mixins • Rounded Corners • Box Shadow • Gradients • Text Shadow• Common CSS development Patterns • Reset.css • Sprites • Clearﬁx • Web Fonts • CSS3 Pie • More!

Let’s turn it up to 11 http://4.bp.blogspot.com/_8lK2el5pnbU/S-dDjMziqsI/AAAAAAAAGMc/YkZMHVA2-5k/s1600/SpinalTap_.jpg

Control Directives in SassVery similar to a number of controldirectives in languages like javascript,ruby, PHP -- Sass provides somerudimentary functionality:• if/else if/else• for• while

@ifWorks like every “if” directive you’veever used (if, else if, else)• create exceptional cases determined by CSS controlled attribute OR• Sass also contains an “if” function which works as: if($condition, $if-

@if examples• Example of default @if method implementation• Example of if() function method

@if examples• Example of default @if method implementation@if $type == bevel {...}@else if $type == matte {...}@else {...}• Example of if() function method

@if examples• Example of default @if method implementation@if $type == bevel {...}@else if $type == matte {...}@else {...}• Example of if() function methodborder: if($i%2==0, 1px solid #000, 4px solid #333);

@forIs different from the “for” directive inmost programming languages• two types: “to” and “through”• cannot count down• can only iterate by one

@for examples• Example of “to”• Example of “through”

@for examples• Example of “to” @for $i from 1 to 3 { .item-#{$i} { width: 2em * $i; } } //outputs .item-1 {width: 2em; } .item-2 {width: 4em; }• Example of “through”

@for examples• Example of “to” @for $i from 1 to 3 { .item-#{$i} { width: 2em * $i; } } //outputs .item-1 {width: 2em; } .item-2 {width: 4em; }• Example of “through” @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } //outputs .item-1 {width: 2em; } .item-2 {width: 4em; } .item-3 {width: 6em; }

@whileIterates across a range of values usinga statement evaluation until it results infalse• can evaluate to < > ==• WARNING: you must adjust the evaluation variable manually

@whileIterates across a range of values usinga statement evaluation until it results infalse• can evaluate to < > ==• WARNING: you must adjust the $i: 8; @while $i > 0 { evaluation variable manually .box#{$i} { $factor: 100px - ($i * 10); height:$factor !important; width:$factor !important; background: #333; $i: $i - 1; } }

@eachIterates through a list of itemsindividually• Can include list as parameter or variable

@eachIterates through a list of itemsindividually• Can include list as parameter or variable$list: (bob, steve, rob);@each $person in $list { .#{$person}{background-image: url($person);} }// CSS output.bob {background-image:url(bob); }.steve {background-image:url(steve); }.rob {background-image:url(rob); }

Colors in SassOne of the least discussed features inSass are color features• Create themes/schemes/palettes based on harmonious color relationships• Mix colors using color relationships• Sass has operations for RGB and HSL

Color Functions• complement• adjust-hue• lighten/darken• color math• AND MANY MORE!

The Boxes• A really basic demo which shows various color functions/control directives

Advance processing in CompassCompass may be a framework, but itprovides a number of helpful functionswhich can make interesting results:• Geometry functions: • sin(), cos(), tan(), pi()• Additional math functions: • e(), log(), sqrt()

The beneﬁts of advanced functionsWith these functions, you can:• Offload some of the processing for things you might do in javascript for faster performance• Be able to calculate in one place and not worry about it.• Do things like: • calculate coordinates on a circle • plot points on a graph • create some interesting designs using math!

HSL.clrpick.me• Starting off with a base color, generate related color-sets based on hsl relationships.• This can help you determine what colors might go with your initial color.• Color relationships are based on Sass color functions

So let’s put it all togetherHSL clrpick.me uses Sass/Compass for• Iterators• Positioning color swatches in 360 using Compass geometry• Adjusts color using pre-deﬁned relationships

First, an example

The Color Wheel

The Color Wheel@include circlefy(200, $deg);@mixin circlefy($radius, $deg){ $rad: angleToRadians($deg); @include radiansToCartesian($rad, $radius);}@function angleToRadians($a){ $pi: pi(); $angle: ($a) / 180; $radians: $pi * $angle; @return $radians;}@mixin radiansToCartesian($r, $radius){ $x: round($radius * cos($r)); $y: round($radius * sin($r)); top: #{$y}px; left:#{$x}px;}

The S & L Bars

The S and L bars

The S and L bars$light : lightness($colorwheel1);@for $i from 0 through 10 { &:nth-child(#{$i + 1}){ $startBackground: lighten($colorwheel1, 100); $val: $i * 10; background: darken($startBackground, $val ); span {margin-left:0; right:55px;} span:after {content: "lightness: #{$val} color:#{darken($startBackground, $val )}";} }}

But hey, you said “Sencha Touch”Sencha Touch is a javascript frameworkwhich relies on Sass/Compass for itslook/feel.• Sencha has put together a really solid set of mixins: buttons, pictomasks, toolbars• There’s really no limit to what you can add using Sass/Compass speciﬁc

Sencha Touch DocsThroughout the Sencha Touchdocumentation, you’ll ﬁnd predeﬁnedmixins which you can use out-of-the-box

ST2 DemoJust to show you that modifying Sass/Compass for Sencha Touch is just aseasy as it is for anything else....

Links• Sass Site: sass-lang.com• Compass Site: compass-style.org• Compass.app Site: compass.handlino.com• HSL Color Picker: hsl.clrpick.me or github.com/nickcooley/clrpick.me• Manning Sass Book : manning.com/netherland/• LiveReload : livereload.com• FireSass : addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/

https://si0.twimg.com	25
https://twimg0-a.akamaihd.net	24
http://a0.twimg.com	23
http://www.linkedin.com	7
https://twitter.com	4
http://us-w1.rockmelt.com	1
http://www.twylah.com	1

Advanced sass/compass

by Nick Cooley on May 04, 2012

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 85

Statistics

Advanced sass/compass Presentation Transcript