css_sass.html

---
layout: admin
title: CSS - Sass

section: css
module: css_sass

header:
    icon: lightbulb_outline
    title: Sass
    description: Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
---

				<section id="css_sass">
					<!-- ######### -->
					<!-- Variables -->
					<!-- ######### -->
					<div class="row">
						<div class="col s12">
							<h4 class="main-text lighten-1">Variables</h4>
							<p>When using Sass, you can change the color scheme of your site extremely quickly. Below is a very small sample of what you can change through sass in <code>_variables.scss</code>.</p>

							<pre>
								<code class="language-scss">
$primary-color: color("materialize-red", "lighten-2") !default;
$primary-color-light: false !default;
$primary-color-dark: false !default;
@if not $primary-color-light {
	$primary-color-light: lighten($primary-color, 15%);
}
@if not $primary-color-dark {
	$primary-color-dark: darken($primary-color, 15%);
}
$secondary-color: color("teal", "lighten-1") !default;
$success-color: color("green", "base") !default;
$error-color: color("red", "base") !default;

$link-color: color("light-blue", "darken-1") !default;

/*** More variables not shown here.. ***/
		        		</code>
		        	</pre>
						</div>
					</div>


					<!-- ############# -->
					<!-- Media Queries -->
					<!-- ############# -->
					<div class="row margin-top-25">
						<div class="col s12">
							<h4 class="main-text lighten-1">Media Queries</h4>
							<p>We have 3 media queries for the 3 standard screen sizes you can use in your custom Sass files. This also includes media query variables that will define the range.</p>
							<p>
								Small screens are defined as having a max-width of 600px
								<br>
								Medium screens are defined as having a max-width of 992px
								<br>
								Large screen are defined as having a min-width of 993px
							</p>

							<h5 class="margin-top-35">CSS</h5>
							<pre>
								<code class="language-css">
/* These classes can be added to HTML Elements
 * to affect visibility on certain displays.
 */
.hide-on-small-only
.hide-on-small-and-down
.hide-on-med-and-down
.hide-on-med-and-up
.hide-on-med-only
.hide-on-large-only
.show-on-large
.show-on-medium
.show-on-small
.show-on-medium-and-up
.show-on-medium-and-down
		        		</code>
		        	</pre>

							<h5 class="margin-top-35">Sass</h5>
							<pre>
								<code class="language-scss">
@media #{$small-and-down} {
	// styles for small screens and down
}
@media #{$medium-and-up} {
	// styles for medium screens and larger
}
@media #{$medium-and-down} {
	// styles for medium screens and down
}
@media #{$large-and-up} {
	// styles for large screens and up
}
		        		</code>
		        	</pre>
						</div>
					</div>


					<!-- ######## -->
					<!-- Prefixer -->
					<!-- ######## -->
					<div class="row margin-top-25">
						<div class="col s12">
							<h4 class="main-text lighten-1">Prefixer</h4>
							<p>One major goal of this framework is to be as adaptable as possible which includes cross browser compatibility. We have adapted a prefixer script to Sass which will automatically add all browser prefixes for certain CSS properties.</p>

							<p class="margin-top-35">For Example: Using this Sass mixin</p>
							<pre>
								<code class="language-scss">
@include transition(.3s);
				        		</code>
				        	</pre>

							<p>Will Output This</p>
							<pre>
								<code class="language-css">
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
		        		</code>
		        	</pre>

							<p class="margin-top-35">Here is the full list of mixins</p>
							<pre>
								<code class="language-scss">
animation($args)
animation-delay($delay)
animation-direction($direction)
animation-duration($duration)
animation-fill-mode($mode)
animation-iteration-count($count)
animation-name($name)
animation-play-state($state)
animation-timing-function($function)
background-size($args)
box-sizing($args)
	border-box()
	content-box()
columns($args)
	column-count($count)
	column-gap($gap)
	column-rule($args)
	column-width($width)
gradient($default,$start,$stop)
	linear-gradient-top($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])
	linear-gradient-left($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])
transform($args)
	transform-origin($args)
	transform-style($style)
	rotate($deg)
	scale($factor)
	translate($x,$y)
	translate3d($x,$y,$z)
	translateHardware($x,$y)
text-shadow($args)
transition($args)
	transition-delay($delay)
	transition-duration($duration)
	transition-property($property)
	transition-timing-function($function)
		        		</code>
		        	</pre>
						</div>
					</div>
				</section>