Could I use @extend for existing classes?

Author Posts

stephen Jeffers September 27, 2022 at 6:27 pm

I use ACSS, which is a CCS framework similar to bootstrap.

I’m looking for a way to use the utility classes using the @extend function in SCSS.

Here’s my website https://builderius.agb-digitalmarketing.xyz/

Please let me know if you need anything, such as login details for my website or anything else.

Sebastian September 28, 2022 at 10:43 am

Hey Stephen,

From looking at your site I guess you mean Automatic CSS by the Oxygen guys (rather than Atomizer CSS). This might be possible, I can speculate, but there may be unforeseen hitches when you try the following:

1. In MT’s full code view, import the ACSS file using

@import '../wp-content/uploads/automatic-css/automatic.css';

(note: imports are relative to the /wp-content/micro-themes/ directory, hence the leading ../)

To test if extend works, you could write the following code below the import:

.btn--beige {
   @extend .btn--white;
  background-color: beige;
}

You might need to use the Ctrl + Alt + P keyboard shortcut to force Microthemer to do a full Sass compile. But it might just work, and generate compiled CSS that includes all of the CSS declarations of the .btn–white rule. If it doesn’t work, I may have overlooked something crucial.

Some things to note:

  1. I can see two ACSS files on your home page, you may also want to import: /wp-content/uploads/automatic-css/automatic-frames.css
  2. Any files you load into Microthemer should be dequeued via a WordPress PHP function (Oxygen disables functions.php so it would need to go somewhere else), otherwise the ACSS framework CSS will load onto the page twice (it will be included in MT’s stylesheet due to the @import) .
  3. The main automatic.css file is 191 KB, which might make Microthemer’s Sass compilation a bit slower
  4. Given all of the above, it might not be worth the hassle. But only you can answer that question 🙂

I hope that helps. Please let me know if you have any further questions.

Cheers,
Sebastian

stephen Jeffers October 1, 2022 at 7:55 am

Hello Sebastian

I wasn’t able to get it to work but I was able to copy the stylesheet into Microthemer and it worked that way.

Using the below didn’t throw any errors though.

@import url(‘../wp-content/uploads/automatic-css/automatic.css’);

I have found a solution though. I’m testing Builderius. It’s a new plugin that produces clean HTML.

They are in the process of creating linked components. So if I want sections of my website to use the same design such as the hero section, contact us section, etc. I can build it with classes and query custom post types using graghql.

I’m looking forward to partials where I can store mixins though. I’m starting to learn a bit about it and I love them.

Exciting times.

Thanks as always Sebastian.

Kind regards

Stephen

Sebastian October 3, 2022 at 9:12 am

Ah, I’m glad you found a way forward.

Checking Sass @import docs, it seems imports with a .css extension (rather than .scss) might not be processed in the same way. So copying the CSS to a .scss file might be a workaround. But it’s good to know you can paste into MT to get things working. That will be less messy once MT supports multiple snippets in the folders in the main view.

Cheers!
Sebastian

You must login or register to reply to this topic.