sass tutorial - pavan vatti

7/30/2019 SASS Tutorial - Pavan Vatti

1/23

Creating Reusable Themes with SASS

By: Pavan Vatti

Most modern websites today often change their website layouts and color themes based on

timely events, such as a change in season or upcoming holidays. For this reason it becomes

important to have a convenient way to alter the CSS style sheets quickly and efficiently.

In this Tutorial I will be showing you how to make a SASS style sheet that you can easily edit and

apply on the fly. Our end goal will be what you see above, which is a drop down menu (which

has already been created) that can have its theme changed by a single variable.

Im assuming you dont know anything about SASS so Im going to begin by explaining some of

the basic principles and concepts of SASS. SASS stands for Syntactically Awesome Style Sheets

and it works by converting CSS into a semi-scriptable language, giving you the ability to use

many of the fundamental tools often found in scripting languages such as variables, functions,

and mixins. These tools give web developers much more developmental freedom by lessening

the burden of writing repetitious code.

The SASS language has two main syntaxes. The newest one, known as Sassy CSS, is a superset

of CSS3s syntax allowing for easy transitions between straight CSS3 and Sassy CSS. The second

syntax is known as the Indented Syntax and it follows the ideology of keeping things as concise

as possible by stripping out many of the extra characters such as curly braces and semi-colons.

Throughout this tutorial we will be using the Indented Syntax since it allows for a much

smaller file as an end result.


2/23

Lets start our drop down menu by defining our html

SASS Tutorial

First

Item 1

Item 2

Item 3

Second

Item 4

Item 5

Item 6

Item 7

Third

Item 8

Item 9


3/23

As you can see the html is pretty standard, we have our list item elements of our unordered

lists act as our menu item placeholders.

Once you have your html finalized you need to create your basic CSS in classic CSS first insteadof SASS. By doing this it will help you construct a cleaner SASS file. The theme we will create

first is dusk, which can be seen in the second image above.

#menu{width: 100%;margin: 0;padding: 10px 0 0 0;list-style: none;

background: #111;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear, left bottom, left top, color-stop(0,

#111), color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 1px #9c9c9c;-webkit-box-shadow: 0 2px 1px #9c9c9c;box-shadow: 0 2px 1px #9c9c9c;

}

#menu li{float: left;

padding: 0 0 10px 0;position: relative;

}

#menu a{float: left;height: 25px;

padding: 0 25px;color: #999;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;

}

#menu li:hover>a{color: #fafafa;

}

#menu li:hover>ul {display: block;

}


4/23

#menu ul{list-style: none;

margin: 0;padding: 0;display: none;

position: absolute;top: 35px;left: 0;z-index: 999999;

background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear, left bottom, left top, color-stop(0,

#111), color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-border-radius: 5px;border-radius: 5px;

}

#menu ul li{float: none;

margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

}

#menu ul li:last-child{

-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;

}

#menu ul a{padding: 10px;height: auto;line-height: 1;display: block;

white-space: nowrap;float: none;text-transform: none;

}

#menu ul a:hover{background: #FFB311;background: -moz-linear-gradient(#FFB311, #D6870E);background: -webkit-gradient(linear, left top, left bottom,

from(#FFB311), to(#D6870E));background: -webkit-linear-gradient(#FFB311, #D6870E);background: -o-linear-gradient(#FFB311, #D6870E);background: -ms-linear-gradient(#FFB311, #D6870E);


5/23

background: linear-gradient(#FFB311, #D6870E);}

#menu ul li:first-childa{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;

}

#menu ul li:first-childa:after{content: '';

position: absolute;left: 30px;top: -8px;

width: 0;height: 0;

border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;

}

#menu ul li:first-childa:hover:after{border-bottom-color: #04acec;

}

#menu ul li:last-childa{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;

}

#menu:after{visibility: hidden;display: block;

font-size: 0;content: " ";clear: both;height: 0;

}


6/23

If you run the page right now the result should look very similar to this

Now that we have our basic CSS finished in the classic form lets begin converting it to SASS.

The best way to do this would be to examine the CSS and look for repeating rules and values,values you are likely to change in the future, and any nested elements.

The repeating rules for this example are:

1.The classic rounded corners

-moz-border-radius: 50px;

border-radius: 50px;2.

The CSS3 gradients

background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear, left bottom, left top,color-stop(0, #111), color-stop(1, #444));

background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);

3.The CSS3 Box Shadows

-moz-box-shadow: 0 2px 1px #9c9c9c;-webkit-box-shadow: 0 2px 1px #9c9c9c;box-shadow: 0 2px 1px #9c9c9c;


7/23

4.The CSS3 gradient Box Shadows

-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

The best way to deal with repeating rules are to create mixins out of them. Mixins are classes

that can be inherited by subclasses saving you the effort of recreating elements that have

already been implemented. To do this in SASS you simply use the @mixin reserved keyword.

For example to create a rounded corner mixin we would do the following

@mixin rounded-corners(){-moz-border-radius: 50px;

border-radius: 50px;

}

But we can do better than that. Mixins in SASS also have the ability to take inputs with default

values

@mixin rounded-corners($size: 5px){

-moz-border-radius: $size

border-radius: $size

}

To top things off why not make them fully cross browser and give this mixin a little more

functionality, such as the ability to define what corners we wanted rounded?

@mixin cross-rounded-corners($topLeft: 5px, $topRight: 5px, $botLeft: 5px, $botRight: 5px){

-webkit-border-top-left-radius: $topLeft

-webkit-border-top-right-radius: $topRight

-webkit-border-bottom-right-radius: $botRight-webkit-border-bottom-left-radius: $botLeft

-moz-border-radius-topleft: $topLeft

-moz-border-radius-topright: $topRight

-moz-border-radius-bottomright: $botRight

-moz-border-radius-bottomleft: $botLeft

border-top-left-radius: $topLeft


8/23

border-top-right-radius: $topRight

border-bottom-right-radius: $botRight

border-bottom-left-radius: $botLeft

}

Now whenever we want to add this chunk of CSS into our main set of rules we would use the

@import key word like this

@import cross-rounded-corners( 50, 50, 50, 50 )

The Box Shadow mixins would come out as follows

@mixin cross-box-shadow($hShadow: 0, $vShadow: 0, $blur: 0, $spread: 0, $color: #FFFFFF){

-moz-box-shadow: $hShadow $vShadow $blur $spread $color

-webkit-box-shadow: $hShadow $vShadow $blur $spread $color

box-shadow: $hShadow $vShadow $blur $spread $color

}

@mixin cross-gradbox-shadow($hShadow: 0, $vShadow: 0, $blur: 0, $spread: 0, $color:

#FFFFFF, $hShadow2: 0, $vShadow2: 0, $blur2: 0, $spread2: 0, $color2: #FFFFFF){

-moz-box-shadow: $hShadow $vShadow $blur $spread $color, $hShadow2 $vShadow2

$blur2 $spread2 $color2-webkit-box-shadow: $hShadow $vShadow $blur $spread $color, $hShadow2 $vShadow2

$blur2 $spread2 $color2

box-shadow: $hShadow $vShadow $blur $spread $color, $hShadow2 $vShadow2 $blur2

$spread2 $color2

}

And finally our linear gradient mixin would be defined as

@mixin cross-vert-gradient($topCol: #FFFFFF, $botCol: #000000){background: -moz-linear-gradient($topCol, $botCol)

background: -webkit-linear-gradient($topCol, $botCol)

background: -o-linear-gradient($topCol, $botCol)

background: -ms-linear-gradient($topCol, $botCol)

background: linear-gradient($topCol, $botCol)

}


9/23

The next thing you should do store any repetitious values or values you would likely change

when you create a new theme into variables. Variables in SASS are defined using the $ symbol.

A few values which repeat in our example are

Rounded Corner Radius 50px

Gradient Colors #444, #111,

#FFB311, #D6870E

Box Shadow Colors #777, #111

The values we are likely to change for new themes are

Menu Gradient #444, #111,

Menu Font Colors #FAFAFA, #99999

Menu Shadows #777, #111

The variables we can define would be

$corners: 50px

/*Dusk Theme Colors*/

$duskMenuTop: #444444

$duskMenuBot: #111111

$duskDropTop: #444444

$duskDropBot: #444444$duskItemTop: #FFB311

$duskItemBot: #D6870E

$duskMenuText: #999999

$duskHoverText: #FAFAFA

$duskMenuShadow: #111111

$duskMenuShadow2: #777777

Now that we have our mixins and variables lets begin constructing our CSS method. The easiest

way to do this would be to follow the html structure and add rules for every new element or

attribute you encounter. If you encounter nested elements, you can simply indent and include

the attribute you encounter instead of typing out the full path with all parent elements.


10/23

To start off you can notice the main menu element has an id of #menu. You can use this the

same way you would in classic CSS to start your SASS method.

#menu

width: 100%

margin: 0padding: 10px 0 0 0

list-style: none

background: #111111

When you come to a point where your mixins are required you can simply use the @import

command.

#menu

width: 100%

margin: 0

padding: 10px 0 0 0

list-style: none

background: #111111

@include cross-vert-gradient($duskMenuTop, $duskMenuBot)

@include cross-rounded-corners($corners, $corners, $corners, $corners)

@include cross-box-shadow(0, 2, 1, 0, #9c9c9c)

If you need to assign special attribute such as :after or :hover you can use the & to assign the

element rather than the id, class, or element type.

#menu

width: 100%

margin: 0

padding: 10px 0 0 0

list-style: none

background: #111111




&:after

visibility: hidden

display: block

font-size: 0


11/23

content: " "

clear: both

height: 0

Be very careful to keep the & lined up with the parents rules or the SASS processor will not

interpret it correctly.

If you encounter a new nested element you can simply step back one level in your indentations

and assign the new element.

#menu

width: 100%

margin: 0

padding: 10px 0 0 0

list-style: none

background: #111111




&:after

visibility: hidden

display: block

font-size: 0

content: " "clear: both

height: 0

ul

list-style: none

margin: 0

padding: 0

display: none

position: absolute

top: 35px

left: 0z-index: 999999


12/23

The end result of our classic CSS into SASS will end up like this

/* Variables */

/* random variables */

$corners: 50px

$duskMenuTop:#444444

$duskMenuBot:#111111

$duskDropTop:#444444

$duskDropBot:#444444

$duskItemTop:#FFB311

$duskItemBot:#D6870E

$duskMenuText:#999999

$duskHoverText:#FAFAFA

$duskMenuShadow:#111111

$duskMenuShadow2:#777777/* Mixins */

/* Cross Browser Vertical Gradient Mixin */@mixin cross-vert-gradient($topCol:#FFFFFF, $botCol:#000000){

background: -moz-linear-gradient($topCol, $botCol)background: -webkit-linear-gradient($topCol, $botCol)background: -o-linear-gradient($topCol, $botCol)background: -ms-linear-gradient($topCol, $botCol)background: linear-gradient($topCol, $botCol)

}

/* Cross Browser Box Shadow Mixin */

@mixin cross-box-shadow($hShadow: 0, $vShadow: 0, $blur: 0, $spread: 0,$color: #FFFFFF){

-moz-box-shadow: $hShadow $vShadow $blur $spread $color-webkit-box-shadow: $hShadow $vShadow $blur $spread $color

box-shadow: $hShadow $vShadow $blur $spread $color}

/* Cross Browser Gradient Box Shadow Mixin */

@mixin cross-gradbox-shadow($hShadow: 0, $vShadow: 0, $blur: 0, $spread: 0,

$color: #FFFFFF, $hShadow2: 0, $vShadow2: 0, $blur2: 0, $spread2: 0, $color2:

#FFFFFF){-moz-box-shadow: $hShadow $vShadow $blur $spread $color, $hShadow2

$vShadow2 $blur2 $spread2 $color2-webkit-box-shadow: $hShadow $vShadow $blur $spread $color, $hShadow2

$vShadow2 $blur2 $spread2 $color2box-shadow: $hShadow $vShadow $blur $spread $color, $hShadow2 $vShadow2

$blur2 $spread2 $color2}

/* Cross Browser Border Radius */

@mixin cross-rounded-corners($topLeft: 5px, $topRight: 5px, $botLeft: 5px,$botRight: 5px){

-webkit-border-top-left-radius: $topLeft-webkit-border-top-right-radius: $topRight-webkit-border-bottom-right-radius: $botRight-webkit-border-bottom-left-radius: $botLeft-moz-border-radius-topleft: $topLeft-moz-border-radius-topright: $topRight-moz-border-radius-bottomright: $botRight


13/23

-moz-border-radius-bottomleft: $botLeftborder-top-left-radius: $topLeftborder-top-right-radius: $topRightborder-bottom-right-radius: $botRightborder-bottom-left-radius: $botLeft}

/* Logic */

#menu

width: 100%

margin: 0

padding: 10px 0 0 0

list-style: none/*apply the cross browser vertical gradient mixin */

background: #11111@include cross-vert-gradient($duskMenuTop, $duskMenuBot)

/* apply the cross browser rounded corners mixin and box shadows*/



/* menu after attribute */

&:after

visibility: hidden

display: block

font-size: 0

content: " "

clear: both

height: 0

/* ul that refers to the first ul child of #menu */

ul

list-style: none

margin: 0

padding: 0

display: none

position: absolute

top: 35pxleft: 0

z-index: 999999

background: #444444@include cross-vert-gradient($duskDropTop, $duskDropBot)@include cross-rounded-corners($corners, $corners, $corners,

$corners)

/* li that refers to list item children of ul child of #menu */

li

float: none

margin: 0

padding: 0

display: block

@include cross-gradbox-shadow(0, 1, 0, 0, $duskMenuShadow, 0,2, 0, $duskMenuShadow2)

/* last li child */

&:last-child

@include cross-box-shadow( none,none,none,none,none)/* anchor element of last child */

a

@include cross-rounded-corners(0,0, $corners, $corners)

&:first-child


14/23

/*anchor element of first child */

a

@include cross-rounded-corners($corners, $corners,0,0)/* after attribute of anchor of first child */

&:after

content: ''

position: absoluteleft: 30px

top: -8px

width: 0

height: 0

border-left: 5px solid transparent

border-right: 5px solid transparent

border-bottom: 8px solid #444

&:hover

&:after

border-bottom-color:#04acec/* a that refers to anchor children of ul child of #menu */

a

padding: 10px

height: auto

line-height: 1

display: block

white-space: nowrap

float: none

text-transform: none/* anchor hover attribute */

&:hoverbackground: $duskItemTop@include cross-vert-gradient($duskItemTop, $duskItemBot)

/* all li under menu */

li

float: left

padding: 0 0 10px 0

position: relative/* li hover */

&:hover/*anchor of li hover */

a

color:#FAFAFA/* hover of anchor of li hover */

&:hover

color:#FAFAFA/* ul of li hover */

ul

display: block

a

float: left

height: 25px

padding: 0 25pxcolor: #999999


15/23

text-transform: uppercase

font: bold 12px/25px Arial,Helvetica

text-decoration: none

text-shadow: 0 1px 0 #000

If you run this through your SASS processor youll end up with the same menu as you started

when you used the classic CSS, but now you have the option of easily modifying your menu

without sifting through all of your CSS. If you wanted to change the color of your anchor

elements for example, all you would need to do is change the $duskMenuText variable value.

Now that you have a general sense of what SASS can do to ease the burden of modification lets

take things one step further and add some customization functionality to your SASS file. For

examples purposes Im going to create two more color schemas called night and day.

/* Day Theme Colors */

$dayMenuTop: #33A5FF

$dayMenuBot: #66BFFF

$dayDropTop: #BDE7FF

$dayDropBot: #DDF3FF

$dayItemTop: #DAE9E9

$dayItemBot: #E8F4F4

$dayMenuText: #FFFFFF

$dayHoverText: #FAFAFA

$dayMenuShadow: #FFFFFF$dayMenuShadow2: #FAFAFA

/* Night Theme Colors */

$nightMenuTop: #353E66

$nightMenuBot: #303340

$nightDropTop: #111111

$nightDropBot: #444444

$nightItemTop: #6B5EA1

$nightItemBot: #1B286B

$nightHoverText: #FAFAFA

$nightMenuShadow: #111111

$nightMenuShadow: #777777

Before we begin implanting the color themes its important to add a control variable that tells

SASS what to do as the processor interprets the code.


16/23

$style: day

The values for this control variable can be day, dusk, or night since those are the three

themes I will be creating.

Now we need to have a way to tell SASS how to act when it encounters the $style variable.

One way to do this would be to implement the conditional operators @if, @else if and

@else.

The first place we are going to implement this type of control is in the #menus background

/* depending on the time of day you want to set the menu colors */ @if $style == day {

background: #66BFFF@include cross-vert-gradient($dayMenuTop, $dayMenuBot)}@else if $style == dusk {

background: #11111@include cross-vert-gradient($duskMenuTop, $duskMenuBot)

}@else if $style == night {background: #11111@include cross-ver-gradient($nightMenuTop, $nightMenuBot)

}

If you decide to omit the @else and $style is not defined as one of the predefined values the

SASS interpreter will simply output null for the @if block (or crash depending on what versionof SASS you are using).

The next places we will be implementing this are:

#main > ul

@if $style == day {background: #66BFFF /*give a background for browsers that don't support

css3*/@include cross-vert-gradient($dayDropTop, $dayDropBot)

}@else if $style == dusk

{background: #444444@include cross-vert-gradient($duskDropTop, $duskDropBot)

}@else if $style == night {background: #444444@include cross-ver-gradient($nightDropTop, $nightDropBot)

}


17/23

#main > ul > li

@if $style == day {@include cross-gradbox-shadow(0, 1, 0, 0, $dayMenuShadow, 0, 2, 0,

$dayMenuShadow2)}@else if $style == dusk {

@include cross-gradbox-shadow(0, 1, 0, 0, $duskMenuShadow, 0, 2, 0,$duskMenuShadow2)}@else if $style == night {

@include cross-gradbox-shadow(0, 1, 0, 0, $nightMenuShadow, 0, 2, 0,$nightMenuShadow2)}

#main > a:hover

@if $style == day {background: $dayItemTop@include cross-vert-gradient($dayItemTop, $dayItemBot)

}@else if $style == dusk{background: $duskItemTop@include cross-vert-gradient($duskItemTop, $duskItemBot)

}@else if $style == night {background: $nightItemTop@include cross-vert-gradient($nightItemTop, $nightItemBot)

}

a

@if $style == day {color: $dayMenuText

}@else {color: #999999

}

The finished SASS file will look like this

/* Variables */

$style: "day" /* can be replaced with dusk or night*/

/* random variables */

$corners: 50px

/* Day Theme Colors */

$dayMenuTop:#33A5FF


18/23

$dayMenuBot:#66BFFF

$dayDropTop:#BDE7FF

$dayDropBot:#DDF3FF

$dayItemTop:#DAE9E9

$dayItemBot:#E8F4F4

$dayMenuText: #FFFFFF

$dayHoverText:#FAFAFA

$dayMenuShadow:#FFFFFF

$dayMenuShadow2:#FAFAFA/* Dusk Theme Colors */

$duskMenuTop:#444444

$duskMenuBot:#111111

$duskDropTop:#444444

$duskDropBot:#444444

$duskItemTop:#FFB311

$duskItemBot:#D6870E

$duskMenuText:#999999

$duskHoverText:#FAFAFA

$duskMenuShadow:#111111

$duskMenuShadow2:#777777/* Night Theme Colors */

$nightMenuTop:#353E66

$nightMenuBot:#303340

$nightDropTop:#111111

$nightDropBot:#444444

$nightItemTop:#6B5EA1

$nightItemBot:#1B286B

$nightHoverText:#FAFAFA

$nightMenuShadow:#111111

$nightMenuShadow:#777777/* Mixins *//* Cross Browser Vertical Gradient Mixin */

@mixin cross-vert-gradient($topCol:#FFFFFF, $botCol:#000000){background: -moz-linear-gradient($topCol, $botCol)background: -webkit-linear-gradient($topCol, $botCol)background: -o-linear-gradient($topCol, $botCol)background: -ms-linear-gradient($topCol, $botCol)background: linear-gradient($topCol, $botCol)

}

/* Cross Browser Box Shadow Mixin */

@mixin cross-box-shadow($hShadow: 0, $vShadow: 0, $blur: 0, $spread: 0,$color: #FFFFFF){

-moz-box-shadow: $hShadow $vShadow $blur $spread $color-webkit-box-shadow: $hShadow $vShadow $blur $spread $color

box-shadow: $hShadow $vShadow $blur $spread $color}

/* Cross Browser Gradient Box Shadow Mixin */

@mixin cross-gradbox-shadow($hShadow: 0, $vShadow: 0, $blur: 0, $spread: 0,

$color: #FFFFFF, $hShadow2: 0, $vShadow2: 0, $blur2: 0, $spread2: 0, $color2:

#FFFFFF){-moz-box-shadow: $hShadow $vShadow $blur $spread $color, $hShadow2

$vShadow2 $blur2 $spread2 $color2


19/23

-webkit-box-shadow: $hShadow $vShadow $blur $spread $color, $hShadow2$vShadow2 $blur2 $spread2 $color2

box-shadow: $hShadow $vShadow $blur $spread $color, $hShadow2 $vShadow2$blur2 $spread2 $color2}

/* Cross Browser Border Radius */

@mixin cross-rounded-corners($topLeft: 5px, $topRight: 5px, $botLeft: 5px,$botRight: 5px){

-webkit-border-top-left-radius: $topLeft-webkit-border-top-right-radius: $topRight-webkit-border-bottom-right-radius: $botRight-webkit-border-bottom-left-radius: $botLeft-moz-border-radius-topleft: $topLeft-moz-border-radius-topright: $topRight-moz-border-radius-bottomright: $botRight-moz-border-radius-bottomleft: $botLeft

border-top-left-radius: $topLeftborder-top-right-radius: $topRightborder-bottom-right-radius: $botRightborder-bottom-left-radius: $botLeft

}/* Logic */

#menu

width: 100%

margin: 0

padding: 10px 0 0 0

list-style: none/* depending on the time of day you want to set the menu colors */@if $style == day {

background: #66BFFF /*give a background for browsers that don't

support css3*//*apply the cross browser vertical gradient mixin */@include cross-vert-gradient($dayMenuTop, $dayMenuBot)

}@else if $style == dusk {background: #11111@include cross-vert-gradient($duskMenuTop, $duskMenuBot)

}@else if $style == night {background: #11111@include cross-ver-gradient($nightMenuTop, $nightMenuBot)

}/* apply the cross browser rounded corners mixin and box shadows*/



/* menu after attribute */

&:after

visibility: hidden

display: block

font-size: 0

content: " "

clear: both

height: 0

/* ul that refers to the first ul child of #menu */

ul

list-style: none

margin: 0

padding: 0


20/23

display: none

position: absolute

top: 35px

left: 0

z-index: 999999

@if $style == day {background: #66BFFF /*give a background for browsers that don't

support css3*/@include cross-vert-gradient($dayDropTop, $dayDropBot)

}@else if $style == dusk {background: #444444@include cross-vert-gradient($duskDropTop, $duskDropBot)

}@else if $style == night {background: #444444@include cross-ver-gradient($nightDropTop, $nightDropBot)

}@include cross-rounded-corners($corners, $corners, $corners,

$corners)

/* li that refers to list item children of ul child of #menu */

li

float: nonemargin: 0

padding: 0

display: block

@if $style == day {@include cross-gradbox-shadow(0, 1, 0, 0, $dayMenuShadow,

0, 2, 0, $dayMenuShadow2)}@else if $style == dusk {

@include cross-gradbox-shadow(0, 1, 0, 0,$duskMenuShadow, 0, 2, 0, $duskMenuShadow2)

}@else if $style == night {@include cross-gradbox-shadow(0, 1, 0, 0,

$nightMenuShadow, 0, 2, 0, $nightMenuShadow2)}

/* last li child */

&:last-child

@include cross-box-shadow( none,none,none,none,none)/* anchor element of last child */

a

@include cross-rounded-corners(0,0, $corners, $corners)

&:first-child/*anchor element of first child */

a

@include cross-rounded-corners($corners, $corners,0,0)/* after attribute of anchor of first child */

&:after

content: ''position: absolute

left: 30px

top: -8px

width: 0

height: 0

border-left: 5px solid transparent

border-right: 5px solid transparent


21/23

border-bottom: 8px solid #444

&:hover

&:after

border-bottom-color:#04acec/* a that refers to anchor children of ul child of #menu */

a

padding: 10pxheight: auto

line-height: 1

display: block

white-space: nowrap

float: none

text-transform: none/* anchor hover attribute */

&:hover@if $style == day {background: $dayItemTop@include cross-vert-gradient($dayItemTop, $dayItemBot)

}@else if $style == dusk{background: $duskItemTop@include cross-vert-gradient($duskItemTop, $duskItemBot)

}@else if $style == night {background: $nightItemTop@include cross-vert-gradient($nightItemTop, $nightItemBot)

}

/* all li under menu */

li

float: left

padding: 0 0 10px 0

position: relative/* li hover */

&:hover/*anchor of li hover */

a

color:#FAFAFA/* hover of anchor of li hover */

&:hover

color:#FAFAFA/* ul of li hover */

ul

display: block

a

float: left

height: 25pxpadding: 0 25px@if $style == day {

color: $dayMenuText}@else {

color: #999999}

text-transform: uppercase

font: bold 12px/25px Arial,Helvetica


22/23

text-decoration: none

text-shadow: 0 1px 0 #000

The day theme should look like the following

If you set the $style variable to night, the theme should look like the following

And setting the $style variable to dusk should put you back to the default theme


23/23

Further Reading

If you want to find out more about SASS and look at their api their homepage is a great place to

start.

http://sass-lang.com/

The overview that got me started can be found here

http://blog.montylounge.com/2011/08/4/review-sass/

The original CSS that inspired my overall menu design can be found here

http://www.red-team-design.com/css3-dropdown-menu
http://sass-lang.com/http://sass-lang.com/http://blog.montylounge.com/2011/08/4/review-sass/http://blog.montylounge.com/2011/08/4/review-sass/http://www.red-team-design.com/css3-dropdown-menuhttp://www.red-team-design.com/css3-dropdown-menuhttp://www.red-team-design.com/css3-dropdown-menuhttp://blog.montylounge.com/2011/08/4/review-sass/http://sass-lang.com/

sass tutorial - pavan vatti

Documents