For example I have a css with code
.className {
animation: keyframesName 10s;
#keyframes keyframesName {
0% {...}
100% {...}
}
}
I'm thinking if we can do something like &_keyframesName to prevent duplicate keyframeName declare.
I haven't find SCSS document has something like this... anyone?
If it's just about having a unique name for the keyframe, then you can use the unique-id function:
string.unique-id()
unique-id() //=> string
Returns a randomly-generated unquoted string that’s guaranteed to be a valid CSS identifier and to be unique within the current Sass compilation.
Your example would look the following:
#use "sass:string";
.class {
$keyframesName: string.unique-id();
animation: $keyframesName 10s;
#keyframes #{$keyframesName} {
0% {}
100% {}
}
}
Or using the discouraged global alias:
.class {
$keyframesName: unique-id();
animation: $keyframesName 10s;
#keyframes #{$keyframesName} {
0% {}
100% {}
}
}
Example result:
.class {
animation: uw4m92d 10s;
}
#keyframes uw4m92d {}
Related
...
matrix {
axes {
axis {
name 'FOO'
values 'foo1' 'foo2' //
}
... stages {
stage ('doIt') {
agent{
label '???'
}
...
I would like to build a label instruction that will accept win or mac, if also one of the values of FOO is found. How can I combine the value of the axis with the other strings to form a meaningful label?
You can access the axis variable by its name - FOO. The only thing you need to keep in mind is to use it inside a double-quoted string, so the value can be interpolated correctly.
pipeline {
agent none
stages {
stage('Matrix example') {
matrix {
agent any
axes {
axis {
name 'FOO'
values 'bar1', 'bar2', 'bar3'
}
}
stages {
stage('Test') {
agent {
label "${FOO}"
}
steps {
// ...
}
}
}
}
}
}
}
I'm trying to grok the following example I found on the interwebs. It looks as if post-fixing a ampersand causes SASS to invert the nesting?
.MyComponent {
&-title {
.MyComponent--xmasTheme & {
}
}
&-content {
.MyComponent--xmasTheme & {
}
}
}
// Compiles to
.MyComponent-title {}
.MyComponent--xmasTheme .MyComponent-title {}
.MyComponent-content {}
.MyComponent--xmasTheme .MyComponent-content {}
&-title is a SASS feature to BEM-fy your syntax. It was introduced with the version 3.3.0rc3 and replaces the old syntax #at-root #{&}-title.
https://sass-lang.com/documentation/style-rules/parent-selector#adding-suffixes
Interesting articles about this feature:
https://unakravets.tumblr.com/post/78744593423/sass-snippets-the-almighty-ampersand
http://alwaystwisted.com/articles/2014-02-27-even-easier-bem-ing-with-sass-33
https://www.sitepoint.com/structuring-css-class-selectors-with-sass/
So this syntax:
.MyComponent {
&-title {
color:blue;
}
}
create this output:
.MyComponent-title {
color: blue;
}
and not:
.MyComponent .MyComponent-title {
color: blue;
}
P.S. To create the last output you could write an amperstand with interpolation syntax:
.MyComponent {
#{&}-title {
color:blue;
}
}
I'm going to say that #Arkellys comments answered this for me, seeing the SASS ampersand as a variable to the nested selector's parent. So when the ampersand is post-fixed in the nested selector, that's where SASS outputs the parent selector.
I have the following scss/sass:
.c-slider {
$parent: &;
[class^=c-slider-thumb]{
#{$parent}__item {
margin-left:0;
}
}
}
I receive the following error:
expected "]".
stdin 3:9 root stylesheet on line 3 at column 9
I want to achieve:
[class^=c-slider-thumb]{
.c-slider__item{
margin-left:0;
}
}
How can be done ?
That's how you can achieve it
.c-slider {
$parent: &;
#at-root [class^=c-slider-thumb]{
#{$parent}__item {
margin-left:0;
}
}
}
Your result will be
[class^=c-slider-thumb] .c-slider__item {
margin-left: 0;
}
I want a nice elegant way in SCSS to write BEM subcomponents without being verbose, and modify them using the parent class.
.container.container--red .container__title {
}
I tried this, but it didn't work:
.container {
&.container--red {
&__title {
}
}
}
But this doesn't work because it assumes the selector I need is .container--red__title
scss:
.container {
$root: &;
&--red {
#{$root}__title {
color: red;
}
}
}
output:
.container--red .container__title {
color: red;
}
Isn't this what you would want to use?
.container {
&--red {}
&__title {}
}
Compiling to
.container {}
.container--red {}
.container__title {}
Don't forget that hierarchy still counts in sass because you need to think about the compilation output.
I have the following simple scss:
.selector1,
.selector2 {
/*Some properties*/
&[disabled] {
/*More properties*/
}
}
What I would like to do, however, is to address the parents separately, is the best solution simply to declare the rules un-nested as below?
.selector1,
.selector2 {
/*Some properties*/
}
.selector1[disabled] {
/*Properties*/
}
.selector2[disabled] {
/*Different properties*/
}
Is there a way to differentiate parent selectors when using the & selector so I can nest the rules similar to the first example?
There's probably some way to do this using the selector manipulation functions, but there would be so much effort/code involved with this that it would simply be more efficient to not nest at all.
For your specific example, extends are an option:
%foo {
/* stuff */
}
.one {
#extend %foo;
&[disabled] {
/* different stuff */
}
}
.two {
#extend %foo;
&[disabled] {
/* other stuff */
}
}
You can't, but you can use the at-root property to come up with a similar result. But as you realised it's cleaner to declare the rules un-nested.
.selector1,
.selector2 {
/*Some properties*/
&[disabled] {
/*Some properties*/
#at-root .selector1[disabled] {
/*Different properties*/
}
}
}
The output will be:
.selector1,
.selector2 {
/*Some properties*/
}
.selector1[disabled],
.selector2[disabled] {
/*Some properties*/
}
.selector1[disabled] {
/*Different properties*/
}
An example: http://sassmeister.com/gist/905436fde032bac27685