SASS Examples

Structure

How to add sass to your stylesheet.

Examples

Ordering in SASS
  1. 1) List @extends(s)
  2. 2) List "regular" styles
    • Box (display, position, height, width)
    • Border
    • Background
    • Text (font-family, font-size, text-transform, letter-spacing)
    • Other
  3. 3) List @includes(s)
  4. 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 FunctionsNone
Locale KeysNone

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 FunctionsNone
Locale KeysNone

Accessibility

None at this time.

To Top