ParisJS #11 : Sass & Compass

Sass & Compass

Sass &http://sass-lang.com/ http://compass-style.org/

Question #1Do you write CSS ?

Question #2 Do you love(writing) CSS ?

Question #3 Did you love(writing) CSS ?

Good News #1 Sass makesCSS fun again

Good News #2Sass will make you love CSS again

Good News #3Compass will make you love CSS3 again

Who ?Julien CabanèsI care about Front End @ZeeAgencyI reply to julien@zeeagency.comI tweet sometimes @JulienCabanesI share some code to github.com/ZeeAgency

Things to remember today #1

SYFK !

Save Your F... Keyboard !

Things to remember today #2

Be Lazy

Lazier is Faster

Think yourself as Indiana Jones...

Think yourself as Indiana Jones...• You have to kill this son of a b... !

Think yourself as Indiana Jones...• You have to kill this son of a b... !• You have a gun.

Think yourself as Indiana Jones...• You have to kill this son of a b... !• You have a gun.• Why don’t you just ... use it ?

Think yourself as Indiana Jones...• You have to style this website !• You have a computer.• Why don’t you just ... use it ?

End of the StoryBack to the Code

CSS : The Good Parts• CSS Syntax is easy• Selector Query Language is nice• Cascading is nice• Functions.Yes, CSS have functions • CSS2 : attr(), counter(), url() • CSS3 : calc(), translateX(), rotate()...• Media Queries• and more...

CSS : The Bad Parts• Variables... come on ! (Still draft)• Selectors vs. DRY• Modularity : many ﬁles === many HTTP requests• Functions : Can’t write your owns• Separation of Concerns is almost impossible• CSS3 is great but vendors preﬁxing, damn !• and more !

Solution #1Wait for CSS4 ?

Solution #2Abstraction

Solution #2 Abstraction“ It’s nothing to be scared of ” - Chris Eppstein creator of Compass & Sass Core team member

Good Abstraction How ?

Good AbstractionKeep the Good Parts

Good Abstraction Keep the Good PartsCSS is easy, Keep it easy

Good AbstractionKeep the Good Parts Keep the Syntax

Good AbstractionForget the Bad Parts

Good Abstraction Forget the Bad PartsCSS is clearly not enough

Good AbstractionForget the Bad PartsEnhance the Syntax

Good AbstractionCSS Pre-Processors to the rescue

Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSS Voluntary omitted of Other/PHP/Python CSS preprocessors (Turbine, CSS Cacheer...)

Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS Ruby

Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / Back

Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / Back Front could be good way to go if this was a polyfill but CSS4 doesn’t exist yet

Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / BackSyntax CSS Superset Not CSS CSS Superset

Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / BackSyntax CSS Superset Not CSS CSS Superset Your CSS won’t work

Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / BackSyntax CSS Superset Not CSS CSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;

Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / BackSyntax CSS Superset JS Like CSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue; traction bad abs

Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / BackSyntax CSS Superset Not CSS CSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax .foo() {} foo() @mixin foo() {}

Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / BackSyntax CSS Superset Not CSS CSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax .foo() {} foo() @mixin foo() {} implicit abs traction co uld increase learni ng cur ve

Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / BackSyntax CSS Superset Not CSS CSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax .foo() {} foo() @mixin foo() {} explicit ab s traction

Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / BackSyntax CSS Superset Not CSS CSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax .foo() {} foo() @mixin foo() {}Import Style Style Style & Images !

Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSWritten in JS JS RubyContext Front & Local Local / Back Local / BackSyntax CSS Superset Not CSS CSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax .foo() {} foo() @mixin foo() {}Import Style Style Style & Images !Framework Roll your own Roll your own Compass

Quick Overview of CSS Pre-Processors LESS Stylus Sass/SCSSRun with JS JS RubyContext Front & Local Local / Back Local / BackSyntax More on this later CSS Superset Not CSS CSS SupersetVariable Syntax @color: blue; variable = blue $variable: blue;Mixins Syntax .foo() {} foo() @mixin foo() {}Import Style Style Style & Images !Framework Roll your own Roll your own Compass

Skipping Technical Infos gem install sass http://sass-lang.com/tutorial.html

Sass• One language but 2 syntaxes • Sass : indented syntax, forget { } and ; • SCSS : Sassy CSS === CSS3 superset• Means Syntaxically Awesome StyleSheets• Should run on your machine, not the server• Is watching for folder/ﬁle changes and parse• Shares a lot of features with LESS & Stylus

SCSS is a CSS3 Superset• Every existing CSS will work just ﬁne !• You love {...} and ; that’s OK !• You want a little more ? Try it !• You want a lot more ? Love it !

Ready ?

Killer Feature #1

VariablesSCSS $link-color: #b4d455;a { color: $link-color;} ⌘SCSSa { color: #b4d455;}

Variables Types // With or without unit$number: 1.2;$number: 10px;$number: 20%;// With or without quotes$string: "Hello World";$string: /img/icons.png;$string: underline;// Any kind$color: #b4d455;$color: rgba(0, 0, 0, 0.5);$color: hsl(100deg, 40%, 60%);// Wow$boolean: true;$boolean: false;// With commas or spaces$list: 10px 5px 15px;$list: Helvetica, Arial, sans-serif;

What can we dowith Variables ?

Number OperationsBasic Arithmetic : + - * / %// Ever need this ?$lightbox-width: 500px;$lightbox-height: 400px;$lightbox-padding: 20px;.lightbox { position: absolute; top: 50%; ⌘S left: 50%; margin-top: -$lightbox-height / 2; margin-left: -$lightbox-width / 2; padding: $lightbox-padding; width: $lightbox-width - ($lightbox-padding * 2); height: $lightbox-height - ($lightbox-padding * 2);}

Number OperationsTalkin’ about division...// Division happens if.. variable, parentheses or other operationp { font: 10px / 8px; $width: 1000px; width: $width / 2; height: (500px / 2); margin-left: 5px + 8px / 2px;}

Number OperationsTalkin’ about division...// Division happens if.. variable, parentheses or other operationp { font: 10px / 8px; // Plain CSS, no division $width: 1000px; width: $width / 2; height: (500px / 2); margin-left: 5px + 8px / 2px;}

Number OperationsTalkin’ about division...// Division happens if.. variable, parentheses or other operationp { font: 10px / 8px; // Plain CSS, no division $width: 1000px; width: $width / 2; // Uses a variable, does division height: (500px / 2); margin-left: 5px + 8px / 2px;}

Number OperationsTalkin’ about division...// Division happens if.. variable, parentheses or other operationp { font: 10px / 8px; // Plain CSS, no division $width: 1000px; width: $width / 2; // Uses a variable, does division height: (500px / 2); // Uses parentheses, does division margin-left: 5px + 8px / 2px;}

Number OperationsTalkin’ about division...// Division happens if.. variable, parentheses or other operationp { font: 10px / 8px; // Plain CSS, no division $width: 1000px; width: $width / 2; // Uses a variable, does division height: (500px / 2); // Uses parentheses, does division margin-left: 5px + 8px / 2px; // Uses +, does division}

Number OperationsWhat about this ?p { $font-size: 10px; $line-height: 8px; font: $font-size / $line-height;}

Number OperationsWhat about this ?p { $font-size: 10px; $line-height: 8px; font: $font-size / $line-height;} ⌘SOuch...p { font: 1.25;}

Interpolation#{...} avoid operationsp { $font-size: 10px; $line-height: 8px; font: #{$font-size} / #{$line-height};}

Interpolation#{...} avoid operationsp { $font-size: 10px; $line-height: 8px; font: #{$font-size} / #{$line-height};} ⌘SNicep { font: 10px / 8px;}

Interpolation#{...} can be used for...$className: foo;$property: padding;p.#{$className} { #{$property}: 10px;} ⌘STemplating ?p.foo { padding: 10px;}

Color OperationsEasy to understandp { color: #010203 + #040506;}a { color: #010203 * 2;}b { color: rgba(…) + rgba(…);} ⌘Sp {color: #050709;}a {color: #020406;}b {color: rgba(…);}

Number FunctionsSounds familiarround(), ceil(), floor(), abs(), percentage()$width: 960px;$columns: 14;div { width: round($width / $columns);} ⌘Sdiv { width: 69px;}

Color FunctionsLazy RGBA, yay !$my-color: rgba(#b4d455, 0.5);Mutators$my-color: mix(red, blue);$my-color: lighten(red, 20%);$my-color: darken(red, 20%);$my-color: transparentize($my-color, 0.5);$my-color: opacify($my-color, 0.5);$my-color: grayscale(#b4d455);$my-color: invert(#b4d455);$my-color: saturate(#b4d455, 10%);$my-color: adjust-hue(#b4d455, 10%);// And more…

Color FunctionsGetters (aka Accessors)$red-component: red($my-color);$green-component: green($my-color);$blue-component: blue($my-color);$alpha-component: alpha($my-color);$hue-component: hue($my-color);$sat-component: saturation($my-color);$light-component: lightness($my-color);Setters$my-color: adjust-color($my-color, $green: -55);$my-color: scale-color($my-color, $green: 10%);$my-color: change-color($my-color, $green: 255);

and more...http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

Killer Feature #2

NestingPropertiesarticle { background: { color: transparent; image: url("/img/bg.png"); origin: content-box; position: right center; repeat: no-repeat; size: 100px 100px; }} ⌘Sarticle { background-color: transparent; background-image: url("/img/bg.png"); background-origin: content-box; background-position: right center; background-repeat: no-repeat; background-size: 100px 100px;}

NestingRulesh1 { font-size: 200%; a { text-decoration: none; &:hover { text-decoration: underline; } }} ⌘Sh1 {font-size: 200%;}h1 a {text-decoration: none;}h1 a:hover {text-decoration: underline;}

NestingRulesh1 { font-size: 200%; & means this a { text-decoration: none; &:hover { text-decoration: underline; } }} ⌘Sh1 {font-size: 200%;}h1 a {text-decoration: none;}h1 a:hover {text-decoration: underline;}

WarningRules Nesting helps you write more typing less

Warning But !

WarningDon’t forget about Performance

WarningSelectors doesn’t needto reﬂect your DOM...

Nesting abuse#wrapper { section { article { h2 { font-size: 200%; a { color: red; &:hover { text-decoration: underline; } } } p { text-align: justify; } } }}

Control Directives@if @else @for @each @whileTrivial@if 1 + 1 == 2 { width: 400px;} @else { width: 200px;}Grids@for $i from 1 through 10 { .col-#{$i} { width: $i * 10px; }}

Don’t need it ?

Don’t use it !

Modularity

Don’t use @importhttp://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Don’t use @import Use @import !

Killer Feature #3

@import reset.scss html, body, div, span, object, iframe,style.scss h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr...@import "reset", "header"; header.scss ⌘S header { height: 100px; font-size: 200%; }style.csshtml, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote,pre, abbr............header { height: 100px; font-size: 200%;}

Make your own Abstractions

Killer Feature #4

FunctionsDeﬁne with @function@function round-by($value, $factor: 1) { @return round($value / $factor) * $factor;}div { width: round-by(1337px, 20);} ⌘Sdiv { width: 1340px;}

Killer Feature #5

MixinsDeﬁne with @mixin, use with @include@mixin link-hover-effect($color) { color: $color; &:hover { color: darken($color, 10%); }}article a { @include link-hover-effect( blue);} ⌘Sarticle a { color: blue;}article a:hover { color: #0000cc;}

Mixins augment styleFunctions return values

Fixing the Bad PartsVariablesDRYModularityFunctionsSeparation of ConcernsCSS3 vs.Vendor preﬁxing

Fixing the Bad PartsVariables Yep !DRYModularityFunctionsSeparation of ConcernsCSS3 vs.Vendor preﬁxing

Fixing the Bad PartsVariables Yep !DRY Nesting & Mixins!ModularityFunctionsSeparation of ConcernsCSS3 vs.Vendor preﬁxing

Fixing the Bad PartsVariables Yep !DRY Nesting & Mixins!Modularity Imports !FunctionsSeparation of ConcernsCSS3 vs.Vendor preﬁxing

Fixing the Bad PartsVariables Yep !DRY Nesting & Mixins!Modularity Imports !Functions Yep !Separation of ConcernsCSS3 vs.Vendor preﬁxing

Fixing the Bad PartsVariables Yep !DRY Nesting & Mixins!Modularity Imports !Functions Yep !Separation of Concerns ?CSS3 vs.Vendor preﬁxing ?

Fixing the Bad PartsVariables Yep !DRY Nesting & Mixins!Modularity Imports !Functions Yep !Separation of Concerns Mixins ?CSS3 vs.Vendor preﬁxing ?

Separation of ConcernsClearﬁx example<div class="clearfix"> <article>Lorem ipsum</article> <article>Lorem ipsum</article> <article>Lorem ipsum</article></div><div class="clearfix"> <article>Lorem ipsum</article> <article>Lorem ipsum</article> <article>Lorem ipsum</article></div>

Separation of ConcernsClearﬁx example<div> <article>Lorem ipsum</article> <article>Lorem ipsum</article> <article>Lorem ipsum</article></div><div> <article>Lorem ipsum</article> <article>Lorem ipsum</article> <article>Lorem ipsum</article></div>

@mixin Solution@mixin clearfix { zoom: 1; &:before, &:after { content: "0020"; display: block; height: 0; visibility: hidden; } &:after { clear: both; }}div { @include clearfix;}

@mixin Solution Style will be repeated for every mixin uses div { zoom: 1; } div:before, div:after { content: "0020";⌘S display: block; height: 0; visibility: hidden; } div:after { clear: both; }

@mixin Solution Style will be repeated for every mixin uses div { zoom: 1; } div:before, div:after { content: "0020";⌘S display: block; height: 0; visibility: hidden; } div:after { clear: both; } There’s a better way...

Killer Feature #6

Inheritance@extend is at selectorswhat @mixin is for styles

How @extend works.box { border: 1px solid blue; padding: 20px;}.error-message { @extend .box; border-color: red; color: red;} ⌘S.box, .error-message { border: 1px solid blue; padding: 20px;}.error-message { border-color: red; color: red;}

@extend Solution.clearfix { zoom: 1; }.clearfix:before, .clearfix:after { content: "0020"; display: block;....clearfix:after { clear: both; }div { @extend .clearfix;} ⌘S.clearfix, div { zoom: 1; }.clearfix:before, div:before, .clearfix:after, div:after {....clearfix:after, div:after { clear: both; }

@extend more...@import "_reset", "_grid", "_box";div { @extend .clearfix; @extend .grid-12;}article { @extend .box; @extend .col-4;}

Killer Feature #7

Skipping Technical Infosgem install compass http://compass-style.org/install/

Compass is ameta-framework

It helps you writeyour own Framework

Boilerplate

Extensions

Good practices

It comes with 2 frameworksCore

CoreDesign agnostic

CoreProvides mixins for• CSS3 : no more vendor preﬁxes• Typography : links, lists, text helpers• Utilities : spriting the good way, others...

CSS3 mixinsBorder radiusdiv { @include border-radius(5px);} ⌘Sdiv { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;}

CSS3 mixinsBox Shadowsdiv { @include box-shadow(rgba(black, 0.5) 0 2px 4px);} ⌘Sdiv { -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 2px 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 2px 4px; -o-box-shadow: rgba(0, 0, 0, 0.5) 0 2px 4px; box-shadow: rgba(0, 0, 0, 0.5) 0 2px 4px;}

CSS3 mixinsGradientsdiv { @include background(linear-gradient(top, red, green 50%, blue));} ⌘Sdiv { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%,#ff0000), color-stop(50%, #008000), color-stop(100%, #0000ff)); background: -webkit-linear-gradient(top, #ff0000, #008000 50%, #0000ff); background: -moz-linear-gradient(top, #ff0000, #008000 50%, #0000ff); background: -o-linear-gradient(top, #ff0000, #008000 50%, #0000ff); background: -ms-linear-gradient(top, #ff0000, #008000 50%, #0000ff); background: linear-gradient(top, #ff0000, #008000 50%, #0000ff);}

CSS3 mixinsGradientsdiv { @include background(linear-gradient(top, red, green 50%, blue));} ⌘Sdiv { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%,#ff0000), color-stop(50%, #008000), color-stop(100%, #0000ff)); background: -webkit-linear-gradient(top, #ff0000, #008000 50%, #0000ff); background: -moz-linear-gradient(top, #ff0000, #008000 50%, #0000ff);} Solves inconsistency background: background: background: -o-linear-gradient(top, #ff0000, #008000 50%, #0000ff); -ms-linear-gradient(top, #ff0000, #008000 50%, #0000ff); linear-gradient(top, #ff0000, #008000 50%, #0000ff);

CSS3 mixinsTransformsdiv { @include rotate(20deg);} ⌘Sdiv { -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg);}

More CSS3 mixinsbackground-clipbackground-originbackground-sizeboxbox-sizingcolumnsopacitytransformtransitionand more...

SpritingMagic imports@import "icons/*.png";@include all-icons-sprites;

SpritingMagic imports@import "icons/*.png";@include all-icons-sprites; ⌘S.icons-sprite, .icons-tick, .icons-user, .icons-wrench { background: url(/img/icons-scc2e7acafa.png) no-repeat;}.icons-tick { background-position: 0 0;}.icons-user { background-position: 0 -16px;}.icons-wrench { background-position: 0 -32px;}

SpritingMagic imports@import "icons/*.png";@include all-icons-sprites; ⌘S.icons-sprite, .icons-tick, .icons-user, .icons-wrench { background: url(/img/icons-scc2e7acafa.png) no-repeat;}.icons-tick { + background-position: 0 0;}.icons-user { background-position: 0 -16px;}.icons-wrench { background-position: 0 -32px;}

SpritingMagic imports@import "icons/*.png";@include all-icons-sprites; ⌘S.icons-sprite, .icons-tick, .icons-user, .icons-wrench { background: url(/img/icons-scc2e7acafa.png) no-repeat;}.icons-tick { + background-position: 0 0;} uses @extend.icons-user { background-position: 0 -16px;}.icons-wrench { background-position: 0 -32px;}

SpritingMagic imports@import "icons/*.png";@include all-icons-sprites;.icons-sprite { width: 16px; height: 16px;} ⌘S....icons-sprite, .icons-tick, .icons-user, .icons-wrench { width: 16px; height: 16px;}

Fixing the Bad PartsVariables Yep !DRY Nesting & Mixins!Modularity Imports !Functions Yep !Separation of Concerns Mixins & Inheritance !CSS3 vs.Vendor preﬁxing Compass !

Performance trick

Save HTTP Requests

Save HTTP Requests but don’t abuse

Include imagesdiv { background: url("icons/tick.png") no-repeat;}

Include imagesdiv { background: inline-image("icons/tick.png") no-repeat;}

Include imagesdiv { background: inline-image("icons/tick.png") no-repeat;} ⌘Sbase64 FTW !div { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhxJREFUeNpi/P//PwMlgImBQsACIhhnCAFZjEAGkANy0B8gwQ00m5kRogpEMYHl5YF4LZBXw/D3/47/Ea/xuOD7PwaGX1AMMvDvfwGGf/8nprkkGQPZLUAVHqR4gY3hH0Ofoby+6ZcvXxjinWL0Gf4wtMC9QAAwAjXXK0jIO8gLyUl9/Pzx98Fjh24AXdOA7gIPoP/PwJwGdvoPoNP/MGQIcwkGq4mrKHz5+uXf0UtH7wBdMRGodgvCgP9ATX/+tyT5JxqCaDAfIu7DwcSWJckjqfzgwQOGU5dP3f3w4cNSoJq5DL//I0Xjn38tMX4xes+ePWOK8IowAPGBmnNZ/jPVS4vLqH7985Xl5YcXDz99+rAJGIDtQAxxIcKA/zVLViy8xM7J9uvU7VPMDnaOOkAb4sVkxTV+sPxgf/fhzdOP797vZ/gLjD4GBojObT8gAQRKiYx9/AxADaAwaDF2NtN6+vMZpwCnAMP7b+8Zfrz49vrj3fdHGJgZkhhYmT4w7P4J1wzWCyY8OBgY5JiBmBFsiLSdvMYP3l/cv1/+/PD57Psz/5kYEhgO/H4K1owEEAYwQlOcAtAQc2YPBmnGFi4TfpnvFz7d+f/wXyrD8T/XGR79w4hfZANAYcELxAJAzMdgzGTJoMOQxnDmfyfD1f9XgGIgq39AaRD+xQDyNBDADAA5gR2IOaA0MzRX/IPiP1D8F4n+BzeAEgAQYAC7HATaTnWSLQAAAABJRU5ErkJggg==) no-repeat;}

Less HTTP Requests butMore Ko in your CSS

BTW...

Configurationconfig.rb# You can select your preferred output style hereoutput_style = :compressedstyle.scssdiv { @include border-radius(5px); @include box-shadow(rgba( black, 0.5) 0 2px 4px); @include background(linear-gradient(top, red, green 50%, blue)); @include rotate(20deg);} ⌘Sstyle.css minifieddiv{-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;-moz-box-shadow:rgba(0,0,0,0.5) 0 2px 4px;-webkit-box-shadow:rgba(0,0,0,0.5) 0 2px4px;-o-box-shadow:rgba(0,0,0,0.5) 0 2px 4px;box-shadow:rgba(0,0,0,0.5) 0 2px 4px;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0000), color-stop(50%, #008000), color-stop(100%,#0000ff));background:-webkit-linear-gradient(top, #ff0000,#008000 50%,#0000ff);background:-moz-linear-gradient(top, #ff0000,#008000 50%,#0000ff);background:-o-linear-gradient(top, #ff0000,#00800050%,#0000ff);background:-ms-linear-gradient(top, #ff0000,#008000 50%,#0000ff);background:linear-gradient(top,

.talk:after { content: "Thanks";}

More infoshttp://sass-lang.com/http://compass-style.org/http://nex-3.com/http://chriseppstein.github.com/http://thesassway.com/

ParisJS #11 : Sass & Compass

by Julien Zee

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 6

Statistics