I am trying to save a selector in SASS for easier referencing later, however I get a syntax error.
Here's what I'm trying to do:
$icon: [class*="icon"];
You need to convert it to a string if you want to use it as a variable:
$icon: '[class*="icon"]';
#{$icon} {
// stuff
}
Related
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.
Question relates to http://sassdoc.com package
I would like to parse each *.scss file in ./source folder, but instead of generating sassdoc folder i would like to create partial-html for each parsed file. For example:
parse: variables.scss and receive variables.html, without page header, sidebar - pure content, even without html and body tags.
My current code:
var gulp = require('gulp'),
sassdoc = require('sassdoc');
var paths = {
scss: [
'source/**/*.scss'
]
};
gulp.task('sassdoc', function () {
console.log("sassdoc task finished");
return gulp.src(paths.scss)
.pipe(sassdoc());
});
It's not possible with SassDoc' default theme. So you'd need to build your own theme to acheive this.
http://sassdoc.com/using-your-own-theme
Each item is given a file key in resulting data, so I would leverage that and do some merging.
That could potentially end up in a sassdoc-extra custom filter.
http://sassdoc.com/extra-tools
EDIT:
Actually your question is quite misleanding, you want a variable.html file but with no html ...
If all that you want is the raw JSON data from SassDoc, without any kind of theme processing, then the parse method is what you're looking for.
But again, unless you call SassDoc on each file separately, you'll get all files together, meaning post data processing to split them, that's why a custom theme (even with no html output) is the way to go.
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
I have recently found out that Smarty, differently from Django template engine, does not escape variables automatically and I need to put |escape next to most of the variables in my templates.
Following the docs, http://www.smarty.net/docsv2/en/variable.default.modifiers.tpl I need to set default modifiers, needn't I?
So, here's my code:
$smarty = new Smarty();
$smarty->default_modifiers = array('escape:"htmlall"');
... and still variables ARE NOT escaped until I add |escape next to them.
What am I doing wrong?
If you are on Smarty 3, try this:
$smarty = new Smarty();
$smarty->loadFilter(Smarty::FILTER_VARIABLE, "htmlentities");
Tadà !
Update: Smarty::FILTER_VARIABLE is undocumented as of 28/11/2014. Use $smarty->escape_html = true if you want to stick to offical docs.
It appears that this feature was removed from Smarty v3, and docs are outdated. See:
http://www.smarty.net/forums/viewtopic.php?p=62207
I'd recommend a workaround - which is template level. Either create a new style v3 function to take care of filtration, or, do a simple include.
Include method
Put this in a clean.tpl file:
{$text|escape:htmlall}
Then invoke as {include file=clean.tpl text=$myvariabletofilter}
Function method
The new functions in Smarty could also take care of that:
{function clean}
{$text|escape:htmlall}
{/function}
And invoke as {clean text=$myvariabletofilter}
As always, make sure that these things get trimmed right and don't insert unncessary spaces.