SASS / SCSS Cheatsheet

SASS-SCSS-cheatsheet.txt

// Compile SASS or SCSS once from the command line
// sass --update sass-directory:css-directory
sass --update sass:css

// Watch SASS or SCSS directory from the command line
// sass --watch sass-directory:css-directory
sass --watch sass:css

// Watch SASS or SCSS file from the command line
sass --watch sass/sass-file.scss:css/css-file.css

// SASS function to encode SVG and use as background image:
@function svg-url($svg) {
		$encoded: '';
		$slice: 2000;
		$index: 0;
		$loops: ceil(str-length($svg)/$slice);
		@for $i from 1 through $loops {
				$chunk: str-slice($svg, $index, $index + $slice - 1);
				$chunk: str-replace($chunk, '"', '\'');
				$chunk: str-replace($chunk, '<', '%3C');
				$chunk: str-replace($chunk, '>', '%3E');
				$chunk: str-replace($chunk, '&', '%26');
				$chunk: str-replace($chunk, '#', '%23');
				$encoded: #{$encoded}#{$chunk};
				$index: $index + $slice;
		}
		@return url("data:image/svg+xml,#{$encoded}");
}