Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I prevent SASS from moving import directives to the top of the rendered file?

Tags:

sass

I've recently used SASS to create a WordPress theme. I used a technique like this (http://css-tricks.com/compass-compiling-and-wordpress-themes/) to get SASS to compile the required CSS doc block with no issue.

Now I'm trying to use SASS to make the stylesheet for a child theme - this requires a CSS @import of the parent theme's style.css. This works fine, but it's compiling the @import before the CSS doc block! Any ideas how to render them in the intended order? I tried to put the CSS @import inside the SASS @import of a partial, but it still happens!

For example if this is my SASS:

/*!
Theme Name: Themey Name
Description: Theme Description
Version: 1.0
Template: parent-theme
*/

@import url(../parent-theme/style.css);

It is rendering out like:

@import url(../parent-theme/style.css);

/*
Theme Name: Themey Name
Description: Theme Description.
Version: 1.0
Template: parent-theme
*/

I really want that doc block first!

like image 473
ArleyM Avatar asked Apr 12 '13 17:04

ArleyM


1 Answers

The problem with the @-import at the top of the file shoudl be solved according to the following comment:

Jonathan Warren Permalink to comment# OCTOBER 10, 2012 In the latest WordPress (3.4.2) you don’t need the comment block at the start of your style.css for it to be recognised, just a folder in your themes directory with an empty index.php and style.css will do.

Found in the post on: http://css-tricks.com/compass-compiling-and-wordpress-themes/

Tested this on wp 3.5.x - works fine there.

like image 120
deetromp Avatar answered Nov 15 '22 12:11

deetromp