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

Finished writing the examples section on the homepage.

Browse Source
This commit is contained in:
Bermon Painter 2013-02-09 18:26:34 -08:00
parent 61213ce02f
commit b055102841
1 changed files with 109 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
source/index.html.haml
View File

@ -2,8 +2,6 @@
title: Sass | Syntactically Awesome Style Sheets
---
%h1 CSS with super powers
%p Sass makes writing CSS fun again. Think of Sass as an extension of CSS3 that adds a bunch of missing features like nesting, variables, mixins & extend.
@ -17,10 +15,10 @@ title: Sass | Syntactically Awesome Style Sheets
%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
%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
/ We'll try and point the user to either
%p= link_to "Command Line Quickstart", '/quickstart/command-line#unix', :class => 'button'
%pre
%code
@ -70,11 +68,11 @@ title: Sass | Syntactically Awesome Style Sheets
%h2 Pre-processing
%p CSS on its own can be pretty darn nice, but stylesheets are getting larger, more complex, and harder to maintain. This is where a pre-processor 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.
%p Once you start tinkering with Sass, it will take your pre-processes Sass file and save it out as a normal CSS file that you can use in your web site.
%p Once you start tinkering with Sass, it will take your pre-processes Sass file and save it out as a normal CSS file that you can use in your web site.
%li
%h2 Variables
%p 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:
%p 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:
%pre.scss
%code
:preserve
@ -84,9 +82,9 @@ title: Sass | Syntactically Awesome Style Sheets
body {
color: $primary-color;
font: 100% $font-stack;
}
}
%p When the Sass is processed, it takes the variables we defines 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 site.
%p When the Sass is processed, it takes the variables we defines 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 site.
%pre.css
%code
@ -138,9 +136,9 @@ title: Sass | Syntactically Awesome Style Sheets
text-decoration: none;
}
%li
%li
%h2 Partials
%p In Sass 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.
%p 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
%h2 Import
@ -187,31 +185,117 @@ title: Sass | Syntactically Awesome Style Sheets
%li
%h2 Mixins
%p mixins definition
%pre
%p Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you take chunks 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>.
%pre.scss
%code
example of mixins and css output
:preserve
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
%p 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:
%pre.css
%code
:preserve
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
%li
%h2 Extend
%p extend definition
%pre
%code
example of extend and css output
%h2 Extend/Inheritance
%p 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.
%li
%h2 Inheritance
%p inheritance definition
%pre
%pre.scss
%code
example of inheritance and css output
:preserve
.message {
border-color: 1px solid #ccc;
color: #333;
padding: 10px;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color: yellow;
}
%p 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. This is what it looks like:
%pre.css
%code
:preserve
.message, .success, .error, .warning {
border-color: 1px solid #cccccc;
color: #333;
padding: 10px;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
%li
%h2 Operators
%p operators definition
%p Doing math in your CSS can be pretty darn helpful. Sass has a handful of standard math operators like +, -, *, /, and %. In our example we're going to do some simple match to calculate widths for an aside & article.
%pre
%code
example of operators and css output
:preserve
#container {
width: 100%;
}
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complimentary"] {
float: right;
width: 300px / 960px * 100%;
}
%p 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 a lot of hassle. The generated CSS will look like:
%pre
%code
:preserve
#container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complimentary"] {
float: right;
width: 31.25%;
}
%ul.pagination
%li= link_to "Prev", "#", :class => "prev"