SCSS issues in Global.css

[jamestagal]

Hello @jimafisk I have make some initial progress with the theme. I started working on the landing page with all sections connected up to the data source but have run into an issue with CSS. I can't get any styling to work.

When I look at the Educenter source code I only find SCSS files Then I started add them to the global.css file https://github.com/jamestagal/plenti-educenter/blob/main/assets/global.css and got lots of errors. The issues are as follows:

1. Warning message: for the @includes in many lines I get a warning
2. Error : the &: symbol before something like this, throws an error.

   &:hover {
     box-shadow: 0px 4px 25px 0px rgba(27, 39, 71, 0.15);
   }

3. Some sub-classes or child classes such as .play-btn below throws an error

   .success-video {
   min-height: 300px;
   
   .play-btn {
     position: absolute;
     top: 50%;
     left: 0;
     transform: translateY(-50%);
   
     @include tablet {
       left: 50%;
       transform: translate(-50%, -50%);
     }
   }

4. The $ sign also in a problem. Something like this:

   font-family: $secondary-font;

   What is the best way to deal with this SCSS and turn it into CSS? When you get a chance please have a look for me.

P.S. I haven't see any Devlog updates recently.. how is everything ? Ben

[jimafisk]

You could either:

1. Set up your own pipeline to compile SCSS: https://www.npmjs.com/package/compile-sass
2. Convert the SCSS to regular CSS: https://jsonformatter.org/scss-to-css

Sass / SCSS is the industry standard these days used in most professional settings and I spent an early part of my career convincing the dev teams I was on to adopt it. That said, I hate it now and avoid it whenever possible. It adds tooling that confuses people (like it's doing in this issue) for little benefit and forces you to write worse (more specific) styling code. I'm probably in the minority with these opinions, but do hold some hope that minimalist development is on the rise in popularity.

The & sign is a horrible convention that allows you to break up same level classes / attributes to multiple nested lines. This kills the discoverability of your code on large projects because it makes it impossible to grep search simple class names to find source styles. Defenders of this will say that you can easily solve that with... you guessed it, more tooling. The solution in CSS would be to just to put these on a single line for each target.

The @includes symbol allows you to embed styles within each other. You could just copy all these separate files to one file and add a /* block comment */ to separate the sections.

The $ is for SCSS variables, but you can accomplish the same with the CSS variables: font-family: var(--secondary-font);. These unfortunately will not work in media queries: https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries.

[jamestagal]

Thanks @jimafisk for that explanation. I would happily join you in that minority point of view. I am a huge advocate of simplicity since I'm from an education background and find making things easy and simple to understand is the best approach. So I think i will try converting it as per your suggestion No2.

Also, I just realised that I forgot to add the link to the global.css in the head.svelte. :) that helped.

Question about this Educenter Hugo SCSS file configuration. It is a bit confusing. https://github.com/themefisher/educenter-hugo/tree/master/assets/scss They have separated styles for each component then most files have underscores _buttons.scss and to compound the confusion, there is a templates folder with more files!!! I think I should just take the approach here to combine all of those separate styles into our global.css file and convert it from SCSS to CSS?

Sorry another issues I found, not related to above is, when I click into the head.svelte file I get an error warning that disappears when I click out or close the file. The error is Cannot find module './transformers/module'

[jamestagal]

Hi @jimafisk

I am not having much luck with the SCSS converter ! It keeps giving me errors. See file below. https://drive.google.com/file/d/1bEwvHVNQsuq7WckQTEI__hGWOTfGazMF/view?usp=sharing

I am wondering whether I try option 1 now !!

UPDATE: I have been working my way through this SCSS file and trying to modify it using your description above but still have many problems... just wave and smile!! just wave and smile! I pushed my change to the repo. Ben

[jimafisk]

The way that theme is structured is the main.scss file @includes all the other files. The underscore is just a convention for an SCSS partial to denote it's meant to be included in another file.

That transformers/module error is strange, I don't see anything in your <head> that would throw that. Might be related to: https://github.com/sveltejs/svelte-preprocess/issues/261.

I'm not sure how good that SCSS converter is, I've never actually tried it. The global.css file you sent still has SCSS variables and @includes in it though, so the browser won't be able to read that as valid CSS. It might take some work to convert that to regular CSS manually. You could just grab the convert CSS from the demo site: https://demo.gethugothemes.com/educenter/site/scss/main.39a92863184ba4ea9990e2082bf7fd67c858263e3dd67f677d1add7a1c5de28ebcc1a01478d007a95bb116ce25df5a23961347c553b8891e649dbc716290c204.css In case that fingerprinted CSS file changes, here's the CSS:

Compiled CSS

```css /*!------------------------------------------------------------------ [MAIN STYLESHEET] PROJECT: Project Name VERSION: Versoin Number -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [TABLE OF CONTENTS] -------------------------------------------------------------------*/ /* typography */ @import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"); @font-face { font-family: 'futura-bold'; src: url("../fonts/Futura-Bold.woff") format("woff"); font-weight: normal; font-style: normal; } body { line-height: 1.2; font-family: "Poppins", sans-serif; -webkit-font-smoothing: antialiased; font-size: 15px; color: #5c5c77; } p, .paragraph { font-weight: 400; color: #5c5c77; font-size: 15px; line-height: 1.9; font-family: "Poppins", sans-serif; } h1, h2, h3, h4, h5, h6 { color: #1e1e4b; font-family: "futura-bold"; font-weight: 700; line-height: 1.2; } h1, .h1 { font-size: 60px; } @media (max-width: 575px) { h1, .h1 { font-size: 45px; } } h2, .h2 { font-size: 40px; } @media (max-width: 575px) { h2, .h2 { font-size: 30px; } } h3, .h3 { font-size: 25px; } @media (max-width: 575px) { h3, .h3 { font-size: 20px; } } h4, .h4 { font-size: 20px; } @media (max-width: 575px) { h4, .h4 { font-size: 18px; } } h5, .h5 { font-size: 18px; } @media (max-width: 575px) { h5, .h5 { font-size: 16px; } } h6, .h6 { font-size: 16px; } @media (max-width: 575px) { h6, .h6 { font-size: 14px; } } /* Button style */ .btn { font-size: 16px; font-family: "Poppins", sans-serif; text-transform: capitalize; padding: 15px 40px; border-radius: 0; font-weight: 500; border: 0; position: relative; z-index: 1; transition: .2s ease; overflow: hidden; white-space: nowrap; } .btn::before { position: absolute; content: ""; height: 80%; width: 100%; left: 0; bottom: 10%; z-index: -1; transition: transform .2s ease-in-out; transform-origin: top; transform: scaleY(0); } .btn:active, .btn:hover, .btn.focus, .btn:focus, .btn.active { outline: 0; box-shadow: none !important; } .btn:active::before, .btn:hover::before, .btn.focus::before, .btn:focus::before, .btn.active::before { transform: scaleY(1); transform-origin: bottom; } .btn-sm { font-size: 14px; padding: 10px 35px; } .btn-xs { font-size: 12px; padding: 5px 15px; } .btn-primary { color: #fff; background-color: #ffbc3b; } .btn-primary::before { background-color: #fff; } .btn-primary:active, .btn-primary:hover, .btn-primary.focus, .btn-primary:focus, .btn-primary.active { color: #ffbc3b !important; background-color: #ffab08 !important; border-color: #ffab08 !important; } .btn-outline-primary { color: #ffbc3b; background-color: transparent; border: 1px solid #ffbc3b; } .btn-outline-primary::before { background-color: #fff; } .btn-outline-primary:active, .btn-outline-primary:hover, .btn-outline-primary.focus, .btn-outline-primary:focus, .btn-outline-primary.active { color: #ffbc3b !important; background-color: #ffbc3b !important; border-color: #ffbc3b !important; } .btn-light { color: #ffbc3b; background-color: #fff; border: 1px solid #fff; } .btn-light::before { background-color: #ffbc3b; } .btn-light:active, .btn-light:hover, .btn-light.focus, .btn-light:focus, .btn-light.active { color: #fff !important; background-color: #fff !important; border: 1px solid #fff !important; } body { background-color: #fff; overflow-x: hidden; } ::selection { background: #ffcd6e; color: #fff; } /* preloader */ .preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #FFDC11; z-index: 999999; display: flex; align-items: center; justify-content: center; } ol, ul { list-style-type: none; margin: 0px; } img { vertical-align: middle; border: 0; } a, a:hover, a:focus { text-decoration: none; } a { color: inherit; } a, button, select { cursor: pointer; transition: .2s ease; } a:focus, button:focus, select:focus { outline: 0; } a:hover { color: #ffbc3b; } a.text-primary:hover { color: #ffbc3b !important; } a.text-light:hover { color: #ffbc3b !important; } h4 { transition: .2s ease; } a h4:hover { color: #ffbc3b; } .slick-slide { outline: 0; } .section { padding-top: 90px; padding-bottom: 90px; } .section-sm { padding-top: 40px; padding-bottom: 40px; } .section-title { margin-bottom: 30px; } .bg-cover { background-size: cover; background-position: center center; background-repeat: no-repeat; } .border-primary { border-color: #ededf1 !important; } /* overlay */ .overlay { position: relative; } .overlay::before { position: absolute; content: ''; height: 100%; width: 100%; top: 0; left: 0; background: #1a1a37; opacity: .8; } .outline-0 { outline: 0 !important; } .d-unset { display: unset !important; } .bg-primary { background: #ffbc3b !important; } .bg-secondary { background: #1a1a37 !important; } .bg-gray { background: #f8f8f8; } .text-primary { color: #ffbc3b !important; } .text-color { color: #5c5c77; } .text-light { color: #8585a4 !important; } .text-lighten { color: #d6d6e0 !important; } .text-muted { color: #b5b5b7 !important; } .text-dark { color: #1e1e4b !important; } .font-secondary { font-family: "futura-bold"; } .mb-10 { margin-bottom: 10px !important; } .mb-20 { margin-bottom: 20px !important; } .mb-30 { margin-bottom: 30px !important; } .mb-40 { margin-bottom: 40px !important; } .mb-50 { margin-bottom: 50px !important; } .mb-60 { margin-bottom: 60px !important; } .mb-70 { margin-bottom: 70px !important; } .mb-80 { margin-bottom: 80px !important; } .mb-90 { margin-bottom: 90px !important; } .mb-100 { margin-bottom: 100px !important; } .pl-150 { padding-left: 150px; } .zindex-1 { z-index: 1; } @media (max-width: 991px) { .overflow-md-hidden { overflow: hidden; } } .vertical-align-middle { vertical-align: middle; } .icon-md { font-size: 36px; } /* page title */ .page-title-section { padding: 200px 0 80px; } .custom-breadcrumb li.nasted { position: relative; padding-left: 25px; } .custom-breadcrumb li.nasted::before { position: absolute; font-family: "themify"; content: "\e649"; font-size: 20px; top: 50%; left: -5px; color: #fff; transform: translateY(-50%); } /* /page title */ .list-styled { padding-left: 25px; } .list-styled li { position: relative; margin-bottom: 15px; } .list-styled li::before { position: absolute; content: ""; height: 10px; width: 10px; border-radius: 50%; background: #ffbc3b; left: -25px; top: 5px; } textarea.form-control { height: 200px; padding: 20px; } #map_canvas { height: 500px; } .post-thumb-sm { max-width: 100px; } /* pagination */ .pagination { justify-content: center; } .pagination .page-item { margin: 0 10px; } .pagination .page-item.active .page-link { background: #ffbc3b; color: #fff; border-color: #ffbc3b; } .pagination .page-item:first-child .page-link, .pagination .page-item:last-child .page-link { border-radius: 0; } .pagination .page-item .page-link { color: #5c5c77; } .content * { margin-bottom: 20px; } .content a { text-decoration: underline; } .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { margin-bottom: 10px; } .content ol { padding-left: 20px; } .content ul { padding-left: 0; } .content ul li { position: relative; padding-left: 20px; margin-bottom: 10px; list-style-type: none; } .content ul li::before { position: absolute; content: "\e65d"; font-family: "themify"; font-size: 14px; left: 0; top: 1px; color: #ffbc3b; transition: .3s ease; } .content table { text-align: left; width: 100%; max-width: 100%; margin-bottom: 1rem; border: 1px solid #dee2e6; } .content table th, .content table td { padding: .75rem; vertical-align: top; border: 1px solid #dee2e6; } .content table thead { background: #eff1fd; } .content table tbody { background: #f8f9fe; } .content table tbody td { text-align: left !important; } .content blockquote p { margin-bottom: 0; color: #5c5c77; font-style: italic !important; } .content pre { padding: 10px 20px; background: #f8f9fe; } .teacher-thumb-sm { height: 85px; width: 85px; object-fit: cover; } .top-header { font-size: 12px; transition: transform .2s ease; transform-origin: top; font-weight: 600; } .top-header.hide { transform: scaleY(0); transform-origin: top; } .navigation { background: linear-gradient(to right, transparent 50%, #ffbc3b 50%); transition: .2s ease; } @media (max-width: 991px) { .navigation { background: #1a1a37; } .navigation .navbar-brand { padding: 12px 0; } } @media (max-width: 991px) { .navbar-collapse { background: #1a1a37; } } .navbar-nav { padding-left: 50px; background: #ffbc3b; } @media (max-width: 991px) { .navbar-nav { padding-left: 0; background: #1a1a37; } } .nav-bg { background-color: #1a1a37; } .nav-item { margin: 0 15px; position: relative; } .nav-item .nav-link { text-transform: uppercase; font-weight: 600; } .nav-item::before { position: absolute; left: 0; bottom: 0; height: 6px; width: 100%; content: ""; background: #fff; transform: scaleY(0); transform-origin: top; transition: transform .3s ease; } .nav-item:hover::before, .nav-item.active::before { transform: scaleY(1); transform-origin: bottom; } .navbar-dark .navbar-nav .nav-link { color: #fff; } link:focus, .navbar-dark .navbar-nav .nav-link:hover { color: #fff; } .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link { color: #fff; } .navbar-expand-lg .navbar-nav .nav-link { padding: 40px 0px; } @media (max-width: 991px) { .navbar-expand-lg .navbar-nav .nav-link { padding: 20px; } } .sticky { position: fixed; top: 0; width: 100%; z-index: 10; background: #fff; box-shadow: 0 2px 5px #0000000d; } .navbar .dropdown:hover .dropdown-menu { visibility: visible; opacity: 1; transform: translateY(0); } .navbar .dropdown-menu { box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12); border-bottom: 5px solid #ffbc3b; padding: 15px; top: 96px; border-radius: 0; display: block; visibility: hidden; transition: .3s ease; opacity: 0; transform: translateY(20px); background: #fff; } @media (max-width: 991px) { .navbar .dropdown-menu { display: none; opacity: 1; visibility: visible; transform: translateY(0); transform-origin: unset; } } .navbar .dropdown-menu.show { visibility: hidden; } @media (max-width: 991px) { .navbar .dropdown-menu.show { visibility: visible; display: block; } } .navbar .dropdown-item { position: relative; color: #1e1e4b; transition: .2s ease; text-transform: capitalize; font-family: "Poppins", sans-serif; } @media (max-width: 991px) { .navbar .dropdown-item { text-align: center; } } .navbar .dropdown-item:not(:last-child) { margin-bottom: 10px; } .navbar .dropdown-item:hover { color: #ffbc3b; background: transparent; } .hero-section { padding: 250px 0 290px; } .hero-slider .prevArrow, .hero-slider .nextArrow { position: absolute; bottom: -123px; z-index: 9; padding: 15px; color: rgba(255, 255, 255, 0.5); border: 0; font-size: 30px; transition: all linear .2s; background: transparent; } .hero-slider .prevArrow:focus, .hero-slider .nextArrow:focus { outline: 0; } .hero-slider .prevArrow:hover, .hero-slider .nextArrow:hover { color: #ffbc3b; } .hero-slider .prevArrow { right: 60px; } .hero-slider .nextArrow { right: 0; } .hero-slider .slick-dots { position: absolute; left: 0; bottom: -100px; padding-left: 0; } .hero-slider .slick-dots li { display: inline-block; margin: 0 6px; } .hero-slider .slick-dots li.slick-active button { background: #ffbc3b; } .hero-slider .slick-dots li button { color: transparent; padding: 0; overflow: hidden; height: 10px; width: 10px; background: rgba(255, 255, 255, 0.5); border: 0; outline: 0; } /* banner feature */ .feature-icon { font-size: 50px; color: #ffbc3b; display: inline-block; } .feature-blocks { margin-top: -100px; padding-left: 70px; padding-top: 80px; padding-right: 30%; } @media (max-width: 1400px) { .feature-blocks { padding-right: 10%; } } @media (max-width: 1200px) { .feature-blocks { padding-right: 50px; padding-left: 50px; padding-top: 30px; } .feature-blocks h3 { font-size: 20px; } } @media (max-width: 991px) { .feature-blocks { margin-top: 0; padding: 50px; } .feature-blocks h3 { font-size: 25px; } } /* /banner feature */ /* course */ .card-btn { font-size: 12px; padding: 5px 10px; } .flex-basis-33 { flex-basis: 33.3333%; } .hover-shadow { transition: .3s ease; } .hover-shadow:hover { box-shadow: 0px 4px 25px 0px rgba(27, 39, 71, 0.15); } /* /course */ /* success story */ .success-video { min-height: 300px; } .success-video .play-btn { position: absolute; top: 50%; left: 0; transform: translateY(-50%); } @media (max-width: 767px) { .success-video .play-btn { left: 50%; transform: translate(-50%, -50%); } } .play-btn { display: inline-block; height: 80px; width: 80px; border-radius: 50%; background: #ffbc3b; color: #fff; font-size: 20px; text-align: center; } .play-btn i { line-height: 80px; } .play-btn::before { position: absolute; content: ""; height: 0; width: 0; transform: translate(-50%, -50%); background: #fff; border-radius: 50%; top: 50%; left: 50%; z-index: -2; transition: .3s ease; transition-delay: .2s; } .play-btn::after { position: absolute; content: ""; height: 80%; width: 80%; transform: translate(-50%, -50%); background: #ffbc3b; border-radius: 50%; top: 50%; left: 50%; z-index: -1; transition: .3s ease; } .play-btn:hover::before { height: 80%; width: 80%; transition-delay: 0s; } .play-btn:hover::after { height: 0; width: 0; transition: 0s ease; } /* /success story */ /* events */ .card-date { position: absolute; background: #ffbc3b; font-family: "futura-bold"; text-align: center; padding: 10px; color: #fff; top: 0; left: 0; text-transform: uppercase; } .card-date span { font-size: 40px; } /* /events */ /* teacher */ .teacher-info { width: 70%; bottom: 0; right: 0; } /* /teacher */ /* footer */ .newsletter { background-image: linear-gradient(to right, transparent 50%, #ffbc3b 50%); margin-bottom: -170px; position: relative; z-index: 1; } .newsletter-block { padding-left: 50px; } @media (max-width: 575px) { .newsletter-block { padding-left: 15px; } } .input-wrapper { position: relative; } .input-wrapper button { position: absolute; right: 25px; top: 50%; transform: translateY(-50%); } @media (max-width: 575px) { .input-wrapper button { position: static; transform: translateY(-10px); width: 100%; outline: 5px solid #fff; outline-offset: -5px; } } .form-control { height: 60px; background: #fff; border-radius: 0; padding-left: 25px; } .form-control:focus { border-color: #ffbc3b; box-shadow: none; } .newsletter-block .form-control { height: 80px; padding-right: 160px; } @media (max-width: 575px) { .newsletter-block .form-control { padding-right: 25px; } } .bg-footer { background-color: #182b45; } .logo-footer { margin-top: -20px; display: inline-block; } .footer { border-color: #494a43 !important; padding-top: 275px; color: #8996a7; } .footer a { color: #8996a7; text-transform: capitalize; } .footer a:hover { text-decoration: underline; color: #fff; } .copyright p { color: #8996a7; text-transform: capitalize; } /* /footer */ .filter-controls li { cursor: pointer; transition: .1s ease; } .filter-controls li.active { font-weight: 600; color: #ffbc3b; } .filter-controls li:hover { color: #ffbc3b; } .tag-list a { display: block; padding: 5px 10px; background: #f8f9fe; color: #5c5c77; } .tag-list a:hover { background-color: #ffbc3b; color: #fff; } .media a:hover h5 { color: #ffbc3b; transition: 0.3s; } ```

Using SCSS is totally valid if you'd rather! You'll just need to set up a step that compiles the SCSS into regular CSS. There are lots of different ways you can do this: https://sass-lang.com/install

[jamestagal]

Thank you @jimafisk I appreciate your replies with explanations and help. :) I will continue working on theme over the coming week to try get it completed. Thanks again.

BTW. I noticed you have update the Plenti docs page and it looks really good, very clear and readable! Also just watched your Devlog and it is all coming along great. I will upgrade to 5.11 now.
One thing I wasn't sure if you had wired up yet was the Add (button) functionality once logged it. When clicking on it nothing happens on my test site https://myplentisite.gitlab.io/my-plenti-site/ Great work Jim. Ben

[jimafisk]

Thanks @jamestagal, seems like you're making good progress!

Good catch on the docs updates, it's subtle. There's a bunch of undocumented stuff I still need to add, just trying to make incremental improvements whenever possible.

The add button should be working, just note that you need to have a _blueprint.json for each content type for this to work. If that's still giving you trouble after adding that (and defining the default content inside each blueprint) just let me know!

[jamestagal]

Great... @jimafisk I will have a look at the _blueprint.json files... Also please let me known if I can help with stuff like posting documentation.. happy to help out whenever i can. Cheers Ben

[jimafisk]

Also please let me known if I can help with stuff like posting documentation.. happy to help out whenever i can.

That would be great honestly, the more resources that are out there, the easier it'll be to onboard folks. You're always welcome to make PRs to the website (https://github.com/plentico/plenti.co), but also if you ever want to post your own blog posts, make videos, tweets, or anything really it all helps. I appreciate all the engagement you already do with the project!