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. Using bower or npm
3. 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

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 files in Skeleton Sass 2:

• _MYProjectConfig.scss
• skeleton.scss (the former skeleton_template.scss file)
• 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",
     ...
}
...

Note: Skeleton Sass 3 includes a dependency of normalize-scss

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 backed up files to a separate directory. For the purposes of this guide we'll assume this project structure:

.
├── bower.json
├── bower_components
│   ├── normalize.scss
│   └── skeleton-sass
├── source
│   └── sass
│       ├── skeleton
│       │   ├── _config.scss
│       │   ├── _loader.scss
│       │   └── themes
│       │       └── MY_THEME/
│       └── skeleton.scss
└

Note:

For npm we'll have this structure:

├── node_modules
│   ├── normalize-scss
│   └── skeleton-sass-official

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 new file
• skeleton/ this is the new home of all your skeleton changes

Note: run this script as an alternative

# Use on Unix/Linux Systems or Windows with a terminal emulator (e.g. Cygwin, etc.)
mkdir -p source/sass/skeleton/themes/MY_THEME # change MY_THEME accordingly
cd source/sass
touch skeleton.scss skeleton/_config.scss skeleton/_loader.scss

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

• _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

• themes/ this is where your themes will live

Inside of source/sass/skeleton/themes copy and paste the themes files here as they were in Skeleton Sass 2. At the end we should have something like this:

.
├── bower.json
├── bower_components
│   ├── normalize.scss
│   └── skeleton-sass
├── source
│   └── sass
│       ├── skeleton
│       │   ├── _config.scss
│       │   ├── _loader.scss
│       │   └── themes
│       │       └── MY_THEME/ // theme files are truncated
│       └── skeleton.scss
└

where MY_THEME is the name of your theme directory

Now, we need to come back and modify the loader partial to include the remainder of our theme imports. Here's a better look at what we need to do:

@import "config"; // importing config override

// import theme overrides and extras
@import "themes/MY_THEME/vars";
@import "themes/MY_THEME/base";
@import "themes/MY_THEME/skeleton";

But wait! I'm using one of the default grids!

Skeleton Sass 3 makes this easy as well! We can refactor our loader partial to use a shipped grid instead:

@import "config"; // importing config override

// import default theme variables for grid or declare all grid changes in your own vars partial and remove this import
@import "../../../bower_components/skeleton-sass/skeleton/themes/fresh/vars";

// import theme overrides and extras
@import "themes/MY_THEME/vars";
@import "themes/MY_THEME/base";

// import default grid
@import "../../../bower_components/skeleton-sass/skeleton/themes/fresh/skeleton";

Cloning the Repo

If you wish to not use a package manager, then you can clone the repo and manage the dependency yourself. This, however, will require a bit more work for Skeleton Sass 3 to work due to a limitation of Sass itself. In the event you're really interested, Sass determined imports via static analysis which means we can use functions returns, string concatenation, etc with imports.