This question already has an answer here:
Using SASS Variables within nth-child?
(1 answer)
Closed 7 years ago.
I was trying to create a loop to create a number of nth-child selectors with matching content:
$show-numbers: true;
#if $show-numbers {
#for $i from 1 through 5 {
&:nth-child(1) {
&:before {
content: '#{$i}';
}
}
}
}
This, of course, makes 5 copies of
ul.checkout-bar li:nth-child(1):before {
content: "1";
}
with the "content" correctly incremented. But I cannot get the nth-child value to increment. Is this not possible in Sass?
NOTE a static variable can be interpolated:
$foo: 1;
&:nth-child(#{$foo}) {
&:before {
content: '1';
}
}
This works fine. It's the first thing I tried.
However, when using the $i in the for loop, it does not work.
You need to wrap the $i as an integer in the :nth-child() like this:
$show-numbers: true;
#if $show-numbers {
#for $i from 1 through 5 {
&:nth-child(#{$i}) {
&:before {
content: '#{$i}';
}
}
}
}
Renders:
:nth-child(1):before {
content:'1';
}
:nth-child(2):before {
content:'2';
}
:nth-child(3):before {
content:'3';
}
:nth-child(4):before {
content:'4';
}
:nth-child(5):before {
content:'5';
}
Related
I can write something like this (elem here is an XML::Element but it doesn't really matter):
for $elem.nodes {
when XML::Element { ... }
when XML::Text { ... }
...
default { note qq{Ignoring unknown XML node "$_".} }
}
which looks nice, but doesn't give me a readable name for $_ inside the code using it, which is why I'd prefer to write this:
for $elem.nodes -> $child {
when XML::Element { ... }
when XML::Text { ... }
...
default { note qq{Ignoring unknown XML node "$child".} }
}
but this doesn't work because now $_ isn't set, and so I actually need to write
for $elem.nodes -> $child {
given $child {
when XML::Element { ... }
when XML::Text { ... }
...
default { note qq{Ignoring unknown XML node "$child".} }
}
}
which is a bit redundant and adds an extra level of indentation.
It's definitely not the end of the world, but am I missing some simple way to have both a readable variable name and avoid given?
You can bind the variable above the when statements, it's a little uglier but it does the job.
for $elem.nodes {
my $child = $_;
when XML::Element { say 'I am XML!' }
when XML::Text { say 'I am text!' }
default { say "I am default: $child" }
}
Edit: In Raku I think it is perfectly reasonable to stick to using $_ seeing as the idea of $_ has been around for quite some time.
for #a -> $x { {
when 2 { say "$x ... a" }
when 4 { say "$x ... b" }
} given $x }
naughty double curlies and a post-given?
I am trying to get my query to react to a ref property.
https://v4.apollo.vuejs.org/guide-composable/query.html#variables
This wont work at all
const { result, variables } = useQuery(gql`
query {
episodes(page: $page) {
info {
pages
count
}
results {
name
}
}
}
`, {
page: 2
});
Tried this as well
setup() {
const currentPage = ref(1);
const { result } = useQuery(gql`
query {
episodes(page: ${currentPage.value}) {
info {
pages
count
}
results {
name
}
}
}
`);
function pageChange() {
currentPage.value += 1;
console.log(currentPage.value)
}
return { result, currentPage, pageChange };
},
This code below works for me when I input page number manually, but I want to pass the page number as variable, because my pagination page increases and I want the query to refresh.
const { result, loading } = useQuery(gql`
query {
episodes(page: 2) {
info {
pages
count
}
results {
name
}
}
}
`,
);
Can someone assist me?
In the link you gave query is followed by the query name.
const { result } = useQuery(gql`
query getUserById ($id: ID!) {
user (id: $id) {
id
email
}
}
`, {
id: 'abc-abc-abc',
})
You don’t specify the query name
Try this instead:
const { result, variables } = useQuery(gql`
query episodes($page: Int) {
episodes(page: $page) {
info {
pages
count
}
results {
name
}
}
}
`, {
page: 2
});
I don’t know what’s your schema looks like but I inferred that page is a Int. If it’s not change Int by the page type
I'm trying to look for an absence of an element in a conditional which would then take two different paths if the element is not there. However what I am getting is 'element not found' which is what I need but I need to go around this. Here is what I've tried:
if (HomeScreen.tabs.propertiesTab.isPresent()) {
HomeScreen.tabs.propertiesTab.click();
} else {
HomeScreen.tabs.allTabsTab.click().then(function() {
HomeScreen.allTabs.properties.click();
})
}
and
HomeScreen.tabs.propertiesTab.isPresent().toBeFalsy().then(function(isVisible) {
if (isVisible) {
HomeScreen.tabs.propertiesTab.click();
} else {
HomeScreen.tabs.allTabsTab.click().then(function() {
HomeScreen.allTabs.properties.click();
});
}
});
Any suggestions?
Try to explicitly resolve the promise with then():
browser.isElementPresent(HomeScreen.tabs.propertiesTab).then(function (isPresent) {
if (isPresent) {
// ...
} else {
// ...
}
});
Using browser.isElementPresent() here, but it should work with .isPresent() as well:
In protractor, browser.isElementPresent vs element.isPresent vs element.isElementPresent
I've got this LESS stylesheet. The idea it to alias a lot of icon classes to my local classnames in our "namespace".
// base-icons.less
.base-icon {
display: block;
font: "myFont.otf"
}
.base-icon-foo { content: 'foo' }
.base-icon-bar { content: 'bar' }
.base-icon-fiz { content: 'fiz' }
// my-icons.less
.my-icon {
&-foo { .base-icon; .base-icon-foo; }
&-bar { .base-icon; .base-icon-bar; }
&-fiz { .base-icon; .base-icon-fiz; }
}
Is there a way to prevent having to add the .base-icon class to each single line in the my-icons.less file? I want to apply the css to all classes that start with .my-icon but it would be cleaner to not have to type the .base-icon class each time.
Learn mixins and extend. E.g. (assuming you can't modify base-icons.less):
// base-icons.less
.base-icon {
display: block;
font: "myFont.otf"
}
// my-icons.less
.i(foo);
.i(bar);
.i(baz);
.i(#name) {
.my-icon-#{name} {
&:extend(.base-icon);
content: '#{name}';
}
}
Also see stuff like In LESS, can I loop over class/mixin "patterns"?
Surely there's a way to rewrite the following in LESS?
#bg-slider{
li:nth-child(1){
background:url('../images/bg1.jpg');
}
li:nth-child(2){
background:url('../images/bg2.jpg');
}
li:nth-child(3){
background:url('../images/bg3.jpg');
}
}
I've tried:
.bg-image (#slide) {
background:url('../images/bg#{slide}.jpg');
}
#bg-slider{
li:nth-child(n){
.bg-image(n);
}
}
But that just gives '../images/bgn.jpg' for all li's.
#bg-slider {
li {
.bkg(1);
.bkg(2);
.bkg(3);
}
.bkg(#i) {
&:nth-child(#{i}) {
background: url('../images/bg#{i}.jpg');
}
}
}