Multiple "themes" with SASS Modules - sass

Project description
So I have a project that has two distinct brands within a single application. I have a base set of Styles for the components, and then I have two different entry point Scss files as such:
Brand 1
brand1-index.scss
- #import brand1-settings-vars.scss
- #import base-styles-index.scss
- #import brand1-specific-styles.scss
Brand 2
brand2-index.scss
- #import brand2-settings-vars.scss
- #import base-styles-index.scss
- #import brand2-specific-styles.scss
Base Styles
base-styles-index.scss
- #import lots-of-small-scss-files.scss
- #import ... etc.
So as you might guess, since it was a pattern in older sass systems, the colors, fonts, and other vars for each brand are named the same, and are then used within the base styles. There are a total of 15 variables.
What I'm looking for
I'm trying to update this to use the newer module based system, and I don't see any easy way to update this. I want to avoid having to write with statements for every single one of my lots-of-small-scss-files.scss cause that'll be a nightmare, since I'd have to have each var declared in each file with !default to be able to pass them down.
What I would love is if there was a way to create a variables file in my base that is then overloaded by my brand vars, and then I just #use that file within my base, but I am not seeing a way to do that.
I must not be googling the right thing, cause I'm sure someone has needed to do this, but I can't find anything about it.
Suggestions?

So what I described after "What I would love" turns out to be perfectly possibly. You don't need to explicitly assign the variables tho, just use #forward instead of #use on the base style's settings file.
Base Files
Brand Index File

Related

loading macro files in a directory, transparently

I am looking for a way to separate the repetitive html codes from web pages, and for this I am planning to use the macro functionality. The problem here is for every macro I need to put this macro in a file, or put some of them in a file and include this in the template file.
What I need is to include once just the directory name something like
<#import "/tags/widgetDirectory" as widgets />
here the /tags/widgetDirectory is a directory , and every files here can be seen as a macro defined.
when I need to insert a code part from a file from this directory lets say slide.ftl I will just use
<#widgets.slider />
the system will check for slider.ftl in the /tags/widgetDirectory directory . here the slider.ftl can have <#macro> as first and as last line , or these can transparently added and system can load it as a macro
this will easy my designer work.
Maybe there is better way for doing this kind of widgets/components based web design ?
best regards,
This feature (importing directories) is something that's planned for FM actually... but it won't happen anytime soon. But I guess it can be solved fairly well with a hack right now. Instead of #import, use your own TemplateMethodModelEx, that you could use like <#assign widgets = importDirectory('/tags/widgetDirectory') >. This will return a TemplateHashModel that's also implemented by you and is bound to the directory path. When an item of that hash is get, it uses Environment.getCurrentEnvironment().include. The included file is expected to create a macro with name __main or something. So then you get that variable with Environment.getCurrentNamespace().get("__main") and return it as the result of the hash lookup. Of course this hash should also maintain a cache, so that if the same item is get twice, it wont include the template for the second time, just return the macro extracted earlier. This can be developer further, so that if the include file didn't define __main, then it's supposed that it prints directly to the output, and so it will be included again, when the "tag" is called again.

Set paths to scan for #import directives in grunt-contrib-sass

Grunt-contrib-less has an option paths that allows you to specify directories to scan with #import directives. Here is the option on grunt-contrib-less' doc page.
Is there something equivalent for grunt-contrib-sass? I have looked a bit but haven't been able to find anything.
loadPath
Add a (or multiple) Sass import path.

Create default folder locations for quick reference...with mixins?

I'm not sure if this is possible to achieve with mixins specifically, but hey, that's why I'm here.
I'm a recent convert to sass, and I'm working on a site with quite long path names. e.g. 'http://mysite.com/sites/mysite.com/themes/mytheme/images...'
It can get tedious either having to type, or copy and paste this long pathname, if I'm trying to add a background image to a class. So I was really hoping there was a way to create either a mixin, or some other bit of sass goodness that would allow me to do something like the following;
.class_name {
background: url(image_folder('image_name.png'));
}
Not only would this save me a good chunk of time, but the site I'm working on has multiple image folder locations, so if I could set up a few different folder locations it would be brilliant.
As I mentioned I'm pretty new to sass so I don't know where to start with this
With a bit more research on sass, I came across Interpolation, which provides the exact functionality I was looking for.
I'm now using it like so:
$image_folder: "http://mysite.com/sites/mysite.com/themes/mytheme/images";
.class_name {
background: url(#{$image_folder}/'image_name.png');
}

Custom syntax highlighting in Geany

I am trying to create custom syntax highlighting for Kivy '.kv' files in the Geany editor. Although the specific filetype seems irrelavant to the issue I'm having, as any efforts I make at getting syntax highlighting to work for a custom filetype results in a completely non-highlighted file. I believe I have done my homework on this, and nothing seems to work.
I have added the following to ~/.config/geany/filetype_extensions.conf
Kivy=*.kv;
I also have a custom type definition file named 'filetypes.Kivy.conf' in ~/.config/geany/filedefs/. I have tried basing this file off several of the stock type definition files in /usr/share/geany/ and the file never gets any syntax highlighting applied in Geany. Right now, just for experimentation's sake, my 'filetypes.Kivy.conf' file looks like this:
# For complete documentation of this file, please see Geany's main documentation
[settings]
# default extension used when saving files
extension=kv
# single comments, like # in this file
comment_single=#
[keywords]
# all items must be in one line
primary=size canvas
secondary=pos size
[indentation]
width=4
# 0 is spaces, 1 is tabs, 2 is tab & spaces
type=0
This is very loosly based on the stock XML definition file, but like I said I've tried many other stock files. In many cases I only changed the 'extension=' value to kv and still no highlighting was applied, even though going to Document>Set Filetype in Geany and choosing virtually any random filetype (besides my custom entry) would yeild some sort of highlighting within my .kv file. This is even the case when using the unmodified contents of a stock definition which otherwise works fine on my .kv file when specifically selected in Geany!
Also, the Kivy filetype is listed and selected by default in Document>Set Filetype within Geany, so I must be doing something right here!
I realize this similar question has been asked, but the solutions seem irrelavent to my case, as I've tried every related topic on this and many other sites. My Geany version is 1.22 and I'm running Arch Linux. This is driving me nuts - any suggestions?
Thank you!
Set lexer_filetype= property in the [settings] section of your filetype file. Working highlighting requires that there is a lexer that could be used for highlighting the .kv-files.
For more info see http://www.geany.org/manual/#lexer-filetype
There are three important things to obey:
the configuration file should be placed in "~/.config/geany/filedefs"
the configuration file must have the extension ".conf" - otherwise it won't show up at all (the files in "/usr/share/geany/filesdefs", where I copied my base file from, do not have a ".conf" extension!)
you must set the "lexer_filetype" to an existing (presumably builtin) configuration; e.g. "lexer_filetype=Python"

Reference custom table in WiX fragment file

I want to create a fragment file that will only contain a CustomTable in the file. This is easy enough, but I do not know how to link/include it back into the main product.wxs file.
The fragment file is in the same project as the product file, and I have also tried adding an include tag for the file without success, and even putting the custom table into a WiX include file.
Is there a way to do this? Or is it going to have to live in the product file?
The WiX toolset compiles and links in a similar manner to the C/C++ compiler. The linker starts at the "main" entry point (Product element, in your case) then follows the references from there, which in turn follows references from there until all are resolved.
Part of your question is missing but based on the title I'm going to guess that you want a CustomTable element. Typically that CustomTable is processed by a CustomAction. There are a couple good ways to reference a CustomAction.
I would not use an include file.
You could try using EnsureTable if you'd like to make sure the table is created whether or not there is data in it. If you'd like to separate the custom table's schema definition from the data I believe you can just define them in separate fragments and reference the schema definition from the data definition fragment by opening with <CustomTable Id="your table name"> and defining the rows of data within it.
In general Wix won't pull fragments into the main authoring unless they contain elements that are referred to somewhere and since there is currently no such thing as CustomTableRef you may opt to use other elements such as an empty PayloadGroup or ComponentGroup that you can refer to (using a PayloadGroupRef or ComponentGroupRef respectively) from your main Bundle, Product or Module element as the case may be.

Resources