2016-07-18, 04:37 PM
Recently I started working on a new MyBB theme and was looking into a way to use Less or Sass to improve the code management a little. Unfortunately I couldn't find anything that seemed like a 100% answer with no issues (You could probably run it from the command line, this tutorial doesn't cover that). However, after a little digging I found that my editor of choice, Atom, had plugins that supported such a thing.
Of course, that was only part of the battle. MyBB won't natively let me use a stylesheet that isn't stored in the database. In this tutorial I'll show you how I got Sass working perfectly for me locally (Well, we might use a little trickery), and how I set up my project.
Step 1
Find Your Plugin
As I mentioned, there are some cool plugins for Atom that let you use these technologies without any reliance on the environment you're working in. The one I use in particular is sass-autocompile. (Note: This plugin requires Node.js and the node-sass package. Follow the links on the plugin page to get those working) Once you have it installed there are a number of settings that you can configure, and these can change greatly depending on your preference, so instead of going through all of mine I'll just list the ones that I had to pay attention to:
Where you'd like to output your stylesheet:
[attachment=36563]
Where you'd like to output the compressed version of your stylesheet:
[attachment=36562]
So at this point you can actually make use of Sass completely in your MyBB project, pretty simple! However I'm going to go into setting up the file structure and making use of them in MyBB (In case you aren't sure where to go from here).
Step 2
Set Up Your Sass
Looking at organizing things, I moved all of the existing MyBB CSS files into Sass files into a /themes/ThemeName/css/sass folder. As you can see in the above screenshots I set the Sass to output the compiled .css and .min.css files into the /css/ directory. However we don't want to just use one Sass file, or have a bunch of compiled CSS files!
I created a single file called main.scss, which has includes for all other files I wanted to load into the project. Here is what I ended up with (Note that this is before any optimization, they should be separated into components rather than pages).
Since this is my main.scss file, I wanted all my other files to compile this one on save. Easy, all we have to do is add a little comment to the top of our separated .scss files (So _base.scss, _usercp.scss, _modcp.scss, etc):
Awesome, so now all our files are set up. You might have ended up with a file structure something like this:
[attachment=36564]
Step 3
Include CSS In MyBB
Now that everything is working, we need to pull our CSS into the project. This is where things get a bit hacky. We'll have to unload all the extra CSS files that are loading now. Go into the theme you're aiming to make use of Sass with. Under usercp.css, click Options -> Properties. Make sure that Specific Files is ticked, and add any file name that people likely won't ever use. I used nothere.php. Repeat this with all CSS files aside from global.css.
We have a couple of options (Probably more, but two I'll address). We can either import our compiled CSS into global.css or add it into the headerinclude. Using an import inside global.css might save a few headaches (For people expecting to see style inside global.css), but the headerinclude would be the "proper" place to put it. Here is the code for both examples, respectively:
Going with the second method means you'll want to unload the global.css file as well. Just use the method mentioned above.
If you're releasing the theme you developed using this method, you'll likely want to move the contents of your compiled main.css file into global.css in the ACP. This way whoever receives it can edit it just like any other theme. I do understand this isn't a perfect solution, but I think it's great to know and really useful.
With that you should be good to go on using Sass in MyBB! I wrote this relatively quickly so if there are any issues or important information missing, let me know.
Using Sass: http://sass-lang.com/guide
Of course, that was only part of the battle. MyBB won't natively let me use a stylesheet that isn't stored in the database. In this tutorial I'll show you how I got Sass working perfectly for me locally (Well, we might use a little trickery), and how I set up my project.
Step 1
Find Your Plugin
As I mentioned, there are some cool plugins for Atom that let you use these technologies without any reliance on the environment you're working in. The one I use in particular is sass-autocompile. (Note: This plugin requires Node.js and the node-sass package. Follow the links on the plugin page to get those working) Once you have it installed there are a number of settings that you can configure, and these can change greatly depending on your preference, so instead of going through all of mine I'll just list the ones that I had to pay attention to:
Where you'd like to output your stylesheet:
[attachment=36563]
Where you'd like to output the compressed version of your stylesheet:
[attachment=36562]
So at this point you can actually make use of Sass completely in your MyBB project, pretty simple! However I'm going to go into setting up the file structure and making use of them in MyBB (In case you aren't sure where to go from here).
Step 2
Set Up Your Sass
Looking at organizing things, I moved all of the existing MyBB CSS files into Sass files into a /themes/ThemeName/css/sass folder. As you can see in the above screenshots I set the Sass to output the compiled .css and .min.css files into the /css/ directory. However we don't want to just use one Sass file, or have a bunch of compiled CSS files!
I created a single file called main.scss, which has includes for all other files I wanted to load into the project. Here is what I ended up with (Note that this is before any optimization, they should be separated into components rather than pages).
@import 'variables';
@import 'base';
@import 'usercp';
@import 'modcp';
@import 'starratings';
@import 'showthread';
@import 'threadstatus';
@import 'css3';
Since this is my main.scss file, I wanted all my other files to compile this one on save. Easy, all we have to do is add a little comment to the top of our separated .scss files (So _base.scss, _usercp.scss, _modcp.scss, etc):
/* main: main.scss */
Awesome, so now all our files are set up. You might have ended up with a file structure something like this:
[attachment=36564]
Step 3
Include CSS In MyBB
Now that everything is working, we need to pull our CSS into the project. This is where things get a bit hacky. We'll have to unload all the extra CSS files that are loading now. Go into the theme you're aiming to make use of Sass with. Under usercp.css, click Options -> Properties. Make sure that Specific Files is ticked, and add any file name that people likely won't ever use. I used nothere.php. Repeat this with all CSS files aside from global.css.
We have a couple of options (Probably more, but two I'll address). We can either import our compiled CSS into global.css or add it into the headerinclude. Using an import inside global.css might save a few headaches (For people expecting to see style inside global.css), but the headerinclude would be the "proper" place to put it. Here is the code for both examples, respectively:
/* Would go in global.css as the only line of code */
@import url('themes/ThemeName/css/main.min.css');
<link rel="stylesheet" type="text/css" href="themes/ThemeName/css/main.min.css">
Going with the second method means you'll want to unload the global.css file as well. Just use the method mentioned above.
If you're releasing the theme you developed using this method, you'll likely want to move the contents of your compiled main.css file into global.css in the ACP. This way whoever receives it can edit it just like any other theme. I do understand this isn't a perfect solution, but I think it's great to know and really useful.
With that you should be good to go on using Sass in MyBB! I wrote this relatively quickly so if there are any issues or important information missing, let me know.
Using Sass: http://sass-lang.com/guide