Beginners Guide to LESS CSS Preprocessor

What is LESS?

Less is a CSS Preprocessor. http://lesscss.org/

Installing and Compiling

  1. Install Node.js https://nodejs.org/en/
  2. using npm ( Node Package Manager ) install LESS globally ( -g )
    1. $ npm install -g less
  3. Compile LESS

lessc style.less > style.css
  • lessc is used as the command for compiling

Error

'lessc' is not recognized as an internal or external command, operable program or batch file.


Solution for this Error

Compiling LESS

node C:\Folder\Name\node_modules\less\bin\lessc style.less > style.css

Note : \Folder\Name should be the folder in which the node_modules have been installed.

Beginners Guide to SASS CSS Preprocessor

What is SASS?

SASS is a CSS Preprocessor. http://sass-lang.com/

Installing and compiling

  1. Install Ruby https://rubyinstaller.org/
    • More Info : http://sass-lang.com/install
  2. Open Terminal or Command Prompt
gem install sass

Note : gems is a package manager for Ruby.

3. Check if sass got installed

sass -v

4. on a dedicated "test" folder , create two folders "scss" and "css"

C:\test

C:\test\scss

C:\test\css

5. In the Terminal or Command Prompt

C:\test>

Compile SASS

--watch command

--watch command is used to constantly monitor style.scss file for any changes and compile it as soon any change happens.

C:\test> sass --watch scss:css

sass --watch scss:css

--watch dedicated file

To watch dedicated file style.scss and style.css

sass --watch style.scss:style.css

style.scss is the main file

style.css is the complied file

Minify SASS

sass --watch scss:css --style compressed

Get all category ids in WordPress [Array]

Choose either one of these options to Get all category ids in WordPress as an Array

Get all category ids, Option 1

$output_categories = array();
$categories=get_categories($args);
 foreach($categories as $category) { 
 $output_categories[] = $category->cat_ID;
}

Get all category ids, Option 2

$categories_ids = get_terms(
 array( 'category' ), // Taxonomies
 array( 'fields' => 'ids' ) // Fields
);

$post Object Output in WordPress

WP_Post Object

WP_Post Object
 (
 [ID] =>
 [post_author] =>
 [post_date] =>
 [post_date_gmt] =>
 [post_content] =>
 [post_title] =>
 [post_excerpt] =>
 [post_status] =>
 [comment_status] =>
 [ping_status] =>
 [post_password] =>
 [post_name] =>
 [to_ping] =>
 [pinged] =>
 [post_modified] =>
 [post_modified_gmt] =>
 [post_content_filtered] =>
 [post_parent] =>
 [guid] =>
 [menu_order] =>
 [post_type] =>
 [post_mime_type] =>
 [comment_count] =>
 [filter] =>
 )

GitIgnore Directory

.gitignore Directory

Example Directory name : uploads

Ignoring ALL folders and files

 # .gitignore
uploads

Result:

# Will Ignore

/uploads # directory
/uploads # file
/example/path/uploads # directory
/example/path/uploads # file

Ignoring only the Root Directory

The correct syntax for that is to put leading and trailing slash:

 # .gitignore
/uploads/

Result:

 # will ignore
/uploads # directory

# will NOT ignore
/uploads              # file
/some/path/uploads    # directory
/another/path/uploads # file

Ignoring only the Root Directory and the Root File

 # .gitignore
/uploads

Result:

# will ignore

/uploads # directory
/uploads # file

Ignoring only Folders and not Files

# .gitignore
uploads/

Result:

# will ignore:
/uploads # directory
/some/path/uploads # directory

# will NOT ignore:
/another/path/uploads # file