I have the bellow sass code ,
#include animation(swayb $speed ease infinite 3s, reset 1s ease forwards 5s);
If i watch using compass watch from my ubuntu machine it will throws an error,
(Line 2500 of _includes/_common.scss: Mixin animation takes 1 argument
but 2 were passed.)
I hope it will work. Check below code :-
#include animation((swayb $speed ease infinite 3s, reset 1s ease forwards 5s));
reference - https://github.com/sass/sass/issues/699
and please check this article also
https://www.sitepoint.com/sass-multiple-arguments-lists-or-arglist/
Related
I've been trying all the solutions i've found on StackO, but none of them works for me.
How would you verify that the backgound color is indeed blue for this element
css=#box10 > div:nth-child(3)
on this page https://www.w3schools.com/cssref/css_colors.asp
Thank you very much.
I have tried something but did not worked on Selenium IDE, but worked in Console:
You should get the color of the box with id="box10"
Return getComputedStyle(document.querySelector("#box10")).backgroundColor
You should take the string from the a.innerText inside the box with id="box10"
3.Compare the values
But here comes the catch:
assert on background.color with value ${box.color.a} Failed:
Actual value 'rgb(0, 0, 255)' did not match '#0000ff'
getComputedStyle(document.querySelector("#box10")).backgroundColor will return the rgb value
I have tried to convert it with the code found :
const rgb2hex = (rgb) => `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}`; rgb2hex(getComputedStyle(document.querySelector("#box10")).backgroundColor)
and it works in console, but it doesnt work on Selenium IDE Execute script command; I dont have much more time to investigate, but i hope is a good starting point. Let me know if you found something!
IDE:
I've got a couple of 20 a 25 working now.
This is another one I can't get to working:
*** Settings ***
Library Browser enable_presenter_mode=True
#Library XML
#Library Collections
#Library String
#Library DateTime
Documentation Scroll into view
*** Variables ***
*** Test Cases ***
Extracting text
Open Browser https://obstaclecourse.tricentis.com/Obstacles/99999
#sleep 3s
Browser.Focus css=iframe >>> input[id="textfield"]
sleep 1s
Type Text css=iframe >>> input[id="textfield"] Tosca
#Fill Text textfield Tosca
Click id=submit
sleep 3s
# used resources: https://robocorp.com/docs/development-guide/browser/how-to-work-with-iframes
The problem here is that It can't type in the section whilst it is not into view.
The weird thing is: I have seen it working once where it typed while the textarea was NOT even into view. But the problem is I closed that instance of VScode and I was not able to see how that was produced (very tricky) (but I know it is possible without being into view, yes strange)
Looked much things up.
I think this is almost it:
Browser.Scroll To css=iframe >>> input[id="textfield"] vertical=top
I have been working on a way to build a carousel purely with html and css.
No Javascript.
So far I have been liking what I found in the web and seen some tutorials.
Here is my issue though.
I build a mixin loop with Less to build a bunch of css but for some reason it seems to be missing a closing brace ")" on line 4 (of the pasted code below).
What I tried:
Remove the block of Less code completely -> error dissapeared.
Removed all the code inside the .carousel-reviews -> error persists
removed the the .carousel-reviews around the child selector -> error persists
Changed the variable name from #i to #index -> error persists
Removed all the code from inside the &__activator:nth-of-type( #i ) selector -> error persists
Hope someone can see what I am doing wrong here.
.loop( #i ) when ( #i > 0 ) {
.carousel-reviews {
&__activator:nth-of-type( #i ) {
&:checked ~ .carousel_track {
transform: translateX(calc(#i - 1) * 100%);
}
&:checked ~ .carousel__slide:nth-of-type(#i) {
transition: opacity #slideTransition, transform #slideTransition;
top: 0;
left: 0;
right: 0;
opacity: 1;
transform: scale(1);
}
&:checked ~ .carousel__controls:nth-of-type(#i) {
display: block;
opacity: 1;
}
&:checked ~ .carousel__indicators .carousel__indicator:nth-of-type(#i) {
opacity: 1;
}
}
}
.loop ( ( #i - 1 ) );
}
If I was not complete enough please let me know and I can add the info to the question.
EDIT 1
It seems that the compilers are stopping when they get to the first #i on line 4.
For some reason when I remove that first variable the error moves to line 8.
This suggests that for some reason the variable #i is not allowed inside the :nth-of-type().
Anyone know what is going on here? I will keep searching and updating when I find new answers or questions
EDIT 2
Found the sollution. Check answer
So it seems that I found the issue.
It seems that the problem is with less itself regarding the use of variables inside the :nth-of-type().
When I was removing the variables from the nth-of-type I noticed the error moving to a new line that also included the nth-of-type.
When I went to look up the use of variables in less I couldn't find anything bu later I came across a post here in stack overflow
THIS ANSWER BY MARTIN TURJAK
I would advice to check it out.
But in short, there seems to be an issue with the variable use and you have to use it as if you are using it inside a string like this :nth-of-type(#{i}).
Hope this helps others strugling with this same issue.
I currently don't have the time to find out why this happens an I haven't got a clue either but if there is someone that can explain this that would be awesome.
Anyways, thanks for your time and have a great day!
I am trying to write a LESS mixin with multiple input parameter values for CSS transforms. The input values are the type of transformation to be done and the value associated with the transformation.
For example, consider the code given below:
.transform(#type; #value){
}
If I give input as type='rotateY' and value='360deg', the output should be transform: rotateY(360deg). I have tried the below options but none of them seem to be working (output is mentioned as comment).
transform: "#{type}(#{value})"; /* Output: "rotateY(360deg)" */
transform: #{type}(#{value}); /* Output: Compiler error */
transform: #type(#value); /* Output: rotateY 360deg */
How should I code it to get the output as required? Please help.
Note: The mixin code has a lot of other items also, I have posted just the line that needs fixing.
Just escape the string using ~ like shown below. Doing this would make sure that the quotes are not printed in the output CSS.
Input Code:
transform: ~"#{type}(#{value})";
or
transform: e("#{type}(#{value})");
Mixin Call:
.transform(rotateY;360deg);
Output CSS:
transform: rotateY(360deg);
I have been using SASS for a month, love it.
However, when I create a variable such as:
$darkgrey:rgb(82,81,83);
Then decide re-use the variables, say in a specific p tag? In the body:
body{
p.ahh-whatever{
color:$darkgrey;
}
}
However it always seems to come up as a HEX in all browsers. Is there a reason for this? Do I need to use RGBA with 1 Opacity...
Software Being Used:
I also use Foundation 3 inline with Compass-Style. In addition to CodeKit to compile my code, and Sublime Text 2 for my editor. Operating System is OSX 10.8 (New IMac 27").
Any help would be great!
SASS will output hex whenever possible, because almost all browsers will understand it.
(Not all browsers will "get" RGB values or RGBA values.)
if you do specify a an rgba value, SASS will output it as such
for instance :
rgba(blue, 0.2)
will output :
rgba(0, 0, 255, 0.2)
see : Sass RGBA instances documentation