Step by step Wordpress SASS

Wordpress, 2015-06-16 23:32:31 UTC

Creating a beautiful website will attract visitors very much. To be able to create a beautiful UI, the programmer / designer needs a stylesheet code. Typically is using CSS. But with CSS in the usual way is not so pleasant. An emerging technique that is SASS making the code a style becomes easier and cozy.

Here's how to create a wordpress can work with SASS;

1. Installing SASS dan Compass

$ gem install sass

$ gem install compass



2. Create a file and folder like bellow;

 



3. SASS Project created using ruby so here we need to compile and configuration files and folders. And create a config.rb file as shown in the image above and add the following lines;

http_path = "/" #root

css_dir = "." #file hasil compile akan diletakkan pada root folder theme dengan nama style.css

sass_dir = "sass" #untuk sass folder

images_dir = "images" #untuk images folder

javascripts_dir = "js" #untuk javascript folder

relative_assets = true




4. To make SASS detect any changes, write the following command;

$ cd /wordpress_folder

$ compass watch




5. And you can create a style.scss file

/*
Theme Name: Nama Theme
Theme URI: http://your_web.com
Author: 
Author URI: 
Description: 
Version: 
License: 
License URI: 
Tags: 
Text Domain: 
*/




6. Save and you can see changes in style.css


Share: