danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2024-11-27 04:24:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Making a racket by moving things around and writing new text.

Browse Source
This commit is contained in:
Hampton Catlin 2013-05-19 13:22:05 -07:00
parent c114f3f5ed
commit 01a8ef8c57
5 changed files with 140 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
source/assets/stylesheets/components/_get-started.scss
View File

@ -15,7 +15,7 @@
@extend %clearfix-small-tablet;
li {
@include span-columns(2);
@include span-columns(1);
&:last-child { @include omega; }
}

53
source/get-started/install.haml Normal file
View File

@ -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 <a href="/get-started/command-line#windows">Sass for Windows Guide</a>.
%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'

240
source/guide.haml
View File

@ -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&nbsp;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 <code>$</code> 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 <code>$font-stack</code> and <code>$primary-color</code> 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&nbsp;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&nbsp;navigation:
### :syntax (sass, scss)
= partial "code-snippets/homepage-nesting-scss"
### :property_syntax
:markdown
You'll notice that the <code>ul</code>, <code>li</code>, and <code>a</code> selectors are nested inside the <code>nav</code> 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&nbsp;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 <code>_partial.scss</code>. 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 <code>@import</code> 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 <code>@import</code> in CSS it creates another HTTP request. Sass builds on top of the current CSS <code>@import</code> 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, <code>_reset.scss</code> and <code>base.scss</code>. We want to import <code>_reset.scss</code> into <code>base.scss</code>.
### :poll
= partial "code-snippets/homepage-import-1-scss"
= partial "code-snippets/homepage-import-2-scss"
### :full_exception
:markdown
### :template_location
Notice we're using <code>@import 'reset';</code> in the <code>base.scss</code> file. When you import a file you don't need to include the file extension <code>.scss</code> Sass is smart and will figure it out for you. When you generate the CSS you'll&nbsp;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 <code>border-radius</code>.
### :filename
= partial "code-snippets/homepage-mixins-scss"
### :line
:markdown
To create a mixin you use the <code>@mixin</code> directive and giving it a name. We've named our mixin <code>border-radius</code>. We're also using the variable <code>$radius</code> 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 <code>@include</code> 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 <code>@extend</code> 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 <code>.message</code> and apply them to <code>.success</code>, <code>.error</code>, & <code>.warning</code>. 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&nbsp;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
%ul.pagination
%li= link_to "Prev", "#", :class => "prev"
%li= link_to "Next", "#", :class => "next"

153
source/index.html.haml
View File

@ -2,41 +2,9 @@
title: Sass | Syntactically Awesome Style Sheets
---
:markdown
# CSS with super&nbsp;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 <a href="/get-started/command-line#windows">Sass for Windows Guide</a>.
%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&nbsp;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&nbsp;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 <code>$</code> 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 <code>$font-stack</code> and <code>$primary-color</code> 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&nbsp;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&nbsp;navigation:
= partial "code-snippets/homepage-nesting-scss"
:markdown
You'll notice that the <code>ul</code>, <code>li</code>, and <code>a</code> selectors are nested inside the <code>nav</code> 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&nbsp;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 <code>_partial.scss</code>. 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 <code>@import</code> 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 <code>@import</code> in CSS it creates another HTTP request. Sass builds on top of the current CSS <code>@import</code> 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, <code>_reset.scss</code> and <code>base.scss</code>. We want to import <code>_reset.scss</code> into <code>base.scss</code>.
= partial "code-snippets/homepage-import-1-scss"
= partial "code-snippets/homepage-import-2-scss"
:markdown
Notice we're using <code>@import 'reset';</code> in the <code>base.scss</code> file. When you import a file you don't need to include the file extension <code>.scss</code> Sass is smart and will figure it out for you. When you generate the CSS you'll&nbsp;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 <code>border-radius</code>.
= partial "code-snippets/homepage-mixins-scss"
:markdown
To create a mixin you use the <code>@mixin</code> directive and giving it a name. We've named our mixin <code>border-radius</code>. We're also using the variable <code>$radius</code> 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 <code>@include</code> 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 <code>@extend</code> 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 <code>.message</code> and apply them to <code>.success</code>, <code>.error</code>, & <code>.warning</code>. 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&nbsp;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"

6
source/layouts/shared/_banner.haml
View File

@ -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)