How to convert any CSS files into SASS, using GULP/NPM and bower

How to convert your CSS theme into SASS theme in less than 5 mins with DDKits, in this tutorial I will use my own way and files to do the fastest way possible to convert CSS into SASS and use gulp in sync with browsers, for development needs. What you need is your theme and just download my DDKits.zip file (or download the file attached to this blog below).

Included in this version:

1. "singularity": "^1.7.0",
2. "sass-toolkit": "^2.10.0"
3. "browser-sync": "^2.11.2",
4. "connect-livereload": "^0.5.4",
5. "gulp": "^3.9.1",
6. "gulp-autoprefixer": "^3.1.0",
7. "gulp-notify": "^2.2.0",
8. "gulp-plumber": "^1.1.0",
9. "gulp-sass": "^2.3.1",
10. "gulp-sourcemaps": "^1.6.0",
11. "gulp-notify": "^2.2.0",
12. "gulp-sourcemap": "^1.0.1"

1- Download DDKits.zip file and unzip it in your theme folder (or download the file attached to this blog below)

DDKits CSS to SASS

DDKits CSS to SASS

2- Create a folder in your theme folder named " sass "

DDKits CSS to SASS

3- Open the terminal and get in your theme folder, then open your ../css/ folder and run the sass converter to convert it into .scss file

sass-convert styles.css styles.scss

CSS to SASS

**- move the .scss file into your sass folder that you created before in your theme

DDKits CSS to SASS

4- run the command below

npm install && bower install bower.json

5- Make sure to finish the installation of both npm and bower (sometimes it would ask you which version you need to install as the image below, try to pick the latest stable one)

DDKits CSS to SASS

6- check your gulp by running the command below 

gulp

**- you should see the message from gulp and ddkits on your screen telling you if you are ready to go or you have an error in your sass files

DDKits CSS to SASS

Done!!