I set a style property on body when the page loaded. Just like:
document
.getElementsByTagName("body")[0]
.style.setProperty("--is-app", isApp ? 1 : 2);
And in my .scss file, I write this:
$isApp: var(--is-app);
#if $isApp == 1 {
do something...
}
#else{
do something...
}
But it did't work as I want.
Is this because of that the scss is pre-processor not runtime one?
Finally I change it by using different class name.
But I wonder if I missed something in scss? Is it possible to make it work just by scss syntax?
Sass is compiled on the server before it's sent to the browser. When it's being compiled, there is no document and front-end javascript doesn't run, so --is-app isn't defined.
Related
I like to start a simple work in sinatra(small ruby framework). For this purpose i like to know how to use a date and time picker in ruby. I use a datepicker like below
$("#jobdate_from").datepicker(); $("#jobdate_to").datepicker();
I wrote this line in an erb file, if anyone know, at least have an idea about this, please share
Thank you
Your date picker is a HTML/CSS/JS thing.
Write the correct markup in your erb file, put your styleing in a corresponding CSS file and write your initialization in your js file.
To include it in your generated HTML you can set your public folder with the
set :public_folder, Proc.new { File.join(root, "static") }
command. (Has only to be done if it is not called public anyway). Be sure to create a stylesheet/javascript folder underneath.
If you have done this, you can access your js/css files from within your erb file as you would access a normal method because the view is evaluated in the same context as your method where you called it.
I'm trying Zurb Foundation 5.
So, I've created a new project and try changing settings. When I changed, for example, $row-width: rem-calc(1170); in my-project/scss/settings.scss, it compiled (in my-project/stylesheets/app.css) into:
.row {
max-width: rem-calc(1170);
}
It seems like it doesn't know about rem-calc function.
How to make it calculate rem-calc properly?
Your function doesn't exist. You must declare it (or import it from another file) before you use it. Sass does not throw errors for non-existent functions because they have a similar syntax to CSS functions. So it assumes that if it isn't a Sass function that it must be a CSS function.
Related: Test whether a Sass function is defined
I'm trying Zurb Foundation 5.
So, I've created a new project and try changing settings. When I changed, for example, $row-width: rem-calc(1170); in my-project/scss/settings.scss, it compiled (in my-project/stylesheets/app.css) into:
.row {
max-width: rem-calc(1170);
}
It seems like it doesn't know about rem-calc function.
How to make it calculate rem-calc properly?
Your function doesn't exist. You must declare it (or import it from another file) before you use it. Sass does not throw errors for non-existent functions because they have a similar syntax to CSS functions. So it assumes that if it isn't a Sass function that it must be a CSS function.
Related: Test whether a Sass function is defined
Less.js has an interesting feature where you can reference javascript and evaluate CSS based on this, eg:
#color: ~`window.main_color`;
.test {
background-color: #color;
}
Is there something similar for Sass?
No as Sass is evaluated before sending to client. Less can be send as is and evaluate on client side, and then you can evaluate JS like window.main_color. But IMHO it's bad idee because it can provide some WTF when someone display it.
In symfony1.1, I develop a module that shall not include any of the passed down javascripts and stylesheets of its application.
I hence I created a module-specific view.yml, yet I cannot find the syntax for disabling them.
My original question involved only JavaScript and CSS. But now I want to remove metas and http_tags as well. For some reason I get for:
all:
http_metas: [-*]
metas: [-*]
the actual tag
<meta name="0" content="-*" />
Does anyone know what's different here?
You can exclude all the passed down javascripts and stylesheets, or remove just specific ones.
For example:
indexSuccess:
stylesheet: [-style]
or:
indexSuccess:
stylesheet: [-*]
It does not seem possible for metas:
You may find yourself wanting to remove default meta tags for specific modules within your application. This isn't possible through view.yml or module.yml ... The solution is to extend the sfWebResponse class, overriding the getMetas() method. This allows us to filter out unwanted tags without affecting special behaviour, e.g. for the title tag.
class myWebResponse extends sfWebResponse
{
public function getMetas()
{
$meta_tags = $this->parameter_holder->getAll('helper/asset/auto/meta');
if ($this->getContext()->getModuleName() == 'special_module' && array_key_exists('bad_meta', $meta_tags)) {
unset($meta_tags['bad_meta']);
}
return $meta_tags;
}
}