Sass

Variables

Font
Color
Border
Width
Breakpoint

Font Variables

2 approved font styles to choose from.

Examples

$font-stack-opensans
Open Sans

$font-stack-caveat-new
Caveat

Code

					
font-family: $font-stack-opensans;
font-family: $font-stack-caveat-new;

Notes

Individual fonts should never be listed in the scss files.

Resources

Sass File(s)	/sass/base/_variables.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

None at this time.

Color Variables

Approved colors to choose from.

Examples

$red

$dkRed

$yellow

$green

$teal

$blue

$purple

$white

$ltGray

$mdGray

$dkGray

$darkestGray

$black

$errorRed

$alertYellow

Code

					
color: $blue;

Notes

Variable names (and all other Sass identifiers) can use hyphens and underscores interchangeably. For example, if you define a variable called $main-width, you can access it as $main_width, and vice versa.

The variables should be used whenever possible instead of listing the actual Hex numbers to define colors.

Resources

Sass File(s)	/sass/base/_variables.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

None at this time.

Border Variables

Pre-defined border sizes to use.

Examples

$border-solid-thick

$border-solid-medium

$border-solid-thin

Code

					
border: $border-solid-thick $blue;

Notes

None at this time.

Resources

Sass File(s)	/sass/base/_variables.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

None at this time.

Width Variables

Pre-defined width variables.

Examples

$full-width-pixels
width: 1034px;

$full-width-pixels-1500
width: 1500px;

$full-percent
width: 100%;

Code

					
width: $full-percent;

Notes

None at this time.

Resources

Sass File(s)	/sass/base/_variables.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

None at this time.

Breakpoint Variables

Easily add breakpoint widths to stylesheets with these variables.

Examples

$break-medium
450px

$break-medlarge
600px

$break-large
800px

$break-xtralarge
1000px

Code

					
@media only screen and (min-width: $break-medlarge) { }

Notes

None at this time.

Resources

Sass File(s)	/sass/base/_variables.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

None at this time.

Round Corner

Add rounded corners to your element without worry about browser prefixes.

Examples

@include border-radius(2rem);
integer

Code

					
.button { @include border-radius(1rem); }
.button { @include border-radius(1rem 2rem 1rem 0.5rem); }

Notes

None at this time.

Resources

Sass File(s)	/sass/base/_mixins.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

None at this time.

Box Size

Change the behavior of the element by adding box-size declaration.

Examples

@include box-sizing(border-box);
content-box | border-box | initial | inherit

Code

					
select  { @include box-sizing(content-box); }

Notes

None at this time.

Resources

Sass File(s)	/sass/base/_mixins.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

None at this time.

Rotate

Add a rotation in your stylesheet without worrying about browser prefixes.

Examples

@include rotate(45deg);
integer + "deg"

Code

					
.rotate45 { @include rotate(45deg); }

Notes

None at this time.

Resources

Sass File(s)	/sass/base/_mixins.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

None at this time.

Transform

Add transform changes to your element without worry about browser prefixes.

Examples

@include transformed(translate3d(0, 0, 0));
transform

Code

					
.element { @include transformed(translate3d(0, 0, 0)); }

Notes

None at this time.

Resources

Sass File(s)	/sass/base/_mixins.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

None at this time.

Box-Shadow

Add box shadows to your element without worry about browser prefixes.

Examples

@include box-shadow(0 0.05rem 0.5rem rgba(0,0,0,.3));
shadow

Code

					
.element { @include box-shadow( 0 0.05rem 0.5rem rgba(0,0,0,.3)); }

Notes

None at this time.

Resources

Sass File(s)	/sass/base/_mixins.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

None at this time.

Font Smoothing

Add font smoothing when element is being transformed without worry about browser prefixes.

Examples

@include font-smoothing;

Code

					
.element { @include font-smoothing; }

Notes

None at this time.

Resources

Sass File(s)	/sass/base/_mixins.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

None at this time.

Animations

Add animations and keyframes without worry about browser prefixes.

Examples

@include animation(fadein 1s, fadeout 1s 4.5s); @include keyframes(slideMainMenu) { ... }

Code

					
.element { @include animation(fadein 1s, fadeout 1s 4.5s); }

Notes

None at this time.

Resources

Sass File(s)	/sass/base/_mixins.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

None at this time.

Flexbox Mixins

Predefined SASS mixins that can be used in a CSS file.

Examples

@include flexbox();

@include flex(3);
integer | initial | auto | none

@include flex-wrap(nowrap);
nowrap | wrap | wrap-reverse

@include align-items(stretch);
flex-start | flex-end | center | baseline | stretch

@include flex-direction(row);
row | row-reverse | column | column-reverse

@include justify-content(space-between);
flex-start | flex-end | center | space-between | space-around

@include order(2);
integer

Code

					
.items { @include flex-wrap(nowrap); }

Notes

None at this time.

Resources

Sass File(s)	/sass/base/_mixins.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

None at this time.

Extends & Placeholders

Extend
Placeholder

Extend

Clones the attributes from rules and allows you to add them to another rule.

Examples

@extend .button-core;

Code

					
.button-core { padding: 10px; }
.button-md { @extend .button-core; }

Notes

These should always be listed first in your CSS declarations.

Resources

Sass File(s)	None
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

None at this time.

Placeholder

Instead of repeating styles we can use @extend to extend the placeholder rule.

Examples

%placeholder-styles { margin: 0; padding: 0; border: none; }

.item { @extend %placeholder-styles; height: 25px; }

Code

					
%placeholder-styles { 
	margin: 0; 
	padding: 0; 
	border: none; 
}       
.item{
	@extend %placeholder-styles;
}

Notes

None at this time.

Resources

Sass File(s)	None
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

None at this time.

Animations

How To
Fade In & Zoom In
In and Down
In All Directions
Fade Out & Zoom Out
Out All Directions
Shake

How To Use

Additional classes that can be used to create your desired animation.

Examples

animate
Required on all animated elements
Animation plays for 1 second

animateInfinite
Animation will replay forever

animateRepeat1
Animation repeats once

animateRepeat2
Animation repeats twice

animateRepeat3
Animation repeats three times

animateDelay1s
Animation is delayed 1 second

animateDelay2s
Animation is delayed 2 seconds

animateDelay3s
Animation is delayed 3 seconds

animateDelay4s
Animation is delayed 4 seconds

animateDelay5s
Animations is delayed 5 seconds

animateFast
Animation plays for 0.8 seconds

animateFaster
Animation plays for 0.5 seconds

animateFastest
Animation plays for 0.3 seconds

animateSlow
Animation plays for 2 seconds

animateSlower
Animation plays for 3 seconds

Code

					
<div class="animate animateFadeIn animateFaster">Your Element</div>

Notes

Must use animate class on every animated element.

The animate class already has a set duration of 1 second. Only use additional classes if you would like to change this.

This has been adapted from Animate.css.

Resources

Sass File(s)	/sass/animations/new/_core.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

Already set up so user can turn off animations if preferred.

Fade In, Zoom In

Animations that come into the page in their static position.

Examples

animateFadeIn

Hello!

animateZoomIn

Hello!

Code

					
<div class="animate animateFadeIn">Your Element</div>
<div class="animate animateZoomIn">Your Element</div>

/* optional */
const fadeIn = element => {
	element.classList.remove("animateFadeOut");
	element.classList.add("animateFadeIn");
	element.classList.remove("hide");
};

Notes

If wanting to use a fadeIn function in your Javascript, see code example.

Resources

Sass File(s)	/sass/animations/new/_core.scss /sass/animations/new/_fadein.scss or /sass/animations/new/_zoomin.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

Already set up so user can turn off animations if preferred.

Fade In Down, Slide In Down, Bounce In Down

Animations that begin near the top and come down to appear.

Examples

animateFadeInDown

Hello!

animateSlideInDown

Hello!

animateBounceInDown

Hello!

Code

					
<div class="animate animateFadeInDown">Your Element</div>
<div class="animate animateSlideInDown">Your Element</div>

Notes

None at this time.

Resources

Sass File(s)	/sass/animations/new/_core.scss /sass/animations/new/_fadeindown.scss or /sass/animations/new/_slideindown.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

Already set up so user can turn off animations if preferred.

Fade In Left, Fade In Right, Fade In Up

Animations that fade onto the page from left, right or bottom.

Examples

animateFadeInLeft

Hello!

animateFadeInRight

Hello!

animateSlideInUp

Hello!

Code

					
<div class="animate animateFadeInLeft">Your Element</div>
<div class="animate animateFadeInRight">Your Element</div>
<div class="animate animateSlideInUp">Your Element</div>

Notes

None at this time.

Resources

Sass File(s)	/sass/animations/new/_core.scss /sass/animations/new/_fadeinleft.scss or /sass/animations/new/_fadeinright.scss or /sass/animations/new/_slideinup.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

Already set up so user can turn off animations if preferred.

Fade Out, Zoom Out

Animations that exit the page in their static position.

Examples

animateFadeOut

Hello!

animateZoomOut

Hello!

Code

					
<div class="animate animateFadeOut">Your Element</div>
<div class="animate animateZoomOut">Your Element</div>

/* optional */
const fadeOut = element => {
	element.classList.remove("animateFadeIn");
	element.classList.add("animateFadeOut");
	setTimeout(() => {
		element.classList.add("hide");
	}, 400);
};

Notes

If wanting to use a fadeOut function in your Javascript, see code example and update the timeout duration to match animation length.

Resources

Sass File(s)	/sass/animations/new/_core.scss /sass/animations/new/_fadeout.scss or /sass/animations/new/_zoomout.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

Already set up so user can turn off animations if preferred.

Fade In Left, Fade In Right, Fade In Up

Animations that fade off the page to the left, right or bottom.

Examples

animateFadeOutDown

Hello!

animateSlideOutLeft

Hello!

animateFadeOutLeftBig

Hello!

animateSlideOutRight

Hello!

animateSlideOutUp

Hello!

Code

					
<div class="animate animateFadeOutDown">Your Element</div>
<div class="animate animateSlideOutLeft">Your Element</div>
<div class="animate animateFadeOutLeftBig">Your Element</div>
<div class="animate animateSlideOutRight">Your Element</div>

Notes

None at this time.

Resources

Sass File(s)	/sass/animations/new/_core.scss /sass/animations/new/_fadeoutdown.scss or /sass/animations/new/_slideoutleft.scss or /sass/animations/new/_fadeoutleftbig.scss or /sass/animations/new/_slideoutright.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

Already set up so user can turn off animations if preferred.

Shake Horizontal, Shake Vertical

Animations that move the element left and right or up and down.

Examples

animateShakeHorizontal

Hello!

animateShakeVertical

Hello!

Code

					
<div class="animate animateShakeHorizontal">Your Element</div>
<div class="animate animateShakeVertical">Your Element</div>

Notes

None at this time.

Resources

Sass File(s)	/sass/animations/new/_core.scss /sass/animations/new/_shakevertical.scss or /sass/animations/new/_shakehorizontal.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

Already set up so user can turn off animations if preferred.

SASS Examples

Structure
Examples

Structure

How to add sass to your stylesheet.

Examples

Ordering in SASS

1) List @extends(s)
2) List "regular" styles
- Box (display, position, height, width)
- Border
- Background
- Text (font-family, font-size, text-transform, letter-spacing)
- Other
3) List @includes(s)
4) List nested selectors

Code

					
h1 { color: $blue;
	&.heading { padding: 20px; }
}        	

.multiple,
.classes,
.get-new-lines {
	display: block;
}

Notes

Partial sass files are named with a _ in front of the name (_partial.scss).

Put space after : in property declarations.

Put space before { in rule declarations.

Each declaration should appear on its own line.

All vendor prefixes should bet set in @mixins.

If you must use an id selector #selector make sure that you have no more than one in your rule declaration. ex: A rule like #header .search #quicksearch { ... } is considered harmful.

/* */ multiline comments are preserved in the CSS output while the // single-line comments are removed.

Avoid specifying units for zero values ( ex: margin: 0; instead of margin: 0px; ).

Avoid unnecessary nesting in SCSS. At most, aim for three levels.

More Information

Resources

Sass File(s)	None
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

None at this time.

Examples

Learn how to best set up your SASS file by copying these examples.

Examples

.example1 {
    //single line comment

    /*multi-line
    comment*/

    @extend %button-core;
    height: 25px;
    width: 35px;
    line-height: 25px;
    @include border-radius(5px);
}

.example2{
    border: $border-solid-thin $darkestGray;
    color: $blue;

    &:visited { color: $blue; }
    &:hover { color: $white; }
    &:focus { color: $white; }
    &:active { color: $blue; }
}

Code

					
button.bkgdWhite,
a.bkgdWhite {
	border: $border-solid-thin $darkestGray;
	background-color: $white;
	color: $blue;

	&:visited   { background-color: $white; color: $blue; }
	&:hover     { background-color: $blue; color: $white; }
	&:focus     { background-color: $blue; color: $white; }
	&:active    { background-color: $blue; }
}

Notes

None at this time.

Resources

Sass File(s)	None
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

None at this time.