This question already has answers here:
Using regular expression in css?
(6 answers)
Closed 11 days ago.
I am using BEM with multiple elements and modifiers but different blocks.
.header__column--6
width: 50%
.footer__column--6
width: 50%
Is there a way to address the elements and modifiers globally in Sass? The following example results in an error.
*
&__column--6
width: 50%
Of course there would be the possibility to use global grid__column--6 instead of naming each block individually.
However, in my project i am dependent on defining these different blocks.
Try this attribute selector:
[class$='__column--6']
width: 50%
Related
This question already has answers here:
How do I get the last element of a slice in a golang template
(3 answers)
Get the last element of an array within a struct in a Golang template [duplicate]
(2 answers)
Closed 1 year ago.
I am using EMQX Kuiper.
https://docs.emqx.io/en/kuiper/latest/rules/overview.html#sinks-actions
Where in my rule settings, I am using dataTemplate property to fetch my data. Where I have to use Go template. No way to write go script only template.
Using this template I able to print first item of my slice.
"dataTemplate": "{{json (index . 0)}}"
But I need to print last item of my slice. Can't print this.
Tried to achieve that with the Go template language like this,
"dataTemplate": "{{$lenMyList := len .}} {{json (index . $lenMyList -1)}}"
But to no avail.
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)});
This question already has answers here:
XPath testing that string ends with substring?
(5 answers)
Closed 2 years ago.
Following is how the element looks like on the page:
I want all the li which comes right after General Engineering Courses. General [COURSE_NAME] Courses is common text on other pages as well.
So basically I want all the li which come right after GENERAL [COURSE_NAME] Courses.
I wrote the following XPath, but unfortunately, it's causing DOMException while executing the XPath on Chrome.
//*[starts-with(text(), 'GENERAL') and ends-with(text(), 'COURSES')]
Page: http://catalog.fullerton.edu/content.php?catoid=16&navoid=1922
You need use XPath Axes, the following-sibling
//p[starts-with(strong,'GENERAL ') and substring(strong, string-length(strong)-7)=' COURSES']/following-sibling::ul/li
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;}
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