What's new
Carbonite

South Africa's Top Online Tech Classifieds!
Register a free account today to become a member! (No Under 18's)
Home of C.U.D.

n00b needs help please - SCSS to CSS for wordpress site.

souljazk

VIP
VIP Supporter
Rating - 100%
122   0   0
Joined
Jul 4, 2014
Messages
5,278
Reaction score
1,652
Points
7,855
I'm re-designing my website and found some nice looking 'blokies' on codepen that I've done some very basic editing on. In the past I've added CSS/HTML to my site no prob, but this code is either "HTML pub" or "SCSS" and neither work "nativley".

I would prefer to get this to convert to CSS (open to other options) vs using a plugin, which I tried but it can't see the folders I've created for "scss input" & "css output". I've found a Windows app called Scout-app which apparently helps convert this to CSS, but I'm even strugging to just get it to open a damn project (see very much a noob here).

Anyone able to point me in the right direction please? :)

Codepen - https://codepen.io/xfhvbr6u-b/pen/JjpKPQB
Scout App -
;

Dankie
 
If I may ask why don't you want to use a plugin that will automatically convert it for you? I don't know much about Wordpress, I presume there are some caveats?
 
These days, you can find basically anything you need code wise online.

I just used some online conversion tools to convert both the Pub HTML and SCSS to their respective counterparts (HTML & CSS).

https://codepen.io/eawardie/pen/oNVOzGp

ps. Not really sure if this is what you need.
pps. Probably also good to actually go through the code to understand what is actually happening.
 
If I may ask why don't you want to use a plugin that will automatically convert it for you? I don't know much about Wordpress, I presume there are some caveats?
Ask away Ms Viv - I like to learn + do "stuff" without plugin's where I can, as less is more. To be honest I'm prob being a bit anal about it, as even with shared hosting and +-10 plugins, I can still get all the pages on sites I build to > 90% desktop speed score in GTmetrix (London server usually) aswell as Chrome's lighthouse desktop speed test & +-80% speeds for mobile for GTM and Lighthouse.

Less plugin's does mean less attack surface / less plugins to monitor for critical or low complexity attacks. Again, I'm prob just being pedantic. :p

During development I install a couple of "extra" plugins for things like additional image optimisation, but I uninstall them before going live, as the ones I remove will live on the staging server and be excluded when pushing to live.

Here are screenshots of a site I optimised for a local Forex company, as the developer handed it over with little to no proper optimisation. Keep in mind this is shared hosting in CT, and the tests were from the GTMetrix Canadian server..



 
Last edited:
These days, you can find basically anything you need code wise online.

I just used some online conversion tools to convert both the Pub HTML and SCSS to their respective counterparts (HTML & CSS).

https://codepen.io/eawardie/pen/oNVOzGp

ps. Not really sure if this is what you need.
pps. Probably also good to actually go through the code to understand what is actually happening.
Dude you are a frikkin' legend, THANK YOU! Which tool did you use?
 
wordpress......
mario-movie-ugh-really.gif
 
I laughed way more than I should have xD

@souljazk I don't have anything against Wordpress, I even had to design a e-commerce site using it for work at some point. Though they weren't too happy when I made exactly what they wanted hosted on our own servers sorta to prove that it can be done using our own software and payment implementations instead of paying for a e-commerce addon.
I only hate it because of who I had to make the damn site for.

That is where I learnt that it didn't matter that I took the initiative in order to save the company some money/headaches etc.
It was some top dog's kid who just finished highschool "venture" and it had to be done their way regardless of it being easier and cheaper manage it on our own servers.

In the end it failed and cost the company north of R2 Million etc but ey, at least the kid was happy I guess.
 
I laughed way more than I should have xD

@souljazk I don't have anything against Wordpress, I even had to design a e-commerce site using it for work at some point. Though they weren't too happy when I made exactly what they wanted hosted on our own servers sorta to prove that it can be done using our own software and payment implementations instead of paying for a e-commerce addon.
I only hate it because of who I had to make the damn site for.

That is where I learnt that it didn't matter that I took the initiative in order to save the company some money/headaches etc.
It was some top dog's kid who just finished highschool "venture" and it had to be done their way regardless of it being easier and cheaper manage it on our own servers.

In the end it failed and cost the company north of R2 Million etc but ey, at least the kid was happy I guess.
No worries bud, I too had a good laugh & I know that actual programmers don't like WP but I make it work :) For me it's a huge plus that it's so widely used and even "the best" designers, leave massive gaps in terms of performance and security, which I can rectify and reflect my work in the final sites speed/security metrics, VS the initial ones.

This year I want to start approching agencies (who seem to rely heavily on WP too) and offer my knowledge to them to help them improve their client offerings on the perfomance and security front.

I TOTALLY get where you're coming from regarding that work situation, I had something similar with a client a while back, long story was:

1. Existing site (WP) was on the cards to be redesigned from scratch.
2. Company does north of $10m nett p/y.
3. 1 internal guy at the companty thought he was hot-stuff and DESPERATLY tried to get the company to move to WebFlow.. I think this was because he was going to get a kickback from the WF designer friend of his.
4. Due to legal compliance, the company had already been using Cloudflare for a few years, which I spearheaded, designed and managed for them.
5. At the time, WebFlow was not compatible with CF, and WF was 5y younger than it is now and IMHO, was not proven from a security POV etc.
6. I advised to stay with what we know & provided some external sources to backup my decision.
6.1 One of the articles I sent was from Webflow themselves, showing that its not compatible with CF, in terms of reaching the companies risk/compliance needs. I spelled it out as simple as I could...
6.2 In the following 2 weeks the company asked me to further investiagte this and see if there was a way to make it work, even thought I said it wont and I don't want to waste their time and money.
7. Two weeks later Mnr hot-shit sent me a lemail + link saying he found a way to make them work together & I MUST get started with Webflow and securing it that same day, or they will find someone else to do so..... (No auth from directors)...

What do you know.... The link is the very same link I sent him + directors, which clearly spelled out that WF would not work with CF, in the simplest English.... This is a dude with a 3y uni degree in finance, so he is not stupid by any means.

Then Mnr hot-shit was upset with the final bill to cover the consulting time to 'try make it work", where 2weeks prior I had sent them the link saying it wont work.... As far as I'm concerned, you can't blame me for lack of trying to get this through to them...
 
Last edited:
Ask away Ms Viv - I like to learn + do "stuff" without plugin's where I can, as less is more. To be honest I'm prob being a bit anal about it, as even with shared hosting and +-10 plugins, I can still get all the pages on sites I build to > 90% desktop speed score in GTmetrix (London server usually) aswell as Chrome's lighthouse desktop speed test & +-80% speeds for mobile for GTM and Lighthouse.

Less plugin's does mean less attack surface / less plugins to monitor for critical or low complexity attacks. Again, I'm prob just being pedantic. :p

During development I install a couple of "extra" plugins for things like additional image optimisation, but I uninstall them before going live, as the ones I remove will live on the staging server and be excluded when pushing to live.

Here are screenshots of a site I optimised for a local Forex company, as the developer handed it over with little to no proper optimisation. Keep in mind this is shared hosting in CT, and the tests were from the GTMetrix Canadian server..



You make valid points. I guess also a plugin for automatic conversion is over the top if the content of the SCSS and HTML pub will not change frequently during development.

Also that is HUGE improvement holy shit
 
I'm re-designing my website and found some nice looking 'blokies' on codepen that I've done some very basic editing on. In the past I've added CSS/HTML to my site no prob, but this code is either "HTML pub" or "SCSS" and neither work "nativley".

I would prefer to get this to convert to CSS (open to other options) vs using a plugin, which I tried but it can't see the folders I've created for "scss input" & "css output". I've found a Windows app called Scout-app which apparently helps convert this to CSS, but I'm even strugging to just get it to open a damn project (see very much a noob here).

Anyone able to point me in the right direction please? :)

Codepen - https://codepen.io/xfhvbr6u-b/pen/JjpKPQB

Dankie
Web-capture-20-2-2024-163346-codepen-io.jpg

You can also view the compiled HTML.
 

Users who are viewing this thread

Latest posts

Back
Top Bottom