Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Web Development with      Sass and CoffeeScript      Brian P. HoganBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipe...
Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
What about you?Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
Web pages run on CSS               and JavaScriptBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   Rate this ...
CSS feels limited                   and repetitiveBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   Rate this...
and many people don’t            really understand               JavaScriptBrian P. Hogantwitter: @bphoganwww.webdevelopme...
Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
We need to use          better tools to build            modern web apps.Brian P. Hogantwitter: @bphoganwww.webdevelopment...
CoffeeScript lets us          write complex JS with             simpler syntax.Brian P. Hogantwitter: @bphoganwww.webdevel...
Sass gives us                extensions to CSS.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   Rate this ta...
Sass + CoffeeScript +           automated workflowBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   Rate this...
CoffeeScriptBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com     Rate this talk at http://spkr8.com/t/8682
It’s more of a new                syntax than a new                     language.Brian P. Hogantwitter: @bphoganwww.webdev...
Some jQuery                           $(function() {                               $("a#get").click(function(e) {         ...
in CoffeeScript                           $ ->                             $("a#get").click (e) ->                        ...
CoffeeScript borrows            from Python and Ruby                  syntax.Brian P. Hogantwitter: @bphoganwww.webdevelop...
CoffeeScript uses        significant whitespace              for scope.Brian P. Hogantwitter: @bphoganwww.webdevelopmentre...
CoffeeScript compiles          to regular, plain old               JavaScript.Brian P. Hogantwitter: @bphoganwww.webdevelo...
Declaring variables and objects                                               var box, colors, firstName, lastName;      f...
JavaScript functions        // function declaration. Visible anywhere (hoisting)          (function hello(name){          ...
Function declaration in CoffeeScript       hello ->         alert "Hello"       hello (name) ->         alert "Hello #{nam...
CoffeeScript uses function expressions.       hello (name) ->         alert "Hello #{name}!"        var hello = function(n...
New syntax              means new features.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   Rate this talk a...
a jQuery example                $(function() {                  var displayError, displaySuccess, url;                  $(...
jQuery $(function(){})                $ ->                  $("form").submit (event) ->                     event.preventD...
jQuery event handler                $ ->                  $("form").submit (event) ->                     event.preventDef...
jQuery $.ajax                $ ->                  $("form").submit (event) ->                     event.preventDefault() ...
success and error callbacks                $ ->                  $("form").submit (event) ->                     event.pre...
-> leaves (this) scope alone.                $ ->                  $("form").submit (event) ->                     event.p...
=>Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
=> binds this to the function body                $ ->                  $("form").submit (event) ->                     ev...
ComprehensionsBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
Simple iteration                  alert color for color in ["red", "green", "blue"]         var colors = ["red", "green", ...
“for in”         people = [           {name: "Homer", age: 42}           {name: "Bart", age: 10}         ]         for per...
That’s just the                        beginning.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   Rate this ...
Existential operator (?)          total ?= 0         if (typeof total !== "undefined" && total !== null) {            tota...
Object-oriented                        JavaScriptBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   Rate this ...
Classes                         var Person, p;                         Person = (function() {                           fu...
Classes                         var Person, p;                         Person = (function() {                           fu...
We can even extend classes!       class basicWindow         constructor: ->                      class mainWindow extends ...
How do we use it?                                In the web browser itself                                via Node.js     ...
In the browser?                       <script language="text/coffeescript">                         people = [            ...
With Node.js              Install Node.js              Install npm              npm install -g coffee-script              ...
Ruby and Guard              Install Ruby              gem install guard-coffeescript              In our project          ...
Guard watches input      folders for changes      and writes output      files.Brian P. Hogantwitter: @bphoganwww.webdevel...
Guard works with Sass      too.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   Rate this talk at http://spk...
Sass                                Syntactically Awesome                                StylesheetsBrian P. Hogantwitter:...
Sass gives CSS      everything programmers      want.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   Rate t...
CSS                                .sidebar {                                  color: #000;                               ...
CSS                                .sidebar {                                  color: #000;                               ...
CSS                                .sidebar {                                  color: #000;                               ...
Sass to      the rescue!Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/...
Variables!                                $measure: 20px                                $color: #ce4dd6                   ...
Variables and helper functions!                                $measure: 20px                                $color: #ce4d...
Scope with nesting                                $measure: 20px                                $color: #ce4dd6           ...
Indented Sass                                                SCSS         $measure: 20px                             $meas...
But wait...          there’s more!Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   Rate this talk at http://...
Modularization            _mixins.scss                    @import "mixins";                                            @im...
Reusable Functions (mixins)                                             blockquote {      @mixin rounded($radius){        ...
Mixins + Interation + Variables            @mixin shadow($x, $y, $offset, $color)              @each $prefix in "", -moz-,...
Mixins + Interation + Variables            @mixin shadow($x, $y, $offset, $color)              @each $prefix in "", -moz-,...
Create well-organized          folders and libraries             of stylesheets.Brian P. Hogantwitter: @bphoganwww.webdeve...
or use Compass.                   http://compass-style.org/Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   ...
Compass has helpers             @import compass             @include box-shadow(#ddd 5px 5px 5px)                       bo...
How do we use it?                                via Sass                                via a supported IDE              ...
with Sass              Install Ruby              $ gem install sass              $ sass --watch sass:stylesheetsBrian P. H...
Ruby and Guard              Install Ruby              gem install guard-sass              In our project                  ...
Using Sass and                         CoffeeScript                           togetherBrian P. Hogantwitter: @bphoganwww.w...
Mindscape Web                            Workbench               http://www.mindscapehq.com/products/web-workbenchBrian P....
Ruby and Guard              Install Ruby              gem install guard-sass guard-              coffeescript             ...
Let’s talk deploymentBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8...
Rails 3.1 and                           CapistranoBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   Rate this...
Asset PackagingBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
So instead of this...             <link rel="stylesheet" href="stylesheets/layout.css">             <link rel="stylesheet"...
...let’s do this:             <link rel="stylesheet" href="assets/app.css">             <script src="assets/app.js"></scri...
Ruby + Guard + Jammit                      Install Ruby                      $ gem install guard-jammitBrian P. Hogantwitt...
Sass, CoffeeScript,                Jammit              watch Sass files for changes                   Place output css in ...
config/assets.yml               stylesheets:                 app:                   - tmp/app.css                   - tmp/...
Guardfile                guard "coffeescript", :input => "coffeescripts", :output => "tmp"                guard "sass", :i...
Jammit places                          files in                        public/assets            <link rel="stylesheet" hre...
Deploy with Rake                   SERVER = "yourhost.com"                   USERNAME = "yourusername"                   R...
qedproject      https://github.com/napcs/qedprojectBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com       Rate...
qedproject              Install Ruby              gem install qedproject              qedproject myapp -c -s -a -l jquery ...
DemoBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com    Rate this talk at http://spkr8.com/t/8682
Short syntax                     Nested                                           Selectors          Catch errors at      ...
With asset packagingand automated deployment...Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   Rate this ta...
...CoffeeScript and Sass      make developers happy.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com   Rate th...
Questions?    http://pragprog.com/book/wbdev/web-            development-recipesBrian P. Hogantwitter: @bphoganwww.webdeve...
Prochain SlideShare
Chargement dans…5
×

Web Development with CoffeeScript and Sass

11 147 vues

Publié le

Twin Cities Code Camp 11 talk.

Publié dans : Technologie, Design
  • Soyez le premier à commenter

Web Development with CoffeeScript and Sass

  1. 1. Web Development with Sass and CoffeeScript Brian P. HoganBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  2. 2. Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  3. 3. What about you?Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  4. 4. Web pages run on CSS and JavaScriptBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  5. 5. CSS feels limited and repetitiveBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  6. 6. and many people don’t really understand JavaScriptBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  7. 7. Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  8. 8. We need to use better tools to build modern web apps.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  9. 9. CoffeeScript lets us write complex JS with simpler syntax.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  10. 10. Sass gives us extensions to CSS.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  11. 11. Sass + CoffeeScript + automated workflowBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  12. 12. CoffeeScriptBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  13. 13. It’s more of a new syntax than a new language.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  14. 14. Some jQuery $(function() { $("a#get").click(function(e) { .get("/ajax/get", {name: "John",time: "2pm"}, function(data) { $("#result").html(data); } ); }); });Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  15. 15. in CoffeeScript $ -> $("a#get").click (e) -> $.get "/ajax/get", {name: "John", time: "2pm"}, (data) -> $("#result").html(data)Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  16. 16. CoffeeScript borrows from Python and Ruby syntax.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  17. 17. CoffeeScript uses significant whitespace for scope.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  18. 18. CoffeeScript compiles to regular, plain old JavaScript.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  19. 19. Declaring variables and objects var box, colors, firstName, lastName; firstName = "Homer" firstName = "Homer"; lastName = "Simpson" lastName = "Simpson"; colors = ["Green", "Blue", "Red"] colors = ["Green", "Blue", "Red"]; box = box = { height: 40 height: 40, width: 60 width: 60, color: red color: red };Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  20. 20. JavaScript functions // function declaration. Visible anywhere (hoisting) (function hello(name){ alert("Hello " + name + "!"); } // function expression, visible to the scope of the var var hello = function(name){ alert("Hello " + name + "!"); }Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  21. 21. Function declaration in CoffeeScript hello -> alert "Hello" hello (name) -> alert "Hello #{name}" -> (thin arrow)Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  22. 22. CoffeeScript uses function expressions. hello (name) -> alert "Hello #{name}!" var hello = function(name){ alert("Hello " + name + "!"); } #{} interpolates strings.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  23. 23. New syntax means new features.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  24. 24. a jQuery example $(function() { var displayError, displaySuccess, url; $("form").submit(function(event) {}); event.preventDefault(); url = $(this).attr("href"); $.ajax({ url: url + ".js", success: function(data, status, xhr) { displaySuccess($("#form")); }, error: function(xhr, status, error) { displayError(error); } }); displaySuccess = function(form) { var element; element = $("<p>Thanks for signing up!").addClass("success"); element.insertAfter(form); form.hide(); }; displayError = function(error) { $("#notice").attr("html", error); }; });Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  25. 25. jQuery $(function(){}) $ -> $("form").submit (event) -> event.preventDefault() url = $(this).attr "href" $.ajax url: url + ".js" success: (data, status, xhr) -> displaySuccess($("form")) error: (xhr, status, error) -> displayError error displaySuccess = (form) -> element = $("<p>Thanks for signing up!").addClass("success") element.insertAfter form form.hide() displayError = (error) -> $("#notice").attr "html", errorBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  26. 26. jQuery event handler $ -> $("form").submit (event) -> event.preventDefault() url = $(this).attr "href" $.ajax url: url + ".js" success: (data, status, xhr) -> displaySuccess($("form")) error: (xhr, status, error) -> displayError error displaySuccess = (form) -> element = $("<p>Thanks for signing up!").addClass("success") element.insertAfter form form.hide() displayError = (error) -> $("#notice").attr "html", errorBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  27. 27. jQuery $.ajax $ -> $("form").submit (event) -> event.preventDefault() url = $(this).attr "href" $.ajax url: url + ".js" success: (data, status, xhr) -> displaySuccess($("form")) error: (xhr, status, error) -> displayError error displaySuccess = (form) -> element = $("<p>Thanks for signing up!").addClass("success") element.insertAfter form form.hide() displayError = (error) -> $("#notice").attr "html", errorBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  28. 28. success and error callbacks $ -> $("form").submit (event) -> event.preventDefault() url = $(this).attr "href" $.ajax url: url + ".js" success: (data, status, xhr) -> displaySuccess($("form")) error: (xhr, status, error) -> displayError error displaySuccess = (form) -> element = $("<p>Thanks for signing up!").addClass("success") element.insertAfter form form.hide() displayError = (error) -> $("#notice").attr "html", errorBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  29. 29. -> leaves (this) scope alone. $ -> $("form").submit (event) -> event.preventDefault() url = $(this).attr "href" $.ajax url: url + ".js" success: (data, status, xhr) -> displaySuccess($("form")) error: (xhr, status, error) -> displayError error displaySuccess = (form) -> element = $("<p>Thanks for signing up!").addClass("success") element.insertAfter form form.hide() displayError = (error) -> $("#notice").attr "html", errorBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  30. 30. =>Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  31. 31. => binds this to the function body $ -> $("form").submit (event) -> event.preventDefault() url = $(this).attr "href" $.ajax url: url + ".js" success: (data, status, xhr) => displaySuccess($(this)) error: (xhr, status, error) -> displayError error displaySuccess = (form) -> element = $("<p>Thanks for signing up!").addClass("success") element.insertAfter form form.hide() displayError = (error) -> $("#notice").attr "html", errorBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  32. 32. ComprehensionsBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  33. 33. Simple iteration alert color for color in ["red", "green", "blue"] var colors = ["red", "green", "blue"]; for (i = 0, length = colors.length; i < length; i++) { var color = colors[i]; alert(color); }Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  34. 34. “for in” people = [ {name: "Homer", age: 42} {name: "Bart", age: 10} ] for person in people alert "#{person.name} is #{person.age} years old"Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  35. 35. That’s just the beginning.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  36. 36. Existential operator (?) total ?= 0 if (typeof total !== "undefined" && total !== null) { total; } else { total = 0; };Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  37. 37. Object-oriented JavaScriptBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  38. 38. Classes var Person, p; Person = (function() { function Person(options) { this.firstname = options.firstname; this.lastname = options.lastname; this.age = options.age; } Person.prototype.fullname = function() { return "" + this.firstname + " " + this.lastname; }; return Person; })(); p = new Person({ firstname: "Brian", lastname: "Hogan" }); alert(p.fullname());Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  39. 39. Classes var Person, p; Person = (function() { function Person(options) { this.firstname = options.firstname; this.lastname = options.lastname; class Person this.age = options.age; constructor: (options) -> } @firstname = options.firstname Person.prototype.fullname = function() { @lastname = options.lastname return "" + this.firstname + " " + this.lastname; @age = options.age }; return Person; fullname: -> })(); "#{@firstname} #{@lastname}" p = new Person({ firstname: "Brian", lastname:="Hogan" p new Person }); alert p.fullname() alert(p.fullname());Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  40. 40. We can even extend classes! class basicWindow constructor: -> class mainWindow extends basicWindow @window = Ti.UI.createWindow({ constructor: -> backgroundColor: "#F5F5ED" super }) @window.backgroundColor = "#fff" open: -> @window.open()Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  41. 41. How do we use it? In the web browser itself via Node.js With Ruby, via GuardBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  42. 42. In the browser? <script language="text/coffeescript"> people = [ {name: "Homer", age: 42} {name: "Bart", age: 10} ] for person in people do (person) -> alert "#{person.name} is #{person.age} years old" </script> <script src="coffee-script.js"></script> (this is slow.)Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  43. 43. With Node.js Install Node.js Install npm npm install -g coffee-script coffee --compile --output js/ coffee/ coffee -o js/ -cw coffee/Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  44. 44. Ruby and Guard Install Ruby gem install guard-coffeescript In our project guard init coffeescript guardBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  45. 45. Guard watches input folders for changes and writes output files.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  46. 46. Guard works with Sass too.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  47. 47. Sass Syntactically Awesome StylesheetsBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  48. 48. Sass gives CSS everything programmers want.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  49. 49. CSS .sidebar { color: #000; border: 1px solid #000; } .sidebar p { margin-bottom: 20px; } .sidebar ul { margin-bottom: 10px; } .sidebar h1 { margin-bottom: 0; } .main{ color: #000; }Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  50. 50. CSS .sidebar { color: #000; border: 1px solid #000; } .sidebar p { margin-bottom: 20px; } .sidebar ul { margin-bottom: 10px; } .sidebar h1 { margin-bottom: 0; } .main{ color: #000; }Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  51. 51. CSS .sidebar { color: #000; border: 1px solid #000; } .sidebar p { margin-bottom: 20px; } .sidebar ul { margin-bottom: 10px; } .sidebar h1 { margin-bottom: 0; } .main{ color: #000; }Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  52. 52. Sass to the rescue!Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  53. 53. Variables! $measure: 20px $color: #ce4dd6 .sidebar background-olor: $color border: 1px solid lighten($color, 20%) p margin-bottom: $measure ul margin-bottom: $measure / 2 h1 margin-bottom: 0Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  54. 54. Variables and helper functions! $measure: 20px $color: #ce4dd6 .sidebar background-olor: $color border: 1px solid lighten($color, 20%) p margin-bottom: $measure ul margin-bottom: $measure / 2 h1 margin-bottom: 0Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  55. 55. Scope with nesting $measure: 20px $color: #ce4dd6 .sidebar background-olor: $color border: 1px solid lighten($color, 20%) p margin-bottom: $measure ul margin-bottom: $measure / 2 h1 margin-bottom: 0Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  56. 56. Indented Sass SCSS $measure: 20px $measure: 20px; $color: #000 $color: #000; .sidebar .sidebar{ color: $color color: $color; border: 1px solid $color border: 1px solid $color; p p{ margin-bottom: $measure margin-bottom: $measure; } ul margin-bottom: $measure / 2 ul{ margin-bottom: $measure / 2; h1 } margin-bottom: 0 h1{ margin-bottom: 0; } }Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  57. 57. But wait... there’s more!Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  58. 58. Modularization _mixins.scss @import "mixins"; @import "reset"; @import "base"; _reset.scss @import "fonts"; _base.scss _fonts.scssBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  59. 59. Reusable Functions (mixins) blockquote { @mixin rounded($radius){ width: 225px; border-radius: $radius; padding: 15px 30px; -moz-border-radius: $radius; margin: 0; -webkit-border-radius: $radius; position: relative; } background: #faa; @include rounded(20px); } .button { cursor: pointer; color: #000; text-decoration: none; @include rounded(12px); }Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  60. 60. Mixins + Interation + Variables @mixin shadow($x, $y, $offset, $color) @each $prefix in "", -moz-, -webkit-, -o-, -khtml- #{$prefix}box-shadow: $x $y $offset $colorBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  61. 61. Mixins + Interation + Variables @mixin shadow($x, $y, $offset, $color) @each $prefix in "", -moz-, -webkit-, -o-, -khtml- #{$prefix}box-shadow: $x $y $offset $color box-shadow: 5px 5px 5px #dddddd; -moz-box-shadow: 5px 5px 5px #dddddd; -webkit-box-shadow: 5px 5px 5px #dddddd; -o-box-shadow: 5px 5px 5px #dddddd; -khtml-box-shadow: 5px 5px 5px #dddddd; }Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  62. 62. Create well-organized folders and libraries of stylesheets.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  63. 63. or use Compass. http://compass-style.org/Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  64. 64. Compass has helpers @import compass @include box-shadow(#ddd 5px 5px 5px) box-shadow: 5px 5px 5px #dddddd; -moz-box-shadow: 5px 5px 5px #dddddd; -webkit-box-shadow: 5px 5px 5px #dddddd; -o-box-shadow: 5px 5px 5px #dddddd;}Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  65. 65. How do we use it? via Sass via a supported IDE With Ruby, via GuardBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  66. 66. with Sass Install Ruby $ gem install sass $ sass --watch sass:stylesheetsBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  67. 67. Ruby and Guard Install Ruby gem install guard-sass In our project guard init sass guardBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  68. 68. Using Sass and CoffeeScript togetherBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  69. 69. Mindscape Web Workbench http://www.mindscapehq.com/products/web-workbenchBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  70. 70. Ruby and Guard Install Ruby gem install guard-sass guard- coffeescript In our project guard init sass guard init coffeescript guardBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  71. 71. Let’s talk deploymentBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  72. 72. Rails 3.1 and CapistranoBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  73. 73. Asset PackagingBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  74. 74. So instead of this... <link rel="stylesheet" href="stylesheets/layout.css"> <link rel="stylesheet" href="stylesheets/style.css"> <script src="javascripts/jquery-1.7.0.min.js"></script> <script src="javascripts/app.js"></script>Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  75. 75. ...let’s do this: <link rel="stylesheet" href="assets/app.css"> <script src="assets/app.js"></script>Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  76. 76. Ruby + Guard + Jammit Install Ruby $ gem install guard-jammitBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  77. 77. Sass, CoffeeScript, Jammit watch Sass files for changes Place output css in tmp/ folder watch CoffeeScript files for changes Place output js in tmp/ folder Use Jammit to combine them.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  78. 78. config/assets.yml stylesheets: app: - tmp/app.css - tmp/style.css javascripts: app: - javascripts/jquery-1.6.4.js - tmp/app.jsBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  79. 79. Guardfile guard "coffeescript", :input => "coffeescripts", :output => "tmp" guard "sass", :input => "sass", :output => "tmp" guard "jammit" do watch(/^javascripts/(.*).js/) watch(/^stylesheets/(.*).css/) watch(/^tmp/(.*).js/) watch(/^tmp/(.*).css/) endBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  80. 80. Jammit places files in public/assets <link rel="stylesheet" href="assets/app.css"> <script src="assets/app.js"></script>Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  81. 81. Deploy with Rake SERVER = "yourhost.com" USERNAME = "yourusername" REMOTE_FOLDER = "/home/#{USERNAME}/yourhost.com" REMOTE_FOLDER = 22 require net/scp desc "compile CSS, js files" task :compile do require guard Guard.setup Guard::Dsl.evaluate_guardfile Guard::guards.each{|guard| guard.run_all} end desc "Deploy web site" task :deploy => :compile do Net::SSH.start(SERVER, USERNAME, {:port => PORT} ) do |ssh| ssh.sftp.rmdir File.join(REMOTE_FOLDER, "public") ssh.scp.upload! "public", REMOTE_FOLDER, :recursive => true end endBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  82. 82. qedproject https://github.com/napcs/qedprojectBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  83. 83. qedproject Install Ruby gem install qedproject qedproject myapp -c -s -a -l jquery creates app with Sass, CoffeeScript, Asset packaging, and jQuery Sets up Guard and a simple Rake file for deploymentBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  84. 84. DemoBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  85. 85. Short syntax Nested Selectors Catch errors at compile time Variables List Mixins Comprehensions Composition ClassesBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  86. 86. With asset packagingand automated deployment...Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  87. 87. ...CoffeeScript and Sass make developers happy.Brian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  88. 88. Questions? http://pragprog.com/book/wbdev/web- development-recipesBrian P. Hogantwitter: @bphoganwww.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

×