Intro to SASS - Drupalcamp Atlanta 2011

cabbagepatchtapeInternet and Web Development

Feb 5, 2013 (4 years and 9 months ago)

122 views

Intro to Sass

Write CSS the efficient and logical way.

Presented By Thomas Lattimore

Drupalcamp Atlanta Oct, 1
st
, 2011

Shameless Plugs

Who am I?



Freelance Front End Developer/Drupal Themer



“Drupal snob”/Open Source enthusiast



Oh, and a full
-
time college student.


Also know as


@tlattimore
-

Drupal.org, twitter, pretty much anywhere online.


Bother me at


thomaslattimore.com



Assumptions made today

A basic understanding of CSS

Comfortable with
CLI

Not *required* though

We have a love/hate
relationship with CSS.

Hard to extend

Not dynamic

Not modular

And the list goes on…

*sort of

Syntactically Awesome
Stylesheets

What is Sass?


SASS is a framework for writing CSS in a
more
efficient

and logical way.




Written in Ruby



CSS Preprocessor



Much like LESS



Extensible


many times
confused with the
extension Compass.


What is Sass?

Installation & Setup

~$
gem install
sass

Once ruby’s installed Just run:

Note:
passing
compass

or
haml



instead of
sass

on
gem install
will also get you
what you need.

And that’s it!

So…

How do you actually write this
stuff?

Syntax

SASS has 2 different syntax’s


.
scss

.sass

Sassy CSS


Nearly the
same syntax that is used in
normal CSS.

SASS


The original SASS
syntax. Tabbed indentation
dependant.

All examples in this session the examples will be .SCSS

How it works

The Sass File

A .SCSS or .SASS

CSS File

Generated by SASS

Sass’
Process

Watches for
updates to the file.

Takes
changes &
overwrites

Updated!

Overridden

Using it

The magic that makes up Sass is the process ‘
--
watch


which compiles Sass files into CSS.

~$ sass
--
watch
input.scss:output.css

Example:



This command can take several different parameters for things such
as including the output style, line commenting, and more.



To get a list
of Sass
commands and options run ‘
sass
-
?


Using it

Oh! Don’t worry
-

There is a GUI if don’t like the
command line.


Compass and Sass without

all

the

hassle.”

Haven’t personally used it but seems to be solid and
gaining popularity.

More at
:
http://mhs.github.com/scout
-
app/

Basics

Variables

1
/*$
var
: string;*/

2
$gray:

#
cfcfcf
;

3
$
fontfam
:

sans
-
serif,

arial
;

4

5
body

{

6

background:

$gray;

7
}

8
p
{

9

font
-
family:

$
fontfam
;

10
}

1

2
body

{

3
background:

#
cfcfcf
;

4
}

5
p
{

6

font
-
family:

sans
-
serif,

arial
;

7}




Basics

Nesting

1
ul

{


2

font
: {


3

family: $
fontfam
;


4

size:
1.2em
;


5

}


6

margin: $
base
;


7

li
{


8

margin:
0
;


9


a
{

10

background:
#000
;

11

color:
#
fff
;

12

padding:
5px
;

13

}

14

}

15
}

1
ul

{


2

font
-
family: sans
-
serif,
arial
;


3

font
-
size:
1.2em
;


4

margin:
10px
;


5
}


6
ul

li

{


7

margin:
0
;


8
}


9
ul

li

a

{

10

background:
#000
;

11

color:
#
fff
;

12

padding:
5px
;

13
}



Basics

Mixins

1
@
mixin

foo

{

2

border:
1px

solid
#
ccc
;

3

padding:
15px
;

4
}

5

6
blockquote

{

7

@include
foo
;

8

font
-
family:
georgia
;

9
}

1
blockquote

{

2

border:
1px

solid
#
ccc
;

3

padding:
15px
;

4

font
-
family:
georgia
;

5
}




Basics

Inheritance

1
.message

{

2

background:
#3f0000
;

3

border:
1px

solid red;

4

margin:
20px 0
;

5

padding:
10px
;

6
}

7

8
.bold
-
message

{

9

@extend .message;

1
0

font
-
weight:
700
;

11
}

1
.message,

.bold
-
message

{

2

background:
#3f0000
;

3

border:
1px

solid red;

4

margin:
20px 0
;

5

padding:
10px
;

6
}

7

8
.bold
-
message

{

10

font
-
weight:
700
;

11
}

And this is just the
beginning!

Beyond basics

“…an open
-
source
CSS Authoring Framework
.”

In short


a HUGE library of
mixins

built on Sass in a way that’s
extremely reusable.
A *true* CSS framework
to do all sorts of
goodies like:




Generated cross browser prefix’s for CSS3 related properties.



Blueprint Grid system magic.



Reset styles.



Image Sprite Generator


yes, a sprite generator!



Typography bases



And, much more than we can cover in this timeframe…

The majority of
Dev’s

using Sass are likely running Compass.

And rightly so.

So how does all this
play into ?

Sassy Drupal

Helpful Drupal Related Projects



SASS/SCSS Module


An interface for using setting up Sass to
work with Drupal.



http://drupal.org/project/sass




Compass
Stylesheet

tool

-

Provides a menu callback for on
-
demand compilation of a theme's
stylesheets
.



http://drupal.org/project/compass


However, I am not using any of these…

Other related resources



Coding Designers Survival kit


HTML5,
jQuery
, Drupal, & Sass awesomeness.



http://thecodingdesigner.com/




The Sass Way



Sass community related blog.
Less about API documentation on concepts.



http://thesassway.com/




Now for a quick demo


then
time for questions/discussion.

Lets code!