From cbe55a15baa83634dd145ea2ddfc6c21f36ba95c Mon Sep 17 00:00:00 2001 From: Hampton Catlin Date: Sun, 19 May 2013 12:18:21 -0700 Subject: [PATCH 01/12] nokogiri is no longer required --- Gemfile | 1 - Gemfile.lock | 2 -- 2 files changed, 3 deletions(-) diff --git a/Gemfile b/Gemfile index 558d871..f6e1db7 100644 --- a/Gemfile +++ b/Gemfile @@ -15,7 +15,6 @@ gem "redcarpet" # Better Typography gem "typogruby" -gem "nokogiri" # Styleguide generator gem "kss" diff --git a/Gemfile.lock b/Gemfile.lock index b6c460b..c88a11a 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -83,7 +83,6 @@ GEM mini_magick (3.4) subexec (~> 0.2.1) multi_json (1.3.6) - nokogiri (1.5.6) padrino-core (0.10.7) activesupport (~> 3.2.0) http_router (~> 0.10.2) @@ -158,7 +157,6 @@ DEPENDENCIES middleman-livereload middleman-smusher middleman-syntax - nokogiri redcarpet slim susy From c114f3f5ed14a5ab21c9f31276a8d41c8eb4b86f Mon Sep 17 00:00:00 2001 From: Hampton Catlin Date: Sun, 19 May 2013 12:40:13 -0700 Subject: [PATCH 02/12] subheading in title --- source/contact.haml | 1 - source/layouts/layout.haml | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) delete mode 100644 source/contact.haml diff --git a/source/contact.haml b/source/contact.haml deleted file mode 100644 index 4a7ecfc..0000000 --- a/source/contact.haml +++ /dev/null @@ -1 +0,0 @@ -%h2 Contact \ No newline at end of file diff --git a/source/layouts/layout.haml b/source/layouts/layout.haml index d7fe928..2981a76 100644 --- a/source/layouts/layout.haml +++ b/source/layouts/layout.haml @@ -10,7 +10,7 @@ %head %meta(charset="utf-8")/ - %title= data.page.title || "Sass" + %title= data.page.title || "Sass - CSS with super powers" %meta(name="description"){:content => data.page.description || "Syntactically Awesome Style Sheets"}/ = partial "layouts/shared/head_compatibility" From 01a8ef8c57abd6546ca45db364399d79be6fc599 Mon Sep 17 00:00:00 2001 From: Hampton Catlin Date: Sun, 19 May 2013 13:22:05 -0700 Subject: [PATCH 03/12] Making a racket by moving things around and writing new text. --- .../stylesheets/components/_get-started.scss | 2 +- source/get-started/install.haml | 53 ++++ source/guide.haml | 240 ++++++------------ source/index.html.haml | 153 +---------- source/layouts/shared/_banner.haml | 6 +- 5 files changed, 140 insertions(+), 314 deletions(-) create mode 100644 source/get-started/install.haml diff --git a/source/assets/stylesheets/components/_get-started.scss b/source/assets/stylesheets/components/_get-started.scss index 23927f1..9ac7989 100644 --- a/source/assets/stylesheets/components/_get-started.scss +++ b/source/assets/stylesheets/components/_get-started.scss @@ -15,7 +15,7 @@ @extend %clearfix-small-tablet; li { - @include span-columns(2); + @include span-columns(1); &:last-child { @include omega; } } diff --git a/source/get-started/install.haml b/source/get-started/install.haml new file mode 100644 index 0000000..5681166 --- /dev/null +++ b/source/get-started/install.haml @@ -0,0 +1,53 @@ +:markdown + # Enable Sass in your Project + + ## There are a couple of ways to start using Sass: + +%ol.get-started + %li.frameworks + .get-started-content + %h3 Frameworks + %p.illustration + %span.circle= image_tag "illustrations/command-line.png", :width => "48", :height => "48", :alt => "Framework Illustration" + %p.description + If you or your team is using a dynamic web language or framework, then chances are that Sass support is available. This is the most popular way to use Sass, but sometimes it does require some changes to you project. Here is just a partial list of the frameworks that have Sass support: + .call-to-action + %p= link_to "Rails", 'http://guides.rubyonrails.org/asset_pipeline.html', :class => 'button' + %p= link_to "Node.js", 'https://github.com/andrew/node-sass', :class => 'button' + %p= link_to "Drupal", 'http://drupal.org/project/sass', :class => 'button' + %p= link_to "CodeIgniter", 'http://getsparks.org/packages/sass/versions/HEAD/show', :class => 'button' + %p= link_to "Yii", 'http://www.yiiframework.com/extension/haml-and-sass/', :class => 'button' + %p= link_to ".net", 'http://libsassnet.codeplex.com/', :class => 'button' + %p= link_to "Joomla", 'http://www.joomlavision.com/started-sass/', :class => 'button' + + %p This is a very partial list. Just search the web for the name of your framework + Sass and its likely to come up. + %li.command-line + .get-started-content + %h3 Command Line + %p.illustration + %span.circle= image_tag "illustrations/command-line.png", :width => "48", :height => "48", :alt => "CLI Illustration" + / Description for Unix users + %p.description + Using Sass on the command line is as simple as using a few commands. To install Sass just type the following into the command line: + .call-to-action + / We'll try and point the user to either + %pre + :preserve + gem install sass + %p To learn how to compile your Sass files, please see our Command Line Reference + %p + = link_to "Command Line Guide", '/get-started/command-line#unix', :class => 'button' + + %p For Windows users, go check out the Sass for Windows Guide. + + %li.gui-application + .get-started-content + %h3 GUI Application + %p.illustration + %span.circle= image_tag "illustrations/gui.png", :width => "48", :height => "48", :alt => "GUI Illustration" + %p.description There are many free and paid GUI's that natively support Sass in them. This is the ideal start for the very non-technical user. + .call-to-action + %p= link_to "Scout (Mac, Free)", "http://mhs.github.io/scout-app/", :class => 'button' + %p= link_to "Compass.app ($10)", "http://compass.handlino.com/", :class => 'button' + %p= link_to "LiveReload ($9.95)", "http://livereload.com/", :class => 'button' + %p= link_to "CodeKit ($25)", "http://incident57.com/codekit/", :class => 'button' diff --git a/source/guide.haml b/source/guide.haml index 01e6710..d4213cd 100644 --- a/source/guide.haml +++ b/source/guide.haml @@ -1,200 +1,122 @@ -%h1 Documentation +.message + .container + Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. + = link_to "Go here", "/get-sass" + if you want to learn how to get everything setup. -:markdown - ## Installation +.container + .content + %h1 Sass Basics - ### Basic + %nav.slide-navigation + :markdown + * [Preprocessing](#1) + * [Variables](#2) + * [Nesting](#3) + * [Partials](#4) + * [Import](#5) + * [Mixins](#6) + * [Inheritance](#7) + * [Operators](#8) - Basic command line usage vs GUI. Send folks over to the get started section? + %ul.slides + %li + :markdown + ## Pre-processing - ### Rails + CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again. - ### Sinatra + Once you start tinkering with Sass, it will take your preprocessed Sass file and save it out as a normal CSS file that you can use in your web site. - ### Middleman + %li + :markdown + ## Variables - ### Nanoc + Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the $ symbol to make something a variable. Here's an example: - ### Drupal + = partial "code-snippets/homepage-variables-scss" - ### Node + :markdown + When the Sass is processed, it takes the variables we define for the $font-stack and $primary-color and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site. - --- + = partial "code-snippets/homepage-variables-css" - ## Options + %li + :markdown + ## Nesting - ### :style (nested, expanded, compact, compressed) + When you write HTML you've probably noticed that it has a fairly clear nested, visual hierarchy. CSS, on the other hand, isn't. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Here's an example of some typical styles for a sites navigation: - ### :syntax (sass, scss) + = partial "code-snippets/homepage-nesting-scss" - ### :property_syntax + :markdown + You'll notice that the ul, li, and a selectors are nested inside the nav selector. This is a great way to organize your CSS and make it more readable. When you generate the CSS you'll get something like this: - ### :cache + = partial "code-snippets/homepage-nesting-css" - ### :read_cache + %li + :markdown + ## Partials - ### :cache_store + You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS & help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should be generated into a CSS file. Sass partials are used with the @import directive. - ### :never_update + %li + :markdown + ## Import - ### :always_update + CSS has an import option that lets you split your CSS in to smaller, more maintainable portions. The only drawback is that each time you use @import in CSS it creates another HTTP request. Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file your importing into so you can serve a single CSS file to the web browser. - ### :always_check + Let's say you have a couple of Sass files, _reset.scss and base.scss. We want to import _reset.scss into base.scss. - ### :poll + = partial "code-snippets/homepage-import-1-scss" + = partial "code-snippets/homepage-import-2-scss" - ### :full_exception + :markdown - ### :template_location + Notice we're using @import 'reset'; in the base.scss file. When you import a file you don't need to include the file extension .scss Sass is smart and will figure it out for you. When you generate the CSS you'll get: - ### :css_location + = partial "code-snippets/homepage-import-css" - ### :cache_location + %li + :markdown + ## Mixins - ### :unix_newlines + Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here's an example for border-radius. - ### :filename + = partial "code-snippets/homepage-mixins-scss" - ### :line + :markdown + To create a mixin you use the @mixin directive and giving it a name. We've named our mixin border-radius. We're also using the variable $radius inside the parenthesis so we can pass in a radius of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin. When your CSS is generated it'll look like this: - ### :load_paths + = partial "code-snippets/homepage-mixins-css" - ### :filesystem_importer + %li + :markdown + ## Extend/Inheritance - ### :line_numbers + This is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. In our example we're going to create a simple series of messaging for errors, warnings and successes. - ### :debug_info/:trace_selectors options. + = partial "code-snippets/homepage-extend-scss" - ### :trace_selectors + :markdown + What the above code does is allow you to take the CSS properties in .message and apply them to .success, .error, & .warning. The magic happens with the generated CSS, and this helps you avoid having to write multiple class names on HTML elements. This is what it looks like: - ### :debug_info + = partial "code-snippets/homepage-extend-css" - ### :custom + %li + :markdown + ## Operators - ### :quiet + Doing math in your CSS is very helpful. Sass has a handful of standard math operators like `+`, `-`, `*`, `/`, and `%`. In our example we're going to do some simple math to calculate widths for an `aside` & `article`. - --- + = partial "code-snippets/homepage-operators-scss" - ## Nesting + :markdown + We've created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle. The generated CSS will look like: - ### Nested Rules + = partial "code-snippets/homepage-operators-css" - ### Nested Properties - ### Referencing Parent Selectors - - - - ## Operations - - ### Math (+, -, *, /, %) - - / Cover parenthesis here as well - - ### Relational (<, >, <=, >=, ==, !=) - - ### Colors - - ### Strings - - ### Boolean (and, or, not) - - - - ## @import - - ### Partials - - ### @import - - - - - ## Variables - - ### Defaults - - - - - ## Interpolation - - - - - ## Logic - - ### @if - - ### @for - - ### @each - - ### @while - - - - ## Mixins - - ### Create a mixin - - ### Using a mixin - - ### Arguments - - ### @content blocks - - - - - ## @extend - - ## Placeholder - - ## Gotchas - - - ## @media - - - - - ## Functions - - ### Custom Functions - - ### RGB - - ### HSL - - ### Opacity - - ### Strings - - ### Numbers - - ### Lists - - ### Introspective - - - - ## Debugging - - ### @debug - - ### @ward - - - - ## Comments - - --- - - ## Extending Sass - - ### Defining custom functions - - ### Cache Stores - - ### Custom Importers \ No newline at end of file + %ul.pagination + %li= link_to "Prev", "#", :class => "prev" + %li= link_to "Next", "#", :class => "next" \ No newline at end of file diff --git a/source/index.html.haml b/source/index.html.haml index 6eca292..7b04023 100644 --- a/source/index.html.haml +++ b/source/index.html.haml @@ -2,41 +2,9 @@ title: Sass | Syntactically Awesome Style Sheets --- -:markdown - # CSS with super powers - - Sass makes writing CSS fun again. Think of Sass as an extension of CSS3 that adds many missing features like nesting, variables, mixins & extend. - - ## There are a couple of ways to start using Sass: - -%ol.get-started - %li.command-line - .get-started-content - %h3 Command Line - %p.illustration - %span.circle= image_tag "illustrations/command-line.png", :width => "48", :height => "48", :alt => "CLI Illustration" - / Description for Unix users - %p.description - Using Sass on the command line is as simple as using a few commands. To install Sass just type the following into the command line: - .call-to-action - / We'll try and point the user to either - %pre - %code gem install sass - %p - = link_to "Command Line Guide", '/get-started/command-line#unix', :class => 'button' - - %p For Windows users, go check out the Sass for Windows Guide. - - %li.gui-application - .get-started-content - %h3 GUI Application - %p.illustration - %span.circle= image_tag "illustrations/gui.png", :width => "48", :height => "48", :alt => "GUI Illustration" - %p.description Get started quickly by installing Sass for Linux, Mac or Windows. - .call-to-action - %p= link_to "GUI Guide", "/get-started/gui", :class => "button" - %p= link_to "Download Compass.app", "#", :class => 'button' +%h1 CSS with superpowers +%p Sass is the most mature, stable CSS preprocessor in the world. It's been around for 7 years and is trusted by hundreds of development shops and companies around the world. - content_for :section_2 do @@ -49,119 +17,4 @@ title: Sass | Syntactically Awesome Style Sheets * [Release Notes](#) * [Fork Sass on Github](#) - .container - .content - %h1 Sass Features - - %nav.slide-navigation - :markdown - * [Preprocessing](#1) - * [Variables](#2) - * [Nesting](#3) - * [Partials](#4) - * [Import](#5) - * [Mixins](#6) - * [Inheritance](#7) - * [Operators](#8) - - %ul.slides - %li - :markdown - ## Pre-processing - - CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again. - - Once you start tinkering with Sass, it will take your preprocessed Sass file and save it out as a normal CSS file that you can use in your web site. - - %li - :markdown - ## Variables - - Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the $ symbol to make something a variable. Here's an example: - - = partial "code-snippets/homepage-variables-scss" - - :markdown - When the Sass is processed, it takes the variables we define for the $font-stack and $primary-color and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site. - - = partial "code-snippets/homepage-variables-css" - - %li - :markdown - ## Nesting - - When you write HTML you've probably noticed that it has a fairly clear nested, visual hierarchy. CSS, on the other hand, isn't. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Here's an example of some typical styles for a sites navigation: - - = partial "code-snippets/homepage-nesting-scss" - - :markdown - You'll notice that the ul, li, and a selectors are nested inside the nav selector. This is a great way to organize your CSS and make it more readable. When you generate the CSS you'll get something like this: - - = partial "code-snippets/homepage-nesting-css" - - %li - :markdown - ## Partials - - You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS & help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should be generated into a CSS file. Sass partials are used with the @import directive. - - %li - :markdown - ## Import - - CSS has an import option that lets you split your CSS in to smaller, more maintainable portions. The only drawback is that each time you use @import in CSS it creates another HTTP request. Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file your importing into so you can serve a single CSS file to the web browser. - - Let's say you have a couple of Sass files, _reset.scss and base.scss. We want to import _reset.scss into base.scss. - - = partial "code-snippets/homepage-import-1-scss" - = partial "code-snippets/homepage-import-2-scss" - - :markdown - - Notice we're using @import 'reset'; in the base.scss file. When you import a file you don't need to include the file extension .scss Sass is smart and will figure it out for you. When you generate the CSS you'll get: - - = partial "code-snippets/homepage-import-css" - - %li - :markdown - ## Mixins - - Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here's an example for border-radius. - - = partial "code-snippets/homepage-mixins-scss" - - :markdown - To create a mixin you use the @mixin directive and giving it a name. We've named our mixin border-radius. We're also using the variable $radius inside the parenthesis so we can pass in a radius of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin. When your CSS is generated it'll look like this: - - = partial "code-snippets/homepage-mixins-css" - - %li - :markdown - ## Extend/Inheritance - - This is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. In our example we're going to create a simple series of messaging for errors, warnings and successes. - - = partial "code-snippets/homepage-extend-scss" - - :markdown - What the above code does is allow you to take the CSS properties in .message and apply them to .success, .error, & .warning. The magic happens with the generated CSS, and this helps you avoid having to write multiple class names on HTML elements. This is what it looks like: - - = partial "code-snippets/homepage-extend-css" - - %li - :markdown - ## Operators - - Doing math in your CSS is very helpful. Sass has a handful of standard math operators like `+`, `-`, `*`, `/`, and `%`. In our example we're going to do some simple math to calculate widths for an `aside` & `article`. - - = partial "code-snippets/homepage-operators-scss" - - :markdown - We've created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle. The generated CSS will look like: - - = partial "code-snippets/homepage-operators-css" - - - %ul.pagination - %li= link_to "Prev", "#", :class => "prev" - %li= link_to "Next", "#", :class => "next" \ No newline at end of file + \ No newline at end of file diff --git a/source/layouts/shared/_banner.haml b/source/layouts/shared/_banner.haml index 26f327b..c5dfbeb 100644 --- a/source/layouts/shared/_banner.haml +++ b/source/layouts/shared/_banner.haml @@ -9,12 +9,10 @@ %h1= link_to image_tag("logo.png", :width => "80", :height => "60", :alt => "Sass"), "/" - - %nav.navigation(role="navigation") .container :markdown - * [Get Started](/get-started) - * [Guide](/guide) + * [Get Sass](/get-started/install) + * [Tutorial](/guide) * [Documentation](/documentation) * [Community](/community) \ No newline at end of file From b71f8acf90550153c2384781904078085a0e0e5e Mon Sep 17 00:00:00 2001 From: Michael JL Catlin Date: Sun, 19 May 2013 13:37:50 -0700 Subject: [PATCH 04/12] Adding a blurb at the top of the page, giving references for the blog posts, summaries to the projects and frameworks --- source/community.haml | 120 +++++++++++++++++++++++++++++++----------- 1 file changed, 88 insertions(+), 32 deletions(-) diff --git a/source/community.haml b/source/community.haml index d4d952b..96b4cf7 100644 --- a/source/community.haml +++ b/source/community.haml @@ -1,26 +1,22 @@ %h1 Things happening in the community +%p + Sass has an awesome community of designers and developers who love to spread the word. There are a number of + =link_to "Sass blogs", "#Blogs" + (including + =link_to "a few particular articles" + we recommend reading), and even a few + =link_to "books about Sass", "#Books" + out there. + +%p + Finally, as an open source project, we rely on everyone to keep Sass as stable as it is. Feel free to + =link_to "contribute", "#Contribute" + to Sass by submitting a patch via a pull request. .articles - %h2 Sass Articles on the Web - / Will clean up these articles later. It'll be a curated list of - / articles that we'll update from time to time. - / May be worthwhile to also list the source website, date and author - %ul - %li= link_to "Sass vs. Less", 'http://css-tricks.com/sass-vs-less/' - %li= link_to "Getting Started with Sass and Compass", 'http://thesassway.com/beginner/getting-started-with-sass-and-compass' - %li= link_to "Nested Selectors: The Inception Rule", 'http://thesassway.com/beginner/the-inception-rule' - %li= link_to "Using Compass and Sass for your Next CSS Project", 'http://net.tutsplus.com/tutorials/html-css-techniques/using-compass-and-sass-for-css-in-your-next-project/' - %li= link_to "Getting Sassy with CSS", 'http://www.sencha.com/blog/getting-sassy-with-css/' - %li= link_to "A Newb’s Guide to Syntactically Awesome Stylesheets (Sass) – part 1", 'http://unmatchedstyle.com/news/a-newbs-guide-to-syntactically-awesome-stylesheets-sass-part-1.php' - %li= link_to "Using Bower with Sass & Compass", 'http://anthonyshort.me/2012/10/using-bower-with-sass-and-compass' - %li= link_to "Preprocess THIS!", 'http://cognition.happycog.com/article/preprocess-this' - %li= link_to "Sass Sleuth: Debugging Sass in Webkit Browsers", 'hhttp://www.mobify.com/dev/sass-sleuth-debugging-sass-in-webkit-browsers/' - %li= link_to "Improve your Responsive Design Workflow with Sass", 'http://www.netmagazine.com/tutorials/improve-your-responsive-design-workflow-sass' - %li= link_to "Stop the Pain of Vanilla CSS and Get Relief by Adding Toppings with Sass", 'http://www.zurb.com/article/1031/stop-the-pain-of-vanilla-css-and-get-reli' - %li= link_to "Building a Nested Responsive Grid with Sass & Compass", 'http://viget.com/inspire/building-a-nested-responsive-grid-with-sass-compass' - %nav#favorite-blogs - %h2 Sass Blogs + %a{:name=>"Blogs"} + %h2 Sass Blogs / Need to research a couple more of these %ul %li= link_to "The Sass Way", 'http://thesassway.com/' @@ -29,6 +25,48 @@ %li= link_to "NetTuts", 'http://net.tutsplus.com/?s=sass' %li= link_to "Viget Inspire", 'http://viget.com/inspire/search/YTo2OntzOjg6ImtleXdvcmRzIjtzOjQ6InNhc3MiO3M6MTE6InNlYXJjaF9tb2RlIjtzOjM6ImFsbCI7czoxMToicmVzdWx0X3BhZ2UiO3M6MTQ6Imluc3BpcmUvc2VhcmNoIjtzOjEwOiJjb2xsZWN0aW9uIjthOjE6e2k6MDtzOjE6IjEiO31zOjEwOiJsb29zZV9lbmRzIjtiOjE7czo4OiJjYXRlZ29yeSI7czozOiIxMjUiO30' %li= link_to "Unmatched Style", 'http://www.google.com/cse?cx=partner-pub-1988806651014029%3A4kuybaak597&ie=ISO-8859-1&q=sass#gsc.tab=0&gsc.q=sass&gsc.page=1' + %a{:name=>"Articles"} + %h2 Sass Articles on the Web + / Will clean up these articles later. It'll be a curated list of + / articles that we'll update from time to time. + / May be worthwhile to also list the source website, date and author + %ul + %li + = link_to "Sass vs. Less", 'http://css-tricks.com/sass-vs-less/' + – by Chris Coyier, from CSS Tricks, May 2012 + %li + = link_to "Getting Started with Sass and Compass", 'http://thesassway.com/beginner/getting-started-with-sass-and-compass' + – by Adam Stacoviak, from The Sass Way, June 2011 + %li + = link_to "Nested Selectors: The Inception Rule", 'http://thesassway.com/beginner/the-inception-rule' + – by Mario "Kuroir" Ricalde, from The Sass Way, November 2011 + %li + = link_to "Using Compass and Sass for your Next CSS Project", 'http://net.tutsplus.com/tutorials/html-css-techniques/using-compass-and-sass-for-css-in-your-next-project/' + – by Alex Coomans, from Net Tuts, August 2009 + %li + = link_to "Getting Sassy with CSS", 'http://www.sencha.com/blog/getting-sassy-with-css/' + – by David Kaneda, from the Sencha blog, June 2010 + %li + = link_to "A Newb’s Guide to Syntactically Awesome Stylesheets (Sass) – part 1", 'http://unmatchedstyle.com/news/a-newbs-guide-to-syntactically-awesome-stylesheets-sass-part-1.php' + – by Dale Sande, from Unmatched Style, September 2012 + %li + = link_to "Using Bower with Sass & Compass", 'http://anthonyshort.me/2012/10/using-bower-with-sass-and-compass' + – by Anthony Short, October 2012 + %li + = link_to "Preprocess THIS!", 'http://cognition.happycog.com/article/preprocess-this' + – by Allison Wagner, from Cognition, September 2012 + %li + = link_to "Sass Sleuth: Debugging Sass in Webkit Browsers", 'http://www.mobify.com/dev/sass-sleuth-debugging-sass-in-webkit-browsers/' + – by Roman, from the Mobify blog, August 2012 + %li + = link_to "Improve your Responsive Design Workflow with Sass", 'http://www.netmagazine.com/tutorials/improve-your-responsive-design-workflow-sass' + – by Ryan Taylor, from .net, October 2011 + %li + = link_to "Stop the Pain of Vanilla CSS and Get Relief by Adding Toppings with Sass", 'http://www.zurb.com/article/1031/stop-the-pain-of-vanilla-css-and-get-reli' + – by Chris, from the Zurb blog, July 2012 + %li + = link_to "Building a Nested Responsive Grid with Sass & Compass", 'http://viget.com/inspire/building-a-nested-responsive-grid-with-sass-compass' + – by Trevor Davis, from Viget, May 2012 .training %h2 Tutorials @@ -39,7 +77,8 @@ %li= link_to "Lynda.com", 'http://www.lynda.com/CSS-tutorials/CSS-LESS-SASS/107921-2.html' .books - %h2 Books + %a{:name=>"Books"} + %h2 Sass Books %ul %li= link_to "Sass for Web Designers", 'http://www.abookapart.com/products/sass-for-web-designers' @@ -50,17 +89,34 @@ %h2 Projects & Frameworks %ul - %li= link_to "Compass", 'http://compass-style.org/' - %li= link_to "Susy", 'http://susy.oddbird.net/' - %li= link_to "Bourbon", 'http://bourbon.io/' - %li= link_to "Neat", 'http://neat.bourbon.io/' - %li= link_to "Zurb Foundation", 'http://foundation.zurb.com/' - %li= link_to "320 and Up", 'https://github.com/malarkey/320andup/' - %li= link_to "Twitter Bootstrap", 'https://github.com/jlong/sass-twitter-bootstrap' - %li= link_to "Gravity", 'http://gravityframework.com/' + %li + = link_to "Compass", 'http://compass-style.org/' + – a CSS (and Sass!) authoring framework + %li + = link_to "Susy", 'http://susy.oddbird.net/' + – a responsive grid layout built for Compass + %li + = link_to "Bourbon", 'http://bourbon.io/' + – a lightweight mixin library + %li + = link_to "Neat", 'http://neat.bourbon.io/' + – a mixin-based grid layout system + %li + = link_to "Zurb Foundation", 'http://foundation.zurb.com/' + – a responsive front-end framework + %li + = link_to "Rock Hammer", 'https://github.com/malarkey/rock-hammer/' + – a starting framework with some basic styles for a project + %li + = link_to "Twitter Bootstrap", 'https://github.com/jlong/sass-twitter-bootstrap' + – the ubiquitous framework... this time written in Sass! + %li + = link_to "Gravity", 'http://gravityframework.com/' + – a framework for making HTML5 websites with Sass .contribute - %h2 Contribute + %a{:name=>"Contribute"} + %h2 Contribute %p Sass is an open source projects and we encourage you to contribute. You can contribute with bug reports and feature requests or if you have code to contribute we will love you forever. @@ -80,8 +136,8 @@ %p Here are a few simple things you'll need to do when submitting a patch via pull request: %ul - %li Your commit message should be well written, descriptive and contain proper grammar and punctuation. - %li The first line of your commit message should be a short, full sentence. - %li Your commit should also contain any appropriate unit tests + %li Write a commit message that is well-written, descriptive and contain proper grammar and punctuation. + %li Make sure the first line of your commit message is a short, full sentence. + %li Contain any appropriate unit tests in your commit %li Add your changes to the changelog for the correct branch. The changelog is in doc-src/SASS_CHANGELOG.md %li If your change is user-facing, update the appropriate section in reference documentation. \ No newline at end of file From 3bd354a6f3ace06824fa7e0504311ebef0a439af Mon Sep 17 00:00:00 2001 From: Michael JL Catlin Date: Sun, 19 May 2013 13:39:26 -0700 Subject: [PATCH 05/12] Typos --- source/get-started/install.haml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/source/get-started/install.haml b/source/get-started/install.haml index 5681166..2edc0ba 100644 --- a/source/get-started/install.haml +++ b/source/get-started/install.haml @@ -10,7 +10,7 @@ %p.illustration %span.circle= image_tag "illustrations/command-line.png", :width => "48", :height => "48", :alt => "Framework Illustration" %p.description - If you or your team is using a dynamic web language or framework, then chances are that Sass support is available. This is the most popular way to use Sass, but sometimes it does require some changes to you project. Here is just a partial list of the frameworks that have Sass support: + If you or your team is using a dynamic web language or framework, then chances are that Sass support is available. This is the most popular way to use Sass, but sometimes it does require some changes to your project. Here is just a partial list of the frameworks that have Sass support: .call-to-action %p= link_to "Rails", 'http://guides.rubyonrails.org/asset_pipeline.html', :class => 'button' %p= link_to "Node.js", 'https://github.com/andrew/node-sass', :class => 'button' @@ -20,7 +20,7 @@ %p= link_to ".net", 'http://libsassnet.codeplex.com/', :class => 'button' %p= link_to "Joomla", 'http://www.joomlavision.com/started-sass/', :class => 'button' - %p This is a very partial list. Just search the web for the name of your framework + Sass and its likely to come up. + %p This is a very partial list. Just search the web for the name of your framework + Sass and it's likely to come up. %li.command-line .get-started-content %h3 Command Line @@ -45,7 +45,7 @@ %h3 GUI Application %p.illustration %span.circle= image_tag "illustrations/gui.png", :width => "48", :height => "48", :alt => "GUI Illustration" - %p.description There are many free and paid GUI's that natively support Sass in them. This is the ideal start for the very non-technical user. + %p.description There are many free and paid GUIs that natively support Sass in them. This is the ideal start for the very non-technical user. .call-to-action %p= link_to "Scout (Mac, Free)", "http://mhs.github.io/scout-app/", :class => 'button' %p= link_to "Compass.app ($10)", "http://compass.handlino.com/", :class => 'button' From 5f792b858cb3124649e2f46ed8fa9b7dfbb1c357 Mon Sep 17 00:00:00 2001 From: Hampton Catlin Date: Sun, 19 May 2013 13:40:03 -0700 Subject: [PATCH 06/12] More homepage content. --- source/index.html.haml | 35 +++++++++++++++++++++++++-- source/{get-started => }/install.haml | 0 source/layouts/shared/_banner.haml | 2 +- 3 files changed, 34 insertions(+), 3 deletions(-) rename source/{get-started => }/install.haml (100%) diff --git a/source/index.html.haml b/source/index.html.haml index 7b04023..da9fa6d 100644 --- a/source/index.html.haml +++ b/source/index.html.haml @@ -2,9 +2,40 @@ title: Sass | Syntactically Awesome Style Sheets --- -%h1 CSS with superpowers +.hero + .left-content + %h1 CSS with superpowers -%p Sass is the most mature, stable CSS preprocessor in the world. It's been around for 7 years and is trusted by hundreds of development shops and companies around the world. + %p Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. + .right-content + %h2 Getting Started Is Easy + %ol + %li.button= link_to "Install Sass", "install" + %li.button= link_to "Learn Sass", "guide" + %li.button= link_to "Get Involved", "community" + + + +.features + %h2 Features + %ul + %li + %h3 CSS Compatible + %p + Sass is completely compatible with all versions of CSS. We take this compability seriously, so that you can seemlessly use any available CSS libraries. + %li + %h3 Feature Rich + %p + Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has worked endlessly to not only keep up, but stay ahead. + %li + %h3 Mature + %p + Sass has been actively supported for + = time_ago_in_words DateTime.parse("Tue Nov 28 19:43:58 2006 +0000") + by its loving Core Team. + %li + %h3 Large Community + %p Sass is actively supported and developed by a consortium of several tech companies and hundreds of developers. - content_for :section_2 do diff --git a/source/get-started/install.haml b/source/install.haml similarity index 100% rename from source/get-started/install.haml rename to source/install.haml diff --git a/source/layouts/shared/_banner.haml b/source/layouts/shared/_banner.haml index c5dfbeb..cf54199 100644 --- a/source/layouts/shared/_banner.haml +++ b/source/layouts/shared/_banner.haml @@ -12,7 +12,7 @@ %nav.navigation(role="navigation") .container :markdown - * [Get Sass](/get-started/install) + * [Get Sass](/install) * [Tutorial](/guide) * [Documentation](/documentation) * [Community](/community) \ No newline at end of file From 468ce3959bc860cc01b3be30fb7601cf8ea8f5a2 Mon Sep 17 00:00:00 2001 From: Hampton Catlin Date: Sun, 19 May 2013 13:42:19 -0700 Subject: [PATCH 07/12] rename stuff on the banner --- source/layouts/shared/_banner.haml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/source/layouts/shared/_banner.haml b/source/layouts/shared/_banner.haml index cf54199..34f6b13 100644 --- a/source/layouts/shared/_banner.haml +++ b/source/layouts/shared/_banner.haml @@ -12,7 +12,7 @@ %nav.navigation(role="navigation") .container :markdown - * [Get Sass](/install) - * [Tutorial](/guide) + * [Install](/install) + * [Learn Sass](/guide) * [Documentation](/documentation) - * [Community](/community) \ No newline at end of file + * [Get Involved](/community) \ No newline at end of file From ff72763218bcf65b0b384ef04b17c0a395109894 Mon Sep 17 00:00:00 2001 From: Michael JL Catlin Date: Sun, 19 May 2013 13:49:29 -0700 Subject: [PATCH 08/12] Chronologising (is that a word?) the list of blog articles --- source/community.haml | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/source/community.haml b/source/community.haml index 96b4cf7..02950ae 100644 --- a/source/community.haml +++ b/source/community.haml @@ -34,39 +34,39 @@ %li = link_to "Sass vs. Less", 'http://css-tricks.com/sass-vs-less/' – by Chris Coyier, from CSS Tricks, May 2012 - %li - = link_to "Getting Started with Sass and Compass", 'http://thesassway.com/beginner/getting-started-with-sass-and-compass' - – by Adam Stacoviak, from The Sass Way, June 2011 - %li - = link_to "Nested Selectors: The Inception Rule", 'http://thesassway.com/beginner/the-inception-rule' - – by Mario "Kuroir" Ricalde, from The Sass Way, November 2011 - %li - = link_to "Using Compass and Sass for your Next CSS Project", 'http://net.tutsplus.com/tutorials/html-css-techniques/using-compass-and-sass-for-css-in-your-next-project/' - – by Alex Coomans, from Net Tuts, August 2009 - %li - = link_to "Getting Sassy with CSS", 'http://www.sencha.com/blog/getting-sassy-with-css/' - – by David Kaneda, from the Sencha blog, June 2010 - %li - = link_to "A Newb’s Guide to Syntactically Awesome Stylesheets (Sass) – part 1", 'http://unmatchedstyle.com/news/a-newbs-guide-to-syntactically-awesome-stylesheets-sass-part-1.php' - – by Dale Sande, from Unmatched Style, September 2012 %li = link_to "Using Bower with Sass & Compass", 'http://anthonyshort.me/2012/10/using-bower-with-sass-and-compass' – by Anthony Short, October 2012 %li = link_to "Preprocess THIS!", 'http://cognition.happycog.com/article/preprocess-this' – by Allison Wagner, from Cognition, September 2012 + %li + = link_to "A Newb’s Guide to Syntactically Awesome Stylesheets (Sass) – part 1", 'http://unmatchedstyle.com/news/a-newbs-guide-to-syntactically-awesome-stylesheets-sass-part-1.php' + – by Dale Sande, from Unmatched Style, September 2012 %li = link_to "Sass Sleuth: Debugging Sass in Webkit Browsers", 'http://www.mobify.com/dev/sass-sleuth-debugging-sass-in-webkit-browsers/' – by Roman, from the Mobify blog, August 2012 - %li - = link_to "Improve your Responsive Design Workflow with Sass", 'http://www.netmagazine.com/tutorials/improve-your-responsive-design-workflow-sass' - – by Ryan Taylor, from .net, October 2011 %li = link_to "Stop the Pain of Vanilla CSS and Get Relief by Adding Toppings with Sass", 'http://www.zurb.com/article/1031/stop-the-pain-of-vanilla-css-and-get-reli' – by Chris, from the Zurb blog, July 2012 %li = link_to "Building a Nested Responsive Grid with Sass & Compass", 'http://viget.com/inspire/building-a-nested-responsive-grid-with-sass-compass' – by Trevor Davis, from Viget, May 2012 + %li + = link_to "Nested Selectors: The Inception Rule", 'http://thesassway.com/beginner/the-inception-rule' + – by Mario "Kuroir" Ricalde, from The Sass Way, November 2011 + %li + = link_to "Improve your Responsive Design Workflow with Sass", 'http://www.netmagazine.com/tutorials/improve-your-responsive-design-workflow-sass' + – by Ryan Taylor, from .net, October 2011 + %li + = link_to "Getting Started with Sass and Compass", 'http://thesassway.com/beginner/getting-started-with-sass-and-compass' + – by Adam Stacoviak, from The Sass Way, June 2011 + %li + = link_to "Getting Sassy with CSS", 'http://www.sencha.com/blog/getting-sassy-with-css/' + – by David Kaneda, from the Sencha blog, June 2010 + %li + = link_to "Using Compass and Sass for your Next CSS Project", 'http://net.tutsplus.com/tutorials/html-css-techniques/using-compass-and-sass-for-css-in-your-next-project/' + – by Alex Coomans, from Net Tuts, August 2009 .training %h2 Tutorials From f9da79494374e0c45f96cd0473dbffe751f0fa43 Mon Sep 17 00:00:00 2001 From: Hampton Catlin Date: Sun, 19 May 2013 14:10:55 -0700 Subject: [PATCH 09/12] adding an about section, updating the footer, and reorging the homepage --- source/about.haml | 14 ++++++ source/index.html.haml | 66 ++++++++++++++++--------- source/layouts/shared/_contentinfo.haml | 7 +-- 3 files changed, 61 insertions(+), 26 deletions(-) create mode 100644 source/about.haml diff --git a/source/about.haml b/source/about.haml new file mode 100644 index 0000000..35277d3 --- /dev/null +++ b/source/about.haml @@ -0,0 +1,14 @@ +%h1 About Sass + +%p + Sass was originally developed as a feature of the Haml markup language. Since then, Sass has outgrown its original home as part of Haml and is now a thriving project, much more popular than its original host project. + +%p + It was originally conceived of by + = link_to "Hampton Catlin", "http://www.hamptoncatlin.com" + in 2006, however he only remained an active Core Team member through version 2009 and is no longer actively developing on Sass. + = link_to "Nathan Weizenbaum", "http://nex-3.com/" + is the primary developer and designer of Sass and has been involved in the project since the second commit. + In 2008, + = link_to "Chris Eppstein", "http://chriseppstein.github.io/" + joined the Sass Core Team and is also the creator of Compass. Since joining, he and Nathan have designed Sass together have created most of the modern features of the language. \ No newline at end of file diff --git a/source/index.html.haml b/source/index.html.haml index da9fa6d..432b13e 100644 --- a/source/index.html.haml +++ b/source/index.html.haml @@ -7,35 +7,55 @@ title: Sass | Syntactically Awesome Style Sheets %h1 CSS with superpowers %p Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. + + .features + %h2 Features + %ul + %li + %h3 CSS Compatible + %p + Sass is completely compatible with all versions of CSS. We take this compability seriously, so that you can seemlessly use any available CSS libraries. + %li + %h3 Feature Rich + %p + Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has worked endlessly to not only keep up, but stay ahead. + %li + %h3 Mature + %p + Sass has been actively supported for + = time_ago_in_words DateTime.parse("Tue Nov 28 19:43:58 2006 +0000") + by its loving Core Team. + %li + %h3 Industry Approved + %p + Over and over again, the industry is choosing Sass as the premier CSS extension languages. It's so true that we feel a little bad for the upstarts. + %li + %h3 Large Community + %p Sass is actively supported and developed by a consortium of several tech companies and hundreds of developers. + %li + %h3 Frameworks + %p + There are endless number of frameworks built with Sass. + = link_to "Compass", "http://compass-style.org/" + , + = link_to "Bourbon", "http://bourbon.io/" + , and + = link_to "Susy", "http://susy.oddbird.net/" + just to name a few. + %li + %h3 Training + %p + There is a huge amount of training and support available for Sass. No HTML/CSS education is complete without learning Sass. .right-content %h2 Getting Started Is Easy %ol - %li.button= link_to "Install Sass", "install" - %li.button= link_to "Learn Sass", "guide" - %li.button= link_to "Get Involved", "community" + %li= link_to "Install Sass", "install" + %li= link_to "Learn Sass", "guide" + %li= link_to "Get Involved", "community" + -.features - %h2 Features - %ul - %li - %h3 CSS Compatible - %p - Sass is completely compatible with all versions of CSS. We take this compability seriously, so that you can seemlessly use any available CSS libraries. - %li - %h3 Feature Rich - %p - Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has worked endlessly to not only keep up, but stay ahead. - %li - %h3 Mature - %p - Sass has been actively supported for - = time_ago_in_words DateTime.parse("Tue Nov 28 19:43:58 2006 +0000") - by its loving Core Team. - %li - %h3 Large Community - %p Sass is actively supported and developed by a consortium of several tech companies and hundreds of developers. - content_for :section_2 do diff --git a/source/layouts/shared/_contentinfo.haml b/source/layouts/shared/_contentinfo.haml index 5cb7edd..1ccc17f 100644 --- a/source/layouts/shared/_contentinfo.haml +++ b/source/layouts/shared/_contentinfo.haml @@ -6,6 +6,7 @@ %li= link_to "MIT License", "#" %ul.social-navigation - %li= link_to "Twitter", "#" - %li= link_to "Mailing List", "#" - %li= link_to "Github", "#" \ No newline at end of file + %li= link_to "Twitter", "http://twitter.com/sasscss" + %li= link_to "Mailing List", "http://groups.google.com/group/sass-lang" + %li= link_to "Github", "https://github.com/sass" + %li= link_to "About", "/about" \ No newline at end of file From 386529469e02e8b45534d0579c4c2d0ef576ead3 Mon Sep 17 00:00:00 2001 From: Hampton Catlin Date: Sun, 19 May 2013 14:13:37 -0700 Subject: [PATCH 10/12] add note about sass design team --- source/about.haml | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/source/about.haml b/source/about.haml index 35277d3..b5bafba 100644 --- a/source/about.haml +++ b/source/about.haml @@ -3,6 +3,7 @@ %p Sass was originally developed as a feature of the Haml markup language. Since then, Sass has outgrown its original home as part of Haml and is now a thriving project, much more popular than its original host project. +%h2 Sass Language %p It was originally conceived of by = link_to "Hampton Catlin", "http://www.hamptoncatlin.com" @@ -11,4 +12,11 @@ is the primary developer and designer of Sass and has been involved in the project since the second commit. In 2008, = link_to "Chris Eppstein", "http://chriseppstein.github.io/" - joined the Sass Core Team and is also the creator of Compass. Since joining, he and Nathan have designed Sass together have created most of the modern features of the language. \ No newline at end of file + joined the Sass Core Team and is also the creator of Compass. Since joining, he and Nathan have designed Sass together have created most of the modern features of the language. + +%h2 Sass Website + +%p + The Sass website design was brought to you by the Sass Design Team, headed up by + = link_to "Jina Bolton", "http://sushiandrobots.com/" + \. \ No newline at end of file From 7c3481ff07f562ee58173a1f3daacf75acc3e193 Mon Sep 17 00:00:00 2001 From: Michael JL Catlin Date: Sun, 19 May 2013 14:16:04 -0700 Subject: [PATCH 11/12] Year --- source/layouts/shared/_contentinfo.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/layouts/shared/_contentinfo.haml b/source/layouts/shared/_contentinfo.haml index 1ccc17f..8aaf307 100644 --- a/source/layouts/shared/_contentinfo.haml +++ b/source/layouts/shared/_contentinfo.haml @@ -2,7 +2,7 @@ .container %nav %ul.legal-navigation - %li Copyright © 2006–2012 Sass + %li Copyright © 2006–2013 Sass %li= link_to "MIT License", "#" %ul.social-navigation From 9cd39c3507e3b4f47982401b7060823fedb0aac0 Mon Sep 17 00:00:00 2001 From: Michael JL Catlin Date: Sun, 19 May 2013 14:16:20 -0700 Subject: [PATCH 12/12] Intro blurb and some rearrangement --- source/community.haml | 48 ++++++++++++++++++++++++++++--------------- 1 file changed, 32 insertions(+), 16 deletions(-) diff --git a/source/community.haml b/source/community.haml index 02950ae..7f9f58a 100644 --- a/source/community.haml +++ b/source/community.haml @@ -1,17 +1,39 @@ %h1 Things happening in the community %p - Sass has an awesome community of designers and developers who love to spread the word. There are a number of + Sass has an awesome community of designers and developers who love to spread the word and help people out. Here we've collected some resources +%p + Still + %b getting started + ? There are some great + =link_to "tutorials", "#Tutorials" + out there to get you on your feet. +%p + Want to + %b learn more + ? There's some great =link_to "Sass blogs", "#Blogs" (including - =link_to "a few particular articles" + =link_to "a few particular articles", "#Articles" we recommend reading), and even a few =link_to "books about Sass", "#Books" - out there. - + to help you learn some new tips and tricks. There are also a number of + =link_to "frameworks", "#Frameworks" + that make using Sass simple. %p - Finally, as an open source project, we rely on everyone to keep Sass as stable as it is. Feel free to - =link_to "contribute", "#Contribute" - to Sass by submitting a patch via a pull request. + Thinking of + %b contributing + to Sass itself? We rely on everyone to keep Sass as stable as it is. Feel free to + =link_to "submit a patch via pull request", "#Contribute" + to the Sass project. + +.training + %a{:name=>"Tutorials"} + %h2 Tutorials + + %ul + %li= link_to "CodeSchool", 'http://www.codeschool.com/courses/assembling-sass' + %li= link_to "LevelUp Tuts", 'http://leveluptuts.com/tutorials/sass-tutorials' + %li= link_to "Lynda.com", 'http://www.lynda.com/CSS-tutorials/CSS-LESS-SASS/107921-2.html' .articles %nav#favorite-blogs @@ -29,11 +51,13 @@ %h2 Sass Articles on the Web / Will clean up these articles later. It'll be a curated list of / articles that we'll update from time to time. - / May be worthwhile to also list the source website, date and author %ul %li = link_to "Sass vs. Less", 'http://css-tricks.com/sass-vs-less/' – by Chris Coyier, from CSS Tricks, May 2012 + %li + = link_to "Redesigning with Sass", "http://css-tricks.com/redesigning-with-sass/" + – by David Walsh, from CSS Tricks, October 2012 %li = link_to "Using Bower with Sass & Compass", 'http://anthonyshort.me/2012/10/using-bower-with-sass-and-compass' – by Anthony Short, October 2012 @@ -68,14 +92,6 @@ = link_to "Using Compass and Sass for your Next CSS Project", 'http://net.tutsplus.com/tutorials/html-css-techniques/using-compass-and-sass-for-css-in-your-next-project/' – by Alex Coomans, from Net Tuts, August 2009 -.training - %h2 Tutorials - - %ul - %li= link_to "CodeSchool", 'http://www.codeschool.com/courses/assembling-sass' - %li= link_to "LevelUp Tuts", 'http://leveluptuts.com/tutorials/sass-tutorials' - %li= link_to "Lynda.com", 'http://www.lynda.com/CSS-tutorials/CSS-LESS-SASS/107921-2.html' - .books %a{:name=>"Books"} %h2 Sass Books