sass tutorial - pavan vatti
Post on 14-Apr-2018
227 Views
Preview:
TRANSCRIPT
-
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.
-
7/30/2019 SASS Tutorial - Pavan Vatti
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
-
7/30/2019 SASS Tutorial - Pavan Vatti
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;
}
-
7/30/2019 SASS Tutorial - Pavan Vatti
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);
-
7/30/2019 SASS Tutorial - Pavan Vatti
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;
}
-
7/30/2019 SASS Tutorial - Pavan Vatti
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/30/2019 SASS Tutorial - Pavan Vatti
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
-
7/30/2019 SASS Tutorial - Pavan Vatti
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)
}
-
7/30/2019 SASS Tutorial - Pavan Vatti
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.
-
7/30/2019 SASS Tutorial - Pavan Vatti
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
@include cross-vert-gradient($duskMenuTop, $duskMenuBot)
@include cross-rounded-corners($corners, $corners, $corners, $corners)
@include cross-box-shadow(0, 2, 1, 0, #9c9c9c)
&:after
visibility: hidden
display: block
font-size: 0
-
7/30/2019 SASS Tutorial - Pavan Vatti
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
@include cross-vert-gradient($duskMenuTop, $duskMenuBot)
@include cross-rounded-corners($corners, $corners, $corners, $corners)
@include cross-box-shadow(0, 2, 1, 0, #9c9c9c)
&: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
-
7/30/2019 SASS Tutorial - Pavan Vatti
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
-
7/30/2019 SASS Tutorial - Pavan Vatti
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*/
@include cross-rounded-corners($corners, $corners, $corners, $corners)
@include cross-box-shadow(0, 2, 1, 0, #9c9c9c)
/* 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
-
7/30/2019 SASS Tutorial - Pavan Vatti
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
-
7/30/2019 SASS Tutorial - Pavan Vatti
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.
-
7/30/2019 SASS Tutorial - Pavan Vatti
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)
}
-
7/30/2019 SASS Tutorial - Pavan Vatti
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
-
7/30/2019 SASS Tutorial - Pavan Vatti
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
-
7/30/2019 SASS Tutorial - Pavan Vatti
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*/
@include cross-rounded-corners($corners, $corners, $corners, $corners)
@include cross-box-shadow(0, 2, 1, 0, #9c9c9c)
/* 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
-
7/30/2019 SASS Tutorial - Pavan Vatti
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
-
7/30/2019 SASS Tutorial - Pavan Vatti
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
-
7/30/2019 SASS Tutorial - Pavan Vatti
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
-
7/30/2019 SASS Tutorial - Pavan Vatti
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/
top related