Add SASS/SCSS to FullPage

[BrendanWolfe]

Hi,

I have read over all the previously closed issues about adding SCSS to FullPage. I understand that these are the reasons why you have not implemented it yet:

• You do not know SASS/SCSS.
• You do not know gulp (or any other build tool? Im can't tell for sure, all I saw mentioned in the past issues was gulp).
• Since you do not know these tools, you have to have someone else update the SCSS every time you updated the plain CSS, which proved unreliable and caused the SCSS to be removed.

I understand why this has been put off in the first place, but it has been quite a while since these issues came up, and even when another comes up after a year or more, the answer never changes. So I would like to propose that it is about time to implement this, for these reasons:

• SASS/SCSS is extremely easy to learn. Even if you only know plain CSS at an intermediate level, it should take no longer than an hour to learn enough basics to add SCSS to FullPage.
• Gulp or another build tool is also very easy to learn, again it should not take more than an hour to learn enough basics to add it to FullPage.
• Since you would now know the tools, you would no longer need another person to maintain the SCSS.
• The SCSS file will serve as a single source of truth, so no more needing to keep the plain CSS and SCSS in sync, the SCSS will simply generate the plain CSS.

In addition to the reasons stated above, there are some potential benefits to this if implemented:

• Users who just want the plain CSS would still be able to get it no problem, nothing changes for them.
• Users who want to use the SCSS version could just @import it into their SCSS file (SCSS does not handle import of plain CSS, so an SCSS file is needed, even if it is not using any SCSS syntax).
• You can also use SCSS variables to make modifying the FullPage CSS easier than ever.

In conclusion, I think it will be very beneficial to both you and your project to learn and implement SCSS. Please let me know your thoughts, as this is something I have been wanting from FullPage for quite a while now.

EDIT: I just noticed that you already do already have gulp set up in the project, so adding SCSS should be very fast & easy to do.

Thank You

[alvarotrigo]

Thanks for the feedback! I really appreciate it :)
I'll take it into account for future releases!

I'll mark it as a possible enhancement.

[BrendanWolfe]

Glad to hear such a quick response, thanks. I could also make a PR for this if you want, it's up to you though.

[alvarotrigo]

• Users who want to use the SCSS version could just @import it into their SCSS file (SCSS does not handle import of plain CSS, so an SCSS file is needed, even if it is not using any SCSS syntax).

Can you elaborate a bit on this? Why would anyone need to import the css file in another css?
For bundling files in one? Why not use Gulp or Webpack for it?

It seems it is actually possible to import .css based on these comments?

[BrendanWolfe]

• Users who want to use the SCSS version could just @import it into their SCSS file (SCSS does not handle import of plain CSS, so an SCSS file is needed, even if it is not using any SCSS syntax).

Can you elaborate a bit on this? Why would anyone need to import the css file in another css?
For bundling files in one? Why not use Gulp or Webpack for it?

It seems it is actually possible to import .css based on these comments?

Wow I feel dumb for missing that little detail about SCSS, all I needed to do was remove the .css extension to make the import do what I needed. Thanks for that info.

That being said, I do think SCSS would still be a good enhancement to look into, but it's not as urgent as I thought it was. It still has the potential benefits of using SCSS variables to change things like colors, timing functions, durations, etc. As well as the ability to break things into multiple files, use mixins, and use functions.

Again, Thanks for pointing that out to me, it does indeed solve my current dilemma. Have a great weekend

[alanalvarado]

SCSS would be beneficial because fullpage.css could be separated into different scss partial files, for example:
_variables.scss (margins, border-radius and such things could be placed here)
_sections.scss (everything related to sections)
_slides.scss (everything related to slides)
_navigation.scss (everything related to navigation)
fullpage.scss < imports each file

Currently I am working on a complex multimedia website for the company I work for.
the site is an SPA and the thing is modular (loads everything dynamically)

For example now I am overriding the styles for the vertical navigation, and currently I have around 100 lines of code just for this and --god forgives me-- I even have to use !Important

with SCSS I could just not load navigation, or if I am not using slides, not load them.

In the project one just would have to copy fullpage.scss and modify it to load just what is needed, and If anything gets updated on fullpage.js It won't break anything else

EDIT: btw someone did a PR #2838 about 3 years ago but that scss looks like crap :D
no variables, calculations or nested selectors.

[alvarotrigo]

EDIT: btw someone did a PR #2838 about 3 years ago but that scss looks like crap :D

Would you be able to provide a better pull request?
I'll be happy to merge it :)

But let's use gulp for the compiling part, not a fan of Webpack :)

[alanalvarado]

I will start working on it, it will be ready and fully tested in about one week.
I will try that the first implementation to output an almost identical to 3.08 stylesheet

For next version there are various optimizations that can be made, mainly to navigation and to cascading in general.

[alvarotrigo]

That'd be great! :)
Make sure to work with the dev branch tho.

We've recently made some changes:
#3927

[alvarotrigo]

I will start working on it, it will be ready and fully tested in about one week.

Any news @alanalvarado ?
I will deploy a new release today, if you have a few minutes feel free to create the pull request and I'll merge it in a matter of minutes :)

[alvarotrigo]

I've tried converting it automatically with online tools for now (http://beautifytools.com/css-to-scss-converter.php)
Does this look good enough?

/*!
 * fullPage 3.0.8
 * https://github.com/alvarotrigo/fullPage.js
 *
 * @license GPLv3 for open source use only
 * or Fullpage Commercial License for commercial use
 * http://alvarotrigo.com/fullPage/pricing/
 *
 * Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo
 */
/*Only display content to screen readers*/
html.fp-enabled {
	margin: 0;
	padding: 0;
	overflow: hidden;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.fp-enabled {
	body {
		margin: 0;
		padding: 0;
		overflow: hidden;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
}
.fp-section {
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.fp-slide {
	float: left;
	height: 100%;
	display: block;
}
.fp-slidesContainer {
	height: 100%;
	display: block;
	float: left;
	position: relative;
}
.fp-slides {
	z-index: 1;
	height: 100%;
	overflow: hidden;
	position: relative;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.fp-section.fp-table {
	display: table;
	table-layout: fixed;
	width: 100%;
}
.fp-slide.fp-table {
	display: table;
	table-layout: fixed;
	width: 100%;
}
.fp-tableCell {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	height: 100%;
}
.fp-controlArrow {
	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-ms-user-select: none;
	position: absolute;
	z-index: 4;
	top: 50%;
	cursor: pointer;
	width: 0;
	height: 0;
	border-style: solid;
	margin-top: -38px;
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
.fp-controlArrow.fp-prev {
	left: 15px;
	width: 0;
	border-width: 38.5px 34px 38.5px 0;
	border-color: transparent #fff transparent transparent;
}
.fp-controlArrow.fp-next {
	right: 15px;
	border-width: 38.5px 0 38.5px 34px;
	border-color: transparent transparent transparent #fff;
}
.fp-scrollable {
	overflow: hidden;
	position: relative;
}
.fp-scroller {
	overflow: hidden;
}
.iScrollIndicator {
	border: 0 !important;
}
.fp-notransition {
	-webkit-transition: none !important;
	transition: none !important;
}
#fp-nav {
	position: fixed;
	z-index: 100;
	top: 50%;
	opacity: 1;
	transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-webkit-transform: translate3d(0,-50%,0);
	ul {
		margin: 0;
		padding: 0;
		li {
			display: block;
			width: 14px;
			height: 13px;
			margin: 7px;
			position: relative;
			a {
				display: block;
				position: relative;
				z-index: 1;
				width: 100%;
				height: 100%;
				cursor: pointer;
				text-decoration: none;
				span {
					border-radius: 50%;
					position: absolute;
					z-index: 1;
					height: 4px;
					width: 4px;
					border: 0;
					background: #333;
					left: 50%;
					top: 50%;
					margin: -2px 0 0 -2px;
					-webkit-transition: all 0.1s ease-in-out;
					-moz-transition: all 0.1s ease-in-out;
					-o-transition: all 0.1s ease-in-out;
					transition: all 0.1s ease-in-out;
				}
			}
			a.active {
				span {
					height: 12px;
					width: 12px;
					margin: -6px 0 0 -6px;
					border-radius: 100%;
				}
			}
			&:hover {
				a.active {
					span {
						height: 12px;
						width: 12px;
						margin: -6px 0 0 -6px;
						border-radius: 100%;
					}
				}
				a {
					span {
						width: 10px;
						height: 10px;
						margin: -5px 0px 0px -5px;
					}
				}
				.fp-tooltip {
					-webkit-transition: opacity 0.2s ease-in;
					transition: opacity 0.2s ease-in;
					width: auto;
					opacity: 1;
				}
			}
			.fp-tooltip {
				position: absolute;
				top: -2px;
				color: #fff;
				font-size: 14px;
				font-family: arial, helvetica, sans-serif;
				white-space: nowrap;
				max-width: 220px;
				overflow: hidden;
				display: block;
				opacity: 0;
				width: 0;
				cursor: pointer;
			}
			.fp-tooltip.fp-right {
				right: 20px;
			}
			.fp-tooltip.fp-left {
				left: 20px;
			}
		}
	}
}
#fp-nav.fp-right {
	right: 17px;
}
#fp-nav.fp-left {
	left: 17px;
}
.fp-slidesNav {
	position: absolute;
	z-index: 4;
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	left: 0 !important;
	right: 0;
	margin: 0 auto !important;
	ul {
		margin: 0;
		padding: 0;
		li {
			display: block;
			width: 14px;
			height: 13px;
			margin: 7px;
			position: relative;
			display: inline-block;
			a {
				display: block;
				position: relative;
				z-index: 1;
				width: 100%;
				height: 100%;
				cursor: pointer;
				text-decoration: none;
				span {
					border-radius: 50%;
					position: absolute;
					z-index: 1;
					height: 4px;
					width: 4px;
					border: 0;
					background: #333;
					left: 50%;
					top: 50%;
					margin: -2px 0 0 -2px;
					-webkit-transition: all 0.1s ease-in-out;
					-moz-transition: all 0.1s ease-in-out;
					-o-transition: all 0.1s ease-in-out;
					transition: all 0.1s ease-in-out;
				}
			}
			a.active {
				span {
					height: 12px;
					width: 12px;
					margin: -6px 0 0 -6px;
					border-radius: 100%;
				}
			}
			&:hover {
				a.active {
					span {
						height: 12px;
						width: 12px;
						margin: -6px 0 0 -6px;
						border-radius: 100%;
					}
				}
				a {
					span {
						width: 10px;
						height: 10px;
						margin: -5px 0px 0px -5px;
					}
				}
			}
		}
	}
}
.fp-slidesNav.fp-bottom {
	bottom: 17px;
}
.fp-slidesNav.fp-top {
	top: 17px;
}
#fp-nav.fp-show-active {
	a.active {
		+ {
			.fp-tooltip {
				-webkit-transition: opacity 0.2s ease-in;
				transition: opacity 0.2s ease-in;
				width: auto;
				opacity: 1;
			}
		}
	}
}
.fp-auto-height.fp-section {
	height: auto !important;
}
.fp-auto-height {
	.fp-slide {
		height: auto !important;
	}
	.fp-tableCell {
		height: auto !important;
	}
}
.fp-responsive {
	.fp-auto-height-responsive.fp-section {
		height: auto !important;
	}
	.fp-auto-height-responsive {
		.fp-slide {
			height: auto !important;
		}
		.fp-tableCell {
			height: auto !important;
		}
	}
}
.fp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}