What is Basic? Basic was originally developed for client projects. Originally a stripped down version of the ZEN theme, basic has now become its own concept of a theme starter. Basic boasts a clean HTML structure with extensible CSS classes and ID's for unlimited theming possibilities as well as a top-down load order for improved SEO. Basic's goal is to provide themers the building blocks needed to get their designs up and running quickly and simply. What is SASS? Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets. What will I Learn? We will guide you through using Basic with SASS and Compass to kick-start your next Drupal theming project and show you how easy it is to get started. We will also cover the syntax and file structure of using SASS and how to get your development environment up

2. What we'll Learn
Learn the SASS Syntax
Utilize Compass for compiling
Take a look at Basic and learn how to put our
knowledge to practice

3. What is SASS?
Syntactically Awesome Stylesheets.

4. What is SASS?
Sass makes CSS fun again.

5. What is SASS?
SCSS (Sassy CSS. Newer syntax)
a superset of CSS3’s syntax
SASS (Older syntax)
uses indentation instead of brackets and semi-colons

6. What is SASS?
nested rules
variables
mixins
selector inheritance

7. Installing SASS
need Ruby, Gem, and HAML
OSX: http://hivelogic.com/articles/compiling-
ruby-rubygems-and-rails-on-snow-leopard
Linux: you probably can figure this out....
Windows: good luck...

8. What is Compass?
Compass is a stylesheet authoring tool that uses the
Sass stylesheet language to make your stylesheets
smaller and your web site easier to maintain.

9. Installing Compass
gem install compass

10. What we'll use Compass for...
automajically compile our SASS files
# Require any additional compass plugins here.
project_type = :stand_alone
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
output_style = :compact
# To enable relative paths to assets via compass helper functions.
Uncomment:
# relative_assets = true

11. But...
as of SASS 3...
files prefixed with underscore are ignored.
sass --watch sass:css (sassdir:outputdir)

12. Examples: Nested Rules
SASSSCSS
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
table.hl
margin: 2em 0
td.ln
text-align: right
li
font:
family: serif
weight: bold
size: 1.2em

13. Examples: Nested Rules
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.2em;
}
CSS

14. Examples: Variables
SASSSCSS
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
$blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 9%)
.border
padding: $margin / 2
margin: $margin / 2
border-color: $blue

15. Examples: Variables
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
CSS

16. Examples: Mixins
SASSSCSS
@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {padding: 2px}
}
@mixin left($dist) {
float: left;
margin-left: $dist;
}
#data {
@include left(10px);
@include table-base;
}
@mixin table-base
th
text-align: center
font-weight: bold
td, th
padding: 2px
@mixin left($dist)
float: left
margin-left: $dist
#data
@include left(10px)
@include table-base

17. Examples: Mixins
#data {
float: left;
margin-left: 10px;
}
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}
CSS

18. Examples: Selector Inheritance
SASSSCSS
.error {
border: 1px #f00;
background: #fdd;
}
.error.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
@extend .error;
border-width: 3px;
}
.error
border: 1px #f00
background: #fdd
.error.intrusion
font-size: 1.3em
font-weight: bold
.badError
@extend .error
border-width: 3px

19. Examples: Selector Inheritance
.error, .badError {
border: 1px #f00;
background: #fdd;
}
.error.intrusion,
.badError.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
border-width: 3px;
}
CSS

20. Examples: Conditional Statements
SASS
=views-row($margin: $baseline, $divide: false,
$border_color: #CCC)
+pie-clearfix
@if $divide
border-bottom: 1px solid $border_color
margin-bottom: $margin * 0.5
@else
margin-bottom: $margin * 0.5
p
&:last-of-type
margin-bottom: 0
#main-content .item
+views-row($baseline, true, $brand_blue)

21. Other Languages
SASS, Less, Turbine, Switch CSS, CSS
Cacheer, CSSPP, ... and more.
http://bit.ly/CSSPreprocessors

22. Convert!
$ css2sass input output (older syntax)
$ sassconvert [options] input output (newer syntax)$
sass-convert --from less --to scss --recursive .

23. Convert!
Textmate Bundle
http://github.com/seaofclouds/sass-textmate-bundle
Foldable Blocks in Texmate
http://nimbupani.com/foldable-css-blocks-in-sass-with-textmate.html

24. Drupal Resources
Compass: http://drupal.org/project/compass
Basic: http://drupal.org/project/basic
Less: http://drupal.org/project/less