An Introduction to Sass

Syntactically Awesome StyleSheets

Created by RobertJames / @bkrjames

Preprocessors

"A preprocessor is a program that processes its input data to produce output that is used as input to another program" - wikipedia

Sass is one of many CSS preprocessors .

CSS Processors

Less

Stylus

Sass

Pros

Modularize your project into multiple files called partials in developement environment.

									
										├── components
										│   ├── _buttons.scss
										│   ├── forms.scss
										│   └── _navigation.scss
										├── config
										│   ├── _extends.scss
										│   ├── _functions.scss
										│   ├── _mixins.scss
										│   └── _variables.scss
										├── layout
										│   ├── _footer.scss
										│   ├── _grids.scss
										│   ├── _header.scss
										│   └── _sidebar.scss
										└── main.scss
									
								

All import to one .scss file

Pros

Large Community of Libraries and Frameworks

Cons

Compilations of large files can sometimes be slow

However, when sass imports files it caches them, which greatly increases the speed

@Directives

• at-root
• extend
• include
• import
• media

@at-root

								
									.avatar {
										  background-color: red;
										  height: 120px;
										  margin: 40px;
										  width: 120px;

										  @at-root {
										    @keyframes fade {
										      0% { transform: scale(1.0); }
										      25% { transform: scale(1.1); }
										      50% { transform: scale(1.0); }
										      75% { transform: scale(1.2); }
										      100% { transform: scale(1.1); }
										    }
										  }
										  &:hover {
										    animation: fade .8s infinite ease-in alternate;
										  }
										}

										--Outputs--

										.avatar {
						  background-color: red;
						  height: 120px;
						  margin: 40px;
						  width: 120px;
							}
							@keyframes fade {
							  0% {
							    transform: scale(1);
							  }
							  25% {
							    transform: scale(1.1);
							  }
							  50% {
							    transform: scale(1);
							  }
							  75% {
							    transform: scale(1.2);
							  }
							  100% {
							    transform: scale(1.1);
							  }
							}
							.avatar:hover {
							  animation: fade .8s infinite ease-in alternate;
							}

								
							

@extend

									
										.error {
											  border: 1px #f00;
											  background-color: #fdd;
											}
											.seriousError {
											  @extend .error;
											  border-width: 3px;
											}
												
												/*** Outputs ***/

											.error, .seriousError {
											  border: 1px #f00;
											  background-color: #fdd;
											}

											.seriousError {
											  border-width: 3px;
											}
									
								

@include

							
								@include mq(ml) {
								    .nav-top {display: none;}
								}
							
						

@imports

Allows you to import modules and partials

								
									@import "compass/utilities";
									@import "partials/base";
									@import "partials/fonts";
								
							

@media

							
								.profile-img {
								  float: left;
								  width: 10em;
								    @media screen and (min-width: 25em){
								      width: 15em;
								   }
								} 	

							--OutPuts--	

								.profile-img {
									  float: left;
									  width: 10em; }
									  @media screen and (min-width: 25em) {
									    .profile-img {
									      width: 15em;
									    }
									  }					
							
						

Control Directives

• @if
• @else
• @else if
• @each
• @for
• @while>

@if

							
								@function f($a) {
							    @return if(length($a) > 1, nth($a, 2), $a);
							}
							
						

@else

@else if

							
								@mixin li ($style) {
									  @if ($style == float) {
									    float:right;
									    margin-left: 2%;
									  }
									  
									  @else if ($style == inline){
									     display: inline;
									     margin-right: 2%;
									  }
									}
							
						

@each

							
								$breakpoints: (
												s: 20em,
												m: 30em,
												l: 48em,
												xl: 64em,  
											);

											@mixin mq($) {
											  @each $name, $breakpoint in $breakpoints {
											    @if ($name == $size) {
											      @media (max-width: $breakpoint) {
											        @content;
											      }
											    }
											  }
											}
							
						

@for

							
								@for $i from 1 through $grid-columns {
								  .grid-#{$i} { @include grid-base($i); @extend .grid-block; }
								}
							
						

@while

							
								$types: 4
								$type-width: 20px

								@while $types > 0
								  .while-#{$types}
								    width: $type-width + $types
								  $types: $types - 1