Upgrade from 2 to 3

Upgrading from Skelton Sass 3 is far more trivial than upgrading to Skeleton Sass 2, thankfully. In this guide, we'll outline the process of migrating all your code to use Skeleton Sass 3. Below is a brief outline of this guide:

1. Requirements
2. Goals of Skeleton Sass 3
3. Using bower or npm
4. Cloning the repo

Requirements

• Must be using Skeleton Sass 2.5 or greater (beta builds are fine)
• Helpful if you're using bower or npm to manage your dependencies

Goals of Skeleton Sass 3

The main goal of Skeleton Sass 3 is to completely decouple itself from your changes and other third party libraries that can be used in conjunction with Skeleton Sass 3. That being said, the mostly automated process introduced in Skeleton Sass 2 has been removed in favor of a more manual process at the cost of zero-risk updating.

Using bower or npm

If you use a package manager, then the process will be a bit easier than cloning the repo and handling updates that way. Regardless of project structure, however, the process is more or less the same.

First and foremost, if any edits were made to the core of Skeleton Sass 2, these changes will be lost with the update. Fork and request your changes to be merged if they seem significant enough to benefit the entire community!

Porting Themes to Skeleton Sass 3

Any themes created with Skeleton Sass 2 can easily be moved over to Skeleton Sass 3! Back up the following:

• _MYProjectConfig.scss
• skeleton.scss
• skeleton/themes/MyTheme1
• skeleton/themes/_loader.scss

Replacing _MYProjectConfig and MyTheme1 respectively.

Change your Skeleton Sass version in bower as follows:

...
"dependencies": {
     "skeleton-sass": "latest",
     ...
}
...

and then from command line run:

cd path/to/project/
bower update

Once Skeleton Sass 3 has been installed, we're ready to migrate our files to a separate directory. For the purposes of this we'll be following this file structure:

.
├── bower.json
├── bower_components
│   ├── normalize.scss
│   └── skeleton-sass
├── source
│   └── sass
│       ├── skeleton
│       │   ├── _config.scss
│       │   ├── _loader.scss
│       │   └── themes
│       │       └── demo
│       │           ├── _mixins.scss
│       │           └── _vars.scss
│       └── skeleton.scss
└

Inside of your source directory create a sass directory. Inside of the source/sass directory create the following:

• skeleton.scss copy and paste your old skeleton.scss contents into this file
• skeleton/ this is the new home of all your skeleton changes

Inside of source/sass/skeleton/ directory, create two files:

• _config.scss

  • Add this as the first line of the file

  @import "../../../bower_components/skeleton-sass/skeleton/core/config"; // change path accordingly

  • Copy and paste the contents of _MYProjectConfig.scss below the first line (excluding any extra imports)

• _loader.scss

  • Import the config partial we just created as the first line of the new loader partial

  @import "config"; // importing config override

  • The rest of the importing will need to wait until we've migrated the theme changes over

mkdir -p source/sass/skeleton/themes/MY_THEME
cd source/sass
touch skeleton.scss skeleton/_config.scss skeleton/_loader.scss