SASS tips

alumican.scss

// ----------------------------------------
// Config
$image-directory: './image';

$bp-narrow-mobile : 320px;
$bp-mobile-tablet : 480px;
$bp-tablet-desktop: 800px;





// ----------------------------------------
// Path
@function image-url($filename) {
	@return url($image-directory + $filename);
}





// ----------------------------------------
// Centering
@mixin centering-absolute-x {
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

@mixin centering-absolute-y {
	position: absolute;
	top: 0;
	bottom: 0;
	margin-top: auto;
	margin-bottom: auto;
}

@mixin centering-absolute {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}


@mixin centering-transform-x {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

@mixin centering-transform-y {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

@mixin centering-transform {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% -50%);
}





// ----------------------------------------
// Text
@mixin enable-text($font-size: 1rem, $line-height: 150%) {
	font-size: $font-size;
	line-height: $line-height;
}

@mixin disable-text {
	font-size: 0;
	line-height: 0;
}





// ----------------------------------------
// Responsive query
// $bp-narrow-mobile < mobile <= $bp-mobile-tablet < tablet <= $bp-tablet-desktop < desktop

@mixin narrow {
	@media screen and (max-width: $bp-narrow-mobile) {
		@content;
	}
}

@mixin mobile {
	@media screen and (min-width: $bp-narrow-mobile + 1px) and (max-width: $bp-mobile-tablet) {
		@content;
	}
}

@mixin tablet {
	@media screen and (min-width: $bp-mobile-tablet + 1px) and (max-width: $bp-tablet-desktop) {
		@content;
	}
}

@mixin desktop {
	@media screen and (min-width: $bp-tablet-desktop + 1px) {
		@content;
	}
}


@mixin not-narrow {
	@media screen and (min-width: $bp-narrow-mobile + 1px) {
		@content;
	}
}

@mixin not-mobile {
	@media screen and (max-width: $bp-narrow-mobile), screen and (min-width: $bp-mobile-tablet + 1px) {
		@content;
	}
}

@mixin not-tablet {
	@media screen and (max-width: $bp-mobile-tablet), screen and (min-width: $bp-tablet-desktop + 1px) {
		@content;
	}
}

@mixin not-desktop {
	@media screen and (max-width: $bp-tablet-desktop) {
		@content;
	}
}


@mixin gt-mobile {
	@media screen and (min-width: $bp-narrow-mobile + 1px) {
		@content;
	}
}

@mixin gt-tablet {
	@media screen and (min-width: $bp-mobile-tablet + 1px) {
		@content;
	}
}

@mixin gt-desktop {
	@media screen and (min-width: $bp-tablet-desktop + 1px) {
		@content;
	}
}


@mixin lt-narrow {
	@media screen and (max-width: $bp-narrow-mobile) {
		@content;
	}
}

@mixin lt-mobile {
	@media screen and (max-width: $bp-mobile-tablet) {
		@content;
	}
}

@mixin lt-tablet {
	@media screen and (max-width: $bp-tablet-desktop) {
		@content;
	}
}


.narrow {
	@include not-narrow {
		display: none;
	}
}

.mobile {
	@include not-mobile {
		display: none;
	}
}

.tablet {
	@include not-tablet {
		display: none;
	}
}

.desktop {
	@include not-desktop {
		display: none;
	}
}


.not-narrow {
	@include narrow {
		display: none;
	}
}

.not-mobile {
	@include mobile {
		display: none;
	}
}

.not-tablet {
	@include tablet {
		display: none;
	}
}

.not-desktop {
	@include desktop {
		display: none;
	}
}


.gt-mobile {
	@include lt-narrow {
		display: none;
	}
}

.gt-tablet {
	@include lt-mobile {
		display: none;
	}
}

.gt-desktop {
	@include lt-tablet {
		display: none;
	}
}


.lt-narrow {
	@include gt-mobile {
		display: none;
	}
}

.lt-mobile {
	@include gt-tablet {
		display: none;
	}
}

.lt-tablet {
	@include gt-desktop {
		display: none;
	}
}