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');
}
}
}
Related
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"?
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';
}
This might be difficult to explain. Is there a way to have less not write out the #child argument without overloading the mix-in? I really don't want two mix-ins. If I use "" double quotes are outputted. I would like the LESS compiler to leave it blank.
LESS CODE
.build-on(size, #child)
{
&--1-1 #{child}
{
width: 100%;
}
&--1-2 #{child}
{
width: 50.0%;
}
&--1-3 #{child}
{
width: 33.3%;
}
&--1-4 #{child}
{
width: 25.0%;
}
&--1-5 #{child}
{
width: 20.0%;
}
}
// I might need to provide a child element
.data-table
{
.build-on(size, table);
}
// I might not
.grid
{
.build-on(size, "");
}
Pass it like so:
.yourClass
{
.build-on(size, ~'');
}
Or Better Yet...
Define a default: .build-on(size, #child: ~'') { ... } then no second is needed:
.yourClass
{
.build-on(size);
}