stolksdorf · August 5, 2015 23:41
diff --git a/gistfile1.txt b/gistfile1.txt
 # Week 9 - CSS Preprocessors

 This week we will be super charging your stlying with CSS preprocessors. CSS is a pretty difficult language to work with, there's no variables, it's hard to group styles together, and reusing the same styles in different places requires you to edit your HTML. Not good. CSS preprocessors are a program (called a compiler) that takes styles written in a better language and translate them to regular CSS for you. There are a few different preprocessors out there, but we are going to be focusing on [LESS](http://lesscss.org/).


 ### What is LESS

 LESS is a *super-set* of CSS, meaning it looks very similar to CSS but adds much more functionality. Here's an example of it:

 	@green : #2ecc71;
 	.content{
 		@contentWidth : 300px;
 		width : @contentWidth;
 		h1{
 			font-size : 2em;
 			color : @green;
 		}
 		button.save{
 			.button(@green);
 			width : @contentWidth
 		}
 	}
 	.button(@color){
 		border-radius : 4px;
 		background-color : @color;
 		padding : 5px
 	}

 The result when compiled to CSS:

 	.content {
 		width: 300px;
 	}
 	.content h1 {
 		font-size: 2em;
 		color: #2ecc71;
 	}
 	.content button.save {
 		border-radius: 4px;
 		background-color: #2ecc71;
 		padding: 5px;
 		width: 300px;
 	}

 The key festures of LESS we'll be using are **Nesting**, **Variables**, and **Mixins**.


 ### The Compiler
 We'll be using the web-based javascript compiler for LESS. It's the easiest way to get started using CSS preprocessors. It's just a javascript library you include in the `HEAD` of your page. You then reference your LESS files basically the same as your CSS files. The javascript compiler will read your less files when the page loads, translate thme to CSS and run that CSS on your page.

 	<head>
 		<link rel="stylesheet/less" type="text/css" href="styles.less" />
 		<link rel="stylesheet/less" type="text/css" href="moreCoolStyles.less" />

 		<!-- must be included -after- all of your less files -->
 		<script src="http://cdnjs.buttflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
 	</head>

 Most professional projects do this compile step before upload their code to the server, so the user's browser doesn't have to do this work, but this adds an additional step and we just want to experiment for now.

 **Note** : Due to a security thing in Chrome, if you want to run your html file locally (says `files://C://...` in the navbar) and use LESS, [you'll need to follow this](http://www.paulrohde.com/using-less-js-locally-with-chrome/). Otherwise it won't work.



 ### Nesting
 In regular CSS you tend to start writing very long selectors to specifically target certain elements, eg. `nav li .navItem a`. This can get tedius and if you change a parent element you can have many selectors to update. In LESS we can nest child rules within the parents.

 In CSS

 	nav {
 	    height: 40px;
 	    width: 100%;
 	    background: #455868;
 	    border-bottom: 2px solid #283744;
 	}
 	nav li {
 	    width: 600px;
 	    height: 40px;
 	}
 	nav li a {
 	    color: #fff;
 	    line-height: 40px;
 	    text-shadow: 1px 1px 0px #283744;
 	}

 In LESS

 	nav {
 	    height: 40px;
 	    width: 100%;
 	    background: #455868;
 	    border-bottom: 2px solid #283744;
 	    li {
 	        width: 600px;
 	        height: 40px;
 	        a {
 	            color: #fff;
 	            line-height: 40px;
 	            text-shadow: 1px 1px 0px #283744;
 	        }
 	    }
 	}


 ### Variables
 Very often in your CSS you'll end up repeating the same values over and over, usually colors or pixel sizes. On small projects it's not bad to update them all if you need you change one color, but as your project grows, this becomes unmaintainable.

 Variables let us declare a value with a name once, and just use that name everywhere it's needed.

 	@color-base: #2d5e8b;
 	.class1 {
 	    background-color: @color-base;
 	}
 	.class2 {
 	    background-color: #fff;
 	    color: @color-base;
 	}
 	.class3 {
 	    border: 1px solid @color-base;
 	}

 Aside from color, you can also put other values in the variables like for example:

 	@font-family: Georgia
 	@dot-border: dotted
 	@transition: linear
 	@opacity: 0.5

 ### Mixins
 Mixins allow us to use entire declarations in other rule sets. It's very useful for vendor-prefixed styles.

 	.gradients {
 	    background: #eaeaea;
 	    background: linear-gradient(top, #eaeaea, #cccccc);
 	    background: -o-linear-gradient(top, #eaeaea, #cccccc);
 	    background: -ms-linear-gradient(top, #eaeaea, #cccccc);
 	    background: -moz-linear-gradient(top, #eaeaea, #cccccc);
 	    background: -webkit-linear-gradient(top, #eaeaea, #cccccc);
 	}

 	div {
 	    .gradients;
 	    border: 1px solid #555;
 	    border-radius: 3px;
 	}

 Mixins can also take *parameters*. Allowing you to pass different values into mixins.

 	.gradients(@startColor, @endColor){
 	    background: #eaeaea;
 	    background: linear-gradient(top, @startColor, @endColor);
 	    background: -o-linear-gradient(top, @startColor, @endColor);
 	    background: -ms-linear-gradient(top, @startColor, @endColor);
 	    background: -moz-linear-gradient(top, @startColor, @endColor);
 	    background: -webkit-linear-gradient(top, @startColor, @endColor);
 	}

 	div {
 	    .gradients(#eaeaea, #cccccc);
 	    border: 1px solid #555;
 	    border-radius: 3px;
 	}
 	span{
 		.gradients(red, blue);
 	}

 Now we can re-use our gradient mixin for other colors! I use mixins a lot of animations.





 ### Resources
 * [10 Reasons to use a CSS Preprocessor](https://www.urbaninsight.com/2012/04/12/ten-reasons-you-should-be-using-css-preprocessor)
 * [Live LESS Compiler](http://winless.org/online-less-compiler)
 * [LESS Homepage](http://lesscss.org/#)
 * [Beginner's Guide to LESS](http://www.hongkiat.com/blog/less-basic/)
	# Week 9 - CSS Preprocessors

	This week we will be super charging your stlying with CSS preprocessors. CSS is a pretty difficult language to work with, there's no variables, it's hard to group styles together, and reusing the same styles in different places requires you to edit your HTML. Not good. CSS preprocessors are a program (called a compiler) that takes styles written in a better language and translate them to regular CSS for you. There are a few different preprocessors out there, but we are going to be focusing on [LESS](http://lesscss.org/).


	### What is LESS

	LESS is a super-set of CSS, meaning it looks very similar to CSS but adds much more functionality. Here's an example of it:

	@green : #2ecc71;
	.content{
	@contentWidth : 300px;
	width : @contentWidth;
	h1{
	font-size : 2em;
	color : @green;
	}
	button.save{
	.button(@green);
	width : @contentWidth
	}
	}
	.button(@color){
	border-radius : 4px;
	background-color : @color;
	padding : 5px
	}

	The result when compiled to CSS:

	.content {
	width: 300px;
	}
	.content h1 {
	font-size: 2em;
	color: #2ecc71;
	}
	.content button.save {
	border-radius: 4px;
	background-color: #2ecc71;
	padding: 5px;
	width: 300px;
	}

	The key festures of LESS we'll be using are Nesting, Variables, and Mixins.


	### The Compiler
	We'll be using the web-based javascript compiler for LESS. It's the easiest way to get started using CSS preprocessors. It's just a javascript library you include in the `HEAD` of your page. You then reference your LESS files basically the same as your CSS files. The javascript compiler will read your less files when the page loads, translate thme to CSS and run that CSS on your page.

	<head>
	<link rel="stylesheet/less" type="text/css" href="styles.less" />
	<link rel="stylesheet/less" type="text/css" href="moreCoolStyles.less" />

	<!-- must be included -after- all of your less files -->
	<script src="http://cdnjs.buttflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
	</head>

	Most professional projects do this compile step before upload their code to the server, so the user's browser doesn't have to do this work, but this adds an additional step and we just want to experiment for now.

	Note : Due to a security thing in Chrome, if you want to run your html file locally (says `files://C://...` in the navbar) and use LESS, [you'll need to follow this](http://www.paulrohde.com/using-less-js-locally-with-chrome/). Otherwise it won't work.



	### Nesting
	In regular CSS you tend to start writing very long selectors to specifically target certain elements, eg. `nav li .navItem a`. This can get tedius and if you change a parent element you can have many selectors to update. In LESS we can nest child rules within the parents.

	In CSS

	nav {
	height: 40px;
	width: 100%;
	background: #455868;
	border-bottom: 2px solid #283744;
	}
	nav li {
	width: 600px;
	height: 40px;
	}
	nav li a {
	color: #fff;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
	}

	In LESS

	nav {
	height: 40px;
	width: 100%;
	background: #455868;
	border-bottom: 2px solid #283744;
	li {
	width: 600px;
	height: 40px;
	a {
	color: #fff;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
	}
	}
	}


	### Variables
	Very often in your CSS you'll end up repeating the same values over and over, usually colors or pixel sizes. On small projects it's not bad to update them all if you need you change one color, but as your project grows, this becomes unmaintainable.

	Variables let us declare a value with a name once, and just use that name everywhere it's needed.

	@color-base: #2d5e8b;
	.class1 {
	background-color: @color-base;
	}
	.class2 {
	background-color: #fff;
	color: @color-base;
	}
	.class3 {
	border: 1px solid @color-base;
	}

	Aside from color, you can also put other values in the variables like for example:

	@font-family: Georgia
	@dot-border: dotted
	@transition: linear
	@opacity: 0.5

	### Mixins
	Mixins allow us to use entire declarations in other rule sets. It's very useful for vendor-prefixed styles.

	.gradients {
	background: #eaeaea;
	background: linear-gradient(top, #eaeaea, #cccccc);
	background: -o-linear-gradient(top, #eaeaea, #cccccc);
	background: -ms-linear-gradient(top, #eaeaea, #cccccc);
	background: -moz-linear-gradient(top, #eaeaea, #cccccc);
	background: -webkit-linear-gradient(top, #eaeaea, #cccccc);
	}

	div {
	.gradients;
	border: 1px solid #555;
	border-radius: 3px;
	}

	Mixins can also take parameters. Allowing you to pass different values into mixins.

	.gradients(@startColor, @endColor){
	background: #eaeaea;
	background: linear-gradient(top, @startColor, @endColor);
	background: -o-linear-gradient(top, @startColor, @endColor);
	background: -ms-linear-gradient(top, @startColor, @endColor);
	background: -moz-linear-gradient(top, @startColor, @endColor);
	background: -webkit-linear-gradient(top, @startColor, @endColor);
	}

	div {
	.gradients(#eaeaea, #cccccc);
	border: 1px solid #555;
	border-radius: 3px;
	}
	span{
	.gradients(red, blue);
	}

	Now we can re-use our gradient mixin for other colors! I use mixins a lot of animations.





	### Resources
	* [10 Reasons to use a CSS Preprocessor](https://www.urbaninsight.com/2012/04/12/ten-reasons-you-should-be-using-css-preprocessor)
	* [Live LESS Compiler](http://winless.org/online-less-compiler)
	* [LESS Homepage](http://lesscss.org/#)
	* [Beginner's Guide to LESS](http://www.hongkiat.com/blog/less-basic/)