Compile sass naar css (wordpress bones)

Om scss (sass) naar css te compilen zijn verschillende mogelijkheden. Er kan software worden gebruikt, een plugin voor je IDE of Grunt. Hier volgt de setup voor Grunt (node js, grunt) (getest in windows 10).

1. Installeer de laatste versie van Node.js.

   • // controleer de installatie van node js in de cmd
     
     C:>node -v
     v0.12.7

   • // controleer de installatie van node package manager
     
     C:> npm -v
     2.11.3

2. Installeer Ruby.
3. Installeer Grunt

   C:> npm install -g grunt-cli

4. Setup the gruntfile.js and package.json files:
   • (set the up in the project directory)
   • gruntfile (example for the wordpress bones theme)

     module.exports = function(grunt) {
     	grunt.initConfig({
     		pkg: grunt.file.readJSON('package.json'),
     		sass: {
     			dist: {
     				files: {
     					'css/style.css' : 'scss/style.scss'
     				}
     			}
     		},
     		watch: {
     			css: {
     				files: '**/*.scss',
     				tasks: ['sass']
     			}
     		},
     		cssmin: {
                         sitecss: {  
                             options: {  
                                 banner: '/* NF minified css file */'  
                             },  
                             files: {  
                                 'mcss/style.min.css': [  
                                     'css/style.css'
                                                     ]  
                                             }
                                     }
                             }
                     });
     	grunt.loadNpmTasks('grunt-contrib-sass');
     	grunt.loadNpmTasks('grunt-contrib-watch');
     	grunt.registerTask('dev',['watch']);
     	grunt.loadNpmTasks('grunt-contrib-cssmin');
     };

   • package.json (to go with the gruntfile above)

     {
       "name": "library",
       "version": "0.0.0",
       "description": "",
       "main": "index.js",
       "scripts": {
         "test": "echo "Error: no test specified" && exit 1"
       },
       "author": "",
       "license": "BSD",
       "devDependencies": {
         "grunt": "~0.4.5",
         "grunt-contrib-sass": "~0.9.2",
         "grunt-contrib-watch": "~0.6.1",
         "grunt-contrib-cssmin": "~0.12.3"
       }
     }

      

5. Install sass

   C:project> npm install node-sass
   C:project>gem install sass

   Check if sass is working

   C:project> sass -v

6. Run nu de node package manager in de projectmap

   C:project> npm install

7. In de ‘cmd’ in de projectfolder run nu (geunt dev)

   C:wampwwwdev.website.nuwp-contentthemesprojectlibrary>grunt dev
   Running "watch" task
   Waiting...
   >> File "scssbreakpoints_768up.scss" changed.
   Running "sass:dist" (sass) task
   
   Done, without errors.
   Completed in 2.797s at Sun Aug 30 2015 21:11:57 GMT+0200 (West-Europa (zomertijd
   )) - Waiting...
   >> File "scssbreakpoints_768up.scss" changed.
   Running "sass:dist" (sass) task
   
   Done, without errors.
   Completed in 2.671s at Sun Aug 30 2015 21:12:01 GMT+0200 (West-Europa (zomertijd
   )) - Waiting...
   

8. Als er foutmeldingen staan, geven deze meestal een hint waar de fout ligt.