1 post
  • Has been part of the Envato Community for over 1 year
  • Sells items exclusively on Envato Market
keithpickering says

I’m in the process of building a WP theme using SASS rather than plain old CSS. My original plan was to provide the .scss files as an option, but compile everything into a single style.css file to avoid confusion.

Then I started thinking about how useful the .scss files could be in terms of theme customization. I use tons of variables and mixins which allow for quick changes – for instance, changing one color variable could change the entire color scheme of the site. A lot of things that would normally be included in a “Theme Options” area could be controlled just as easily by editing the .scss files.

So here are my two options as I see it:

1) Compile everything into a single style.css file and provide the .scss files in case any buyers happen to be interested.

2) Encourage buyers to edit the SASS variables in order to customize the theme, provide some documentation on how to do so, and include a SASS compiler.

I’m not yet aware of how Theme Options work, and for me it’s easier to just edit files when they’re properly documented. I’m just not sure if the average Themeforest customer feels the same way.

Also, here’s another question while I’m here. What is the accepted best practice for handling things like columns, buttons, notifications, etc? Anything that would normally have been handled by shortcodes before the recent changes to the submission guidelines. I don’t see the point in including a plugin just for columns. Would it be advisable to put all these styles in a separate stylesheet so the styles can be moved over painlessly when switching themes?

Thanks for your time.

1882 posts YOU TOUCH IT YOU BUY IT
  • Has referred 200+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+6 more
FRESHFACE says

Hi Keith!

We feel the same way, the power of CSS pre-processors is just too good to be ignored and the basics are easy to understand. We have just released a LESS/SCSS compiler WP plugin on codecanyon which we will use in our future themes and other authors are welcome to use it as well. This way you just work directly with the LESS/SCSS files and leave the rest on the plugin.

We will probably stick to LESS over SCSS because we feel its more easier for beginners and it does compile a little faster.

With our plugin you can pass a variable to the compiler via a WP hook. This is very useful when you have for example a Theme Options panel where the user picks a background color and you inject it as a variable to one of your LESS/SCSS files on the fly – its just awesome and we really believe in this approach :)

Regarding your last question, there are authors who run a 1 theme / 1 plugin scheme. Everything what is not transferable goes to the theme and what is transferable can be put it that plugin. But like you said, shortcodes should ideally be in a plugin and not in a theme – at least the core functionality and basic styling.

23 posts
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in United Kingdom
  • Has been part of the Envato Community for over 1 year
themedesignguru says

One of the problem is a necessity to make one folder in a theme with 777 permission, that confuse end-users a lot. There were users who didn’t want to change permission or had no such possibility.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by