OK I'm enjoying figuring Omega 4 out but would like some input on this.. So I copied "simple layout" from the omega main theme to my subtheme to use as my first layout and renamed all its files.

So now I have something like this in my sub-theme folder:
/css
- /mylayout
-mylayout.layout.css
/layouts
-/mylayout
-mylayout.layout.inc (with reference to mylayout.layout.css)
-mylayout.layout.tpl.php

OK, I got that working eventually with custom regions after remembering to modify my subtheme's .info (easy to make this mistake when you have already declared regions in layout!). I'm using SASS through rvm, so I'm wondering.. well, where does SASS come in?

In mylayout.layout.css (which was originally simple.layout.css - I used the CSS file because simple.layout.inc referenced the CSS file not the sass file), I see "_layout.scss" in the header as a comment? What does that mean exactly? And shouldn't all my CSS actually be a scss file since I'm using SASS? Do I just copy and rename the simple.layout.scss in omega theme to sass/layouts in my sub-theme folder? And what do I point the mylayout.layout.inc to the css or the sass? I've typed "drush omega-guard" in the sub-theme folder though not entirely sure how its working.

My other question is say I want to style a block.. I took a look in the sass directory and saw: "sass/partials/components/blocks" - I assume that would be the place to put my CSS. So do I just drop a scss file in there? Do I need to add a new css (or scss?) entry to the layout.inc for that file? And where would I put something like logo CSS without screwing up the all imports etc?

Also, and slightly off topic but I'm sure may help people new to suzy/sass etc, the layout css includes a lot of grid CSS, which looks almost computer generated in parts, for example: (width: 66.10169%;)? Which tool do you use to create/modify these properly or do they rarely need to be changed?

Comments

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented

OK I think I figured it all out...

simple.layout.css in the omega folder is only if you are using CSS and not SASS. So I deleted that, moved the scss file from omega folder to subtheme and SASS created a CSS properly from that. I then referenced it correctly in the layout.inc file.

As for adding CSS to blocks, I had to understand what a partial was - anything that is named "_file.scss" is a partial, which means its not created as a CSS file automatically by SASS, it has to be imported. The imports in style.scss reference "partials/components" which is not the directory (it does not import multiple scss files due to possible order problems), but a file called _components.scss (You can't have a components.scss and _components.scss or it wont reference properly). So I imported my own _block.scss file in _components.scss using and it worked. :)

fubhy’s picture

fubhy CreditAttribution: fubhy commented
Status: Active » Fixed

The imports in style.scss reference "partials/components" which is not the directory (it does not import multiple scss files due to possible order problems), but a file called _components.scss (You can't have a components.scss and _components.scss or it wont reference properly). So I imported my own _block.scss file in _components.scss using and it worked. :)

You can also use 'sass-globbing' (see google) for importing multiple files with wildcards (e.g. @import "components/*/*". While what you said about import order is maybe true for variables or mixins that inherit from each other components should never depend on each other and therefore the import order should not matter. Good trick for using globbing even for these files: Give your partials number-prefixes e.g. _01-file.scss / _02-another-file.scss, etc.

That way you can get rid of those files that are only used for @imports.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

emcniece’s picture

emcniece CreditAttribution: emcniece commented

I'm lost too :( ... how did you reference your sass file from layouts/xx/xx.layout.inc? My structure is as so:

/css
- theme.hacks.css
- theme.no-query.css
- theme.normalize.css
- theme.styles.css
/layouts
- /xx
- - xx.layout.inc
- - xx.layout.tpl.php
- - xx.layout.sass

fubhy’s picture

fubhy CreditAttribution: fubhy commented

../../../css/layouts/foo/foo.css

and put the sass file in ../../../sass/layouts/foo/foo.scss

take a look at how we are doing it with our layouts.

fubhy’s picture

fubhy CreditAttribution: fubhy commented
Issue summary: View changes

format