main.scss

@import 'header.scss';


$container-width : 20%;

.notification {
	padding:10px;
	color:black;
	background-color:white;
}

.sidebar {
	width:$container-width+20%;
}

.warning {
	@extend .notification;
	background-color:red;
}

.success {
	@extend .notification;
	background-color:green;
}

.failure {
	@extend .notification;
	background-color:red;
}

.neutrual {
	@extend .notification;
	margin-top:50px;
	background-color:orange;
}




@mixin button($padding,$content,$radius,$backgroundColor){
	padding:$padding;
	border-radius:$radius;
	background-color:$backgroundColor;

	&:before {
		content:"THIS IS MY BUTTON";
	}
}


@mixin centerThis() {
	margin:block;
	margin:0px auto;
}

@mixin square($size,$color) {
    width: $size;
	height: $size;
	background-color:$color;
}

.square { 
	@include square(25px,red); 
}

.greenSquare {
	@include square(100px,green);
	@include centerThis();
}

.btn {
	@include button(10px,"Hello World",20px,red);
}