sass sample

sass-sample.sass

.banner_styles {
	@include grid-row();
	max-width: $banner-width;
	text-align: center;
	padding: rem-calc(60) rem-calc(30) 0 rem-calc(30);
	
	.banner_slider {
		text-align: center;
	}
	
	.button {
		border-radius: $global-radius;	
	}
	
	@media #{$large-up} {
		padding: rem-calc(180) 0 rem-calc(20);
	}
	
	@media #{$medium-only} {
		padding: rem-calc(80) rem-calc(30) rem-calc(20) rem-calc(30);
	}
	
	h1 {
		font-weight: $banner-h1-weight;
		font-size: #{($banner-h1-font-size*0.75)}px;
		line-height: rem-calc(40);
		font-family: $banner-h1-font-family;
		color: $banner-h1-font-color;
		text-transform: $banner-h1-text-transform;
		font-style: $banner-h1-font-style;
		letter-spacing: $banner-h1-letter-spacing;
		/*margin-bottom: 0;*/
		
		
		@media #{$large-up} {
			font-size: #{($banner-h1-font-size)}px;
		}
		
		@media #{$medium-only} {
			font-size: #{($banner-h1-font-size*0.9)}px;
			line-height: rem-calc(40);			
		}
	}
	
	h2 {
		font-family: $banner-h2-font-family;
		text-transform: $banner-h2-text-transform;
		font-weight: $banner-h2-weight;
		margin-top: rem-calc(25);
		margin-bottom: rem-calc(40);
		color: $banner-h2-font-color;
		font-style: $banner-h2-font-style;
		letter-spacing: $banner-h2-letter-spacing;
		font-size: #{($banner-h2-font-size*0.65)}px;
		
		@media #{$medium-only} {
			font-size: #{($banner-h2-font-size*0.75)}px;
			margin-bottom: rem-calc(40);
		}
		
		@media #{$large-up} {
			margin-bottom: 4rem;
			font-size: #{($banner-h2-font-size)}px;
		}
	}
	
	.slick-dots {
		position: static;
		margin-top: rem-calc(35);
		li {
			padding: 0px 5px;
			opacity: $banner-dot-opacity;
		}
		.slick-active {
				opacity: $banner-dot-active-opacity!important;
		}
		@media #{$large-up} {
			margin-top: rem-calc(120);
		}
		
		@media #{$medium-only} {
			margin-top: rem-calc(85);
		}
	}
}