Add SASS/SCSS to FullPage #3896
Comments
|
Thanks for the feedback! I really appreciate it :) I'll mark it as a possible enhancement. |
|
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. |
Can you elaborate a bit on this? Why would anyone need to import the css file in another css? 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 |
|
SCSS would be beneficial because fullpage.css could be separated into different scss partial files, for example: Currently I am working on a complex multimedia website for the company I work for. 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 |
Would you be able to provide a better pull request? But let's use gulp for the compiling part, not a fan of Webpack :) |
|
I will start working on it, it will be ready and fully tested in about one week. For next version there are various optimizations that can be made, mainly to navigation and to cascading in general. |
|
That'd be great! :) We've recently made some changes: |
Any news @alanalvarado ? |
|
I've tried converting it automatically with online tools for now (http://beautifytools.com/css-to-scss-converter.php) /*!
* 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;
} |
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:
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:
In addition to the reasons stated above, there are some potential benefits to this if implemented:
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
The text was updated successfully, but these errors were encountered: