0
What we'll Learn
Learn the SASS Syntax
Utilize Compass for compiling
Take a look at Basic and learn how to put our
knowled...
What is SASS?
Syntactically Awesome Stylesheets.
What is SASS?
Sass makes CSS fun again.
What is SASS?
SCSS (Sassy CSS. Newer syntax)
a superset of CSS3’s syntax
SASS (Older syntax)
uses indentation instead of b...
What is SASS?
nested rules
variables
mixins
selector inheritance
Installing SASS
need Ruby, Gem, and HAML
OSX: http://hivelogic.com/articles/compiling-
ruby-rubygems-and-rails-on-snow-leo...
What is Compass?
Compass is a stylesheet authoring tool that uses the
Sass stylesheet language to make your stylesheets
sm...
Installing Compass
gem install compass
What we'll use Compass for...
automajically compile our SASS files
# Require any additional compass plugins here.
project_...
But...
as of SASS 3...
files prefixed with underscore are ignored.
sass --watch sass:css (sassdir:outputdir)
Examples: Nested Rules
SASSSCSS
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weigh...
Examples: Nested Rules
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-wei...
Examples: Variables
SASSSCSS
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue...
Examples: Variables
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
bo...
Examples: Mixins
SASSSCSS
@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {padding: 2px}
}
@mixin...
Examples: Mixins
#data {
float: left;
margin-left: 10px;
}
#data th {
text-align: center;
font-weight: bold;
}
#data td, #...
Examples: Selector Inheritance
SASSSCSS
.error {
border: 1px #f00;
background: #fdd;
}
.error.intrusion {
font-size: 1.3em...
Examples: Selector Inheritance
.error, .badError {
border: 1px #f00;
background: #fdd;
}
.error.intrusion,
.badError.intru...
Examples: Conditional Statements
SASS
=views-row($margin: $baseline, $divide: false,
$border_color: #CCC)
+pie-clearfix
@i...
Other Languages
SASS, Less, Turbine, Switch CSS, CSS
Cacheer, CSSPP, ... and more.
http://bit.ly/CSSPreprocessors
Convert!
$ css2sass input output (older syntax)
$ sassconvert [options] input output (newer syntax)$
sass-convert --from l...
Convert!
Textmate Bundle
http://github.com/seaofclouds/sass-textmate-bundle
Foldable Blocks in Texmate
http://nimbupani.co...
Drupal Resources
Compass: http://drupal.org/project/compass
Basic: http://drupal.org/project/basic
Less: http://drupal.org...
Pacific Northwest Drupal Summit: Basic & SASS
Upcoming SlideShare
Loading in...5
×

Pacific Northwest Drupal Summit: Basic & SASS

4,829

Published on

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

Published in: Technology
2 Comments
0 Likes
Statistics
Notes
  • Thanks you very much for sharing these links. Will definitely check this out. data recovery
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I feel awkward when i first saw the Sass (now almost an year back).
    But spending & checking it again
    Will be Looking forward to implement & evaluate the above.
    Thanks Steve!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
4,829
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
30
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Pacific Northwest Drupal Summit: Basic & SASS"

  1. 1. 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
  2. 2. What is SASS? Syntactically Awesome Stylesheets.
  3. 3. What is SASS? Sass makes CSS fun again.
  4. 4. 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
  5. 5. What is SASS? nested rules variables mixins selector inheritance
  6. 6. 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...
  7. 7. 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.
  8. 8. Installing Compass gem install compass
  9. 9. 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
  10. 10. But... as of SASS 3... files prefixed with underscore are ignored. sass --watch sass:css (sassdir:outputdir)
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. Examples: Variables .content-navigation { border-color: #3bbfce; color: #2b9eab; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; } CSS
  15. 15. 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
  16. 16. Examples: Mixins #data { float: left; margin-left: 10px; } #data th { text-align: center; font-weight: bold; } #data td, #data th { padding: 2px; } CSS
  17. 17. 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
  18. 18. 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
  19. 19. 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)
  20. 20. Other Languages SASS, Less, Turbine, Switch CSS, CSS Cacheer, CSSPP, ... and more. http://bit.ly/CSSPreprocessors
  21. 21. Convert! $ css2sass input output (older syntax) $ sassconvert [options] input output (newer syntax)$ sass-convert --from less --to scss --recursive .
  22. 22. 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
  23. 23. Drupal Resources Compass: http://drupal.org/project/compass Basic: http://drupal.org/project/basic Less: http://drupal.org/project/less
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×