Is there a way to indent Sass' 3.3 mappings?
In scss we can write following:
$colors: (
header: #b06,
text: #334,
footer: #666777
)
But in Sass I cannot add any break into parentheses. I think that parentheses is required into mappings syntax.
$colors:
header: #b06
text: #334
footer: #666777
Syntax error: Illegal nesting: Nothing may be nested beneath variable declarations.
I tried some variances and nothing was compiled without errors.
To compile Sass I need to write it into one string like this:
$colors: (header: #b06, text: #334, footer: #666777)
But it is not indented syntax.
I think that will be a good walkthrough to write indented-only things into SCSS file and then import them.
There is number of issues with the indented syntax in SASS.
Unfortunately SASS syntax doesn't support Multi-line. Reading the documentation, there is only one exception, when it comes to multiple CSS selectors like in this example:
.users #userTab,
.posts #postTab
width: 100px
height: 30px
Read the complete documentation here:
http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html#multiline_selectors
So, there is no possibility to get multi-line support for an argument list in SASS.
This is a known issue and will not be addressed any time soon.
This is definitely something I'd like to add, but it would take a considerable amount of effort due to the refactoring of the indented syntax that would be required. Right now that's just lower priority than adding features that benefit everyone.
https://github.com/sass/sass/issues/1088
Related
There's a SASS variable defined as follows:
$section-padding: 3rem 1.5rem !default
It is then used elsewhere as a padding value which works fine:
padding: $section-padding;
How do I dynamically get hold of the 1.5rem value? Is there some way to extract it, supposing the $section-padding variable will always contain a shorthand padding/margin definition?
I cannot split the value into two separate variables as $section-padding is defined like this in a third-party CSS framework (Bulma).
Seems I was on the right track, but a mistake in a calc() call where I was using it made it blow up.
SASS has the concept of lists. A variable is considered a list if it contains space or comma separated values. You can then extract the desired part by using the nth() function (1-based indexing):
nth($section-padding, 2)
Note that to use this in a calc() the function call should be wrapped in #{} (which was my mistake):
padding: calc(200px + #{nth($section-padding, 2)});
So, I'm looking through the documentation, and unfortunately it stops short of offering any sort of explanation on how the normal TinyMCE format translates into the settings.py TINYMCE_DEFAULT_CONFIG dictionary.
Basically, I need to configure it so that bold is represented as b, not strong, and other similar changes.
Does anyone have a syntax example they could share for this?
So, it turns out, using:
django-tinymce4-lite
As my library, the way this is done is:
Try adjusting the formatting for inline to use the different element
If it's still persistent, add the element to the extended_valid_elements
Finally, if it really won't stop using strong and em, blacklist those tags
'formats': {
'bold':{'inline': 'b'},
'underline':{'inline': 'u'},
'italic':{'inline': 'i'},
}
and later:
extended_valid_elements:'u,b,i'
finally:
invalid_elements:'em strong'
I am currently writing a syntax highlighter for Monaco Editor, using Monarch.
I am using the states in order to deal differently with tokens depending on where they are in the line.
What I would like to do is #popall the states when I reach the end of the line, as all lines are independant.
Right now the only way I found is to add conditions at the end of all my rules, something like that:
[/\}/, {cases: {'#eos':{token: 'keyword', next:'#popall'},
'#default':{token: 'keyword', next:'#pop'}}}],
which is really redundant obviously as my 50+ rules have this case.
What is the clean way of doing this?
I am new to Sphinx. I am writing some documentation for embedded UDFs that requires a code block to contain 2 languages (e.g. SQL and python). At present I can only see how to have a single highlight language in a block.
Is it possible to "switch" languages within a block? Below is an example of reStructuredText that results in 3 code block that I want to merge into one.
Simply removing the second and third "::" doesn't work.
.. highlight:: sql
::
SELECT * FROM
EXTERNAL SCRIPT(
.. highlight:: R
::
#Some R markup
MEANS = matrix(runif(nclust*ndim)*sqrt(nclust)*sep, nrow = nclust)
VARS = matrix(runif(nclust)*ndim, nrow = nclust)
ps = 1:nclust
ps = ps/sum(ps)
.. highlight:: sql
::
)
FROM myshema.mySQLtable
I am 99% sure that this cannot be done by default, and your solution of using separate 'highlight' blocks is the standard procedure to show multiple languages.
I believe that this is for the best anyway as mixing code in one block is usually a bad idea as it can confuse readers.
Also, when converting reStructuredText into HTML for example, a style sheet is used to make everything look pretty, and a default style sheet is included. If you do some research, I'm sure you could edit that style sheet or make your own, perhaps making the 'border' invisible and the 'margin-bottom' zero pixels for 'highlight' blocks.
You can try this extension to have different languages in tabs:
https://bitbucket.org/birkenfeld/sphinx-contrib/src/c30b46a0a1b5c21ec9977e6abc598d0654316ac2/examplecode/?at=default
Say I have this:
$my-font-size:14px;
p{
font-size:$my-font-size;
}
div.section{
&.type-1,&.type-2{
h1{
font-size:$my-font-size;
}
}
}
Now say I want to combine this into one line. So I write:
p,div.section.type-1 h1, div.section.type-2 h1{$font-size:$my-font-size;}
But say I still want to benefit from the functionality that I don't have to repeat the "parent" which is div. Is there any way to do this? Like for example:
p,div.section((&.type-1,&.type-2)) h1{$font-size:$my-font-size;}
So basically I'm looking for some sort of shorthand syntax so that I can combine it with another selector.
div.section{
&.type-1,&.type-2{
h1{
Sass 3.3 or later
The function you're looking for is called selector-append. In your case, however, you also need to combine it with selector-nest for the h1.
p, #{selector-nest(selector-append('div.section', ('.type-1', '.type-2')), h1)} {font-size:$my-font-size;}
Sass 3.2 or older
For older Sass versions, you can use the append-selector function that comes with Compass, but both arguments must be strings. As above, you'll need to combine it with the nest function for the h1.
p, #{nest(append-selector('div.section', '.type-1, .type-2'), h1)} {font-size:$my-font-size;}