Why Sass is Awesome?

Why is sass awesome?

It makes css work way easier and faster. You have to have ruby on rails installed and the sass gem installed.

First install sass with this command (you only need to do it once)
gem install sass

Type in CLI first navigate to correct director with cd

sass – watch .

to compile .scss into .css

Below is to install the bourbon library for css
gem install bourbon

bourbon library

scss advanced code

@mixin box($size, $color, $display: block) {
	width: $size;
	height: $size;
	background: $color;
	display: $display;

a {
	@include box($size: 10px, $color: blue);

// for the list don't forget ... example below members... for a list /w out is static
@mixin band($name, $members...) {
	@each $member in $members {
		.#{$name}.#{$member} {
			background: url("images/#{$name}/#{$member}.jpg");

div {

	margin: 0px 0 0 10px;

@include band(radiohead,thom, jonny, colin, phil);
@include band(nin, cuties);

It compiles into .css:

a {
  width: 10px;
  height: 10px;
  background: blue;
  display: block; }

div {
  margin: 0px 0 0 10px; }

.radiohead.thom {
  background: url("images/radiohead/thom.jpg"); }

.radiohead.jonny {
  background: url("images/radiohead/jonny.jpg"); }

.radiohead.colin {
  background: url("images/radiohead/colin.jpg"); }

.radiohead.phil {
  background: url("images/radiohead/phil.jpg"); }

.nin.cuties {
  background: url("images/nin/cuties.jpg"); }

How to create a simple calculator program with javascript

This is a tutorial about how to create a simple calculator program with javascript, css, and html.

First create index.html file

    <title>Dice Simulator 2015</title>
    <link rel="stylesheet" href="style.css">
  <h1>Calculator Example</h1>
  <p>Open the JavaScript developer console to interact.</p>
  <script src="calculator.js"></script>


Then create style.css file

* {
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;

create calculator.js file

var calculator = {
  sum: 0,
  add: function(value) {
    this.sum += value;
  subtract: function(value) {
  this.sum = this.sum - value;
  multiply: function(value) {
  this.sum = this.sum * value;
  divide: function(value) {
  this.sum = this.sum / value;
  clear: function() {
    this.sum = 0;
  equals: function() {
    return this.sum;

After open javascript console
Type in commands example
calculator.equals() // 3