is it possible to do something like
background:
image: url(...)
repeat: no-repeat
size: cover
which is possible in SASS to be done in Stylus?
Unfortunately, that's not possible in stylus. But you could use a function like this:
background($url, $repeat = false, $size = false, $position = false, $attachment = false)
background-image url($url)
if ($repeat)
background-repeat $repeat
if ($size)
background-size $size
if ($position)
background-position $position
if ($attachment)
background-attachment $attachment
and use it like this: background("../images/ico-timeline.png", repeat-x, auto, center left, fixed) or background("../images/ico-timeline.png", repeat-x, auto).
The variables marked as false are optional, so you don't need to use it everytime you use this function.
No, this is not possible in Stylus.
Related
When I define new component, I need to specify how much this component must retire from other components (by other words, define margin-top; mixin WhenItJustAfter do it), and how much other components must retire from new component (mixin RulesForTargetThatGoingJustAfterIt do it):
WhenItJustAfter(targetElementSelector)
/{targetElementSelector} + {selector()}
{block}
RulesForTargetThatGoingJustAfterIt(targetElementSelector)
/{selector()} + {targetElementSelector}
{block}
provideBlockquoteComponent(
CSS_Namespace = "Blockquote",
positionalRelationshipWithOtherComponents = null
)
.Blockquote
// ...
if positionalRelationshipWithOtherComponents
for component in positionalRelationshipWithOtherComponents
+WhenItJustAfter("." + component.CSS_Class)
margin-top: component.whenJustBeforeIt
+RulesForTargetThatGoingJustAfterIt("." + component.CSS_Class)
margin-top: component.whenItJustAfter
Now we can define positional relationship between components as (sorry for long line, I did not explore yet how elegantly to break it in Stylus):
provideBlockquoteComponent(
positionalRelationshipWithOtherComponents: ({ CSS_Class: "AlertBox", whenJustBeforeIt: 6px, whenItJustAfter: 12px } { CSS_Class: "Image", whenJustBeforeIt: 12px, whenItJustAfter: 22px })
)
It will work for arrays of two and more elements; debug output will be:
inspect: {"CSS_Class":"(\"AlertBox\")","whenJustBeforeIt":"(12px)","whenItJustAfter":"(22px)"}
inspect: {"CSS_Class":"(\"Image\")","whenJustBeforeIt":"(12px)","whenItJustAfter":"(22px)"}
But what if positionalRelationshipWithOtherComponents will contain just one element?
provideBlockquoteComponent(
positionalRelationshipWithOtherComponents: ({ CSS_Class: "AlertBox", whenJustBeforeIt: 6px, whenItJustAfter: 12px })
)
We get:
inspect: 'CSS_Class'
inspect: 'whenJustBeforeIt'
inspect: 'whenItJustAfter'
Thereby positionalRelationshipWithOtherComponents is not array for Stylus anymore; Stylus iterated the properties keys instead of array elements.
I did not found the array literal for Stylus. If it exists, please teach me this literal, otherwise please suggest the workaround.
Which method allows convert ARGB to string as 'int, int, int'? Example. The $Main background color is set as a string '0, 100, 200'. Return $Main.BackColor gives ARGB but not string '0, 100, 200':
$Main = [System.Windows.Forms.Form] #{
BackColor = '0, 100, 200'
}
$Main.BackColor
--------------
R : 0
G : 100
B : 200
A : 255
IsKnownColor : False
IsEmpty : False
IsNamedColor : False
IsSystemColor : False
Name : ff0064c8
The To.String() method returns the result Color [A=255, R=0, G=100, B=200]
. This is not what is expected.
At the moment I am doing this:
('R', 'G', 'B').ForEach({ $Main.BackColor.$_ }) -join ', '
--------------
0, 100, 200
However, I hope that there are special methods for converting as ARGB to string, as string to ARGB. What are these methods? Thanks
However, I hope that there are special methods for converting as argb to string, as string to argb. What are these methods?
You'd think so, but to my knowledge there isn't a builtin two-way convertion for this, unfortunately.
Here are a couple of things you can do instead:
Create your own ConvertFrom-Color function:
function ConvertFrom-Color
{
param(
[Parameter(Mandatory=$true,ValueFromPipeline=$true)]
[System.Drawing.Color[]]$InputColor
)
process {
foreach($color in $InputColor){
$color.R,$color.G,$color.B -join ', '
}
}
}
And use when needed:
PS C:\> $colorString = $Main.BackColor |ConvertFrom-Color
PS C:\> $colorString
0, 100, 200
Use an [int]
An ARGB color consists of 4 1-byte channels, which fits perfectly into a 32-bit integer. If you need to communicate a distinct color using a single argument, this is already supported:
PS C:\> $color = [System.Drawing.Color]'0,100,100'
PS C:\> $color.ToArgb()
-16751516
PS C:\> $argbValue = $color.ToArgb()
PS C:\> [System.Drawing.Color]::FromArgb($argbValue)
R : 0
G : 100
B : 100
A : 255
IsKnownColor : False
IsEmpty : False
IsNamedColor : False
IsSystemColor : False
Name : ff006464
Just like with your initial string representation, it's worth highlighting that converting from the [int] representation works both with explicit casts and implicit conversions when assigning to typed properties:
$argbValue = -16751516
# This works just fine
[System.Drawing.Color]$argbValue
# As does this
[System.Windows.Forms.Form]#{ BackColor = $argbValue }
Override Color.ToString()
Since you're interested in changing the behavior of the default string representation of System.Drawing.Color, you might as well override the ToString() method implementation:
Update-TypeData -TypeName System.Drawing.Color -MemberType ScriptMethod -MemberName ToString -Value {
$this.psobject.Properties['R','G','B'].Value -join ', '
} -Force
Now all instances of [System.Drawing.Color] will use your custom ToString() method when converted to a string:
PS C:\> "$($Main.BackColor)"
0, 100, 200
There are some nice and initiative answers for this question, but it looks like all have overlooked the correct way, using type converters. There is a ColorConverter responsible for ConvertTo and ConvertFrom String/Color:
$Color = [System.Drawing.Color]'0, 100, 200'
[System.Drawing.ColorConverter]::new().ConvertToString($Color)
# Result: 0, 100, 200
This is the same class which is used by PropertyGrid to convert the string to Color or Color and vice versa.
It will take care of A element of the color as well, for example if you create the color like 100, 0, 100, 200. This solution automatically include or ignore A portion whenever is required:
$Color = [System.Drawing.Color]'100, 0, 100, 200'
[System.Drawing.ColorConverter]::new().ConvertToString($Color)
# Result: 100, 0, 100, 200
Reza Aghaei's helpful answer shows the proper solution and Mathias R. Jessen's excellent answer shows robust alternatives.
Let me complement them with a pragmatic hack; while deriving serializable representations from for-display strings (.ToString()) is generally ill-advised, the format at hand is unlikely to change in a way that will break this:
PS> $Main.BackColor -replace '[^\d,]' # remove all chars. except digits and commas
255,0,100,200
Note: The above includes the alpha value, unlike the original input string; however, casting back to [System.Drawing.Color] works equally well.
As far as I know there is no custom string format in System.Drawing.Color. You need custom conversion. You can use your method or any other. I would use custom expression and string interpolation:
$c = [System.Drawing.Color]'0, 100, 200'
#simulate array
$c,$c | select #{N="Color";E={"$($_.R), $($_.G), $($_.B)"}}
Result:
Color
-----
0, 100, 200
0, 100, 200
Currently I'm doing this
getByText(/SomeText/i);
But I want to make a function and pass some text as an argument by first storing it in a variable. I tried doing it like this:
let x = "/SomeText/i";
getByText(x);
or
getByText(`/${x}/i`);
But none of the options work.
If you have
const x = "Some string"
To test for x using regex,
getByText(new RegExp(x, "i"))
Perhaps you are looking for passing exact: false?
// Match a substring of Hello World
getByText(container, 'llo Worl', { exact: false }) // substring match
You can also pass your own matching custom function.
getByText(container, (content, element) => content.startsWith('Hello'))
https://testing-library.com/docs/dom-testing-library/cheatsheet#text-match-options
Welcome to SO!
I haven't tested this, but it seems getByText needs a regular expression:
getByText(/SomText/i);
as an argument and not, as you put here, a string:
let x = "/SomeText/i";
Does your code work if you create a regex from your string, like this?
let x = new RegExp("/SomeText/i");
I think your issue is your trying to set a RegEx as though it's a string
// Doesn't need quotes
let x = /SomeText/i
getByText(x)
What you're asking getByText to find is literally /SomeText/i, which I imagine your document does not have in it
I had a similar scenario where I needed a variable:
const x = 'some text';
getByText(`${x}`);
I need to add multiple condition in the ng-style.
How can I do this?
I tried below code but it is not working.
ng-style="ifTrue?'opacity:1;' : 'ifTrue? 'opacity: 1;': 'opacity: 0.5;''"
You can simply separate your conditions with ",".
Something like this:
ng-style="{ 'background-color': '#ff0', color: 'red' }"
See this example: http://jsbin.com/fabisepede/edit?html,output
Always remember to put quotes on "dashed" word ('background-color').
For the value you can also use variables defined in your controller and assign the style conditionally, but for that i prefer ng-class.
This worked for me
ng-style="IfCondition1 ? checkAnotherCondition && {'color':'red'} : {'color': 'green','font-weight':'bolder'}"
It checks my first condition and if true then it checks another condition and if that is true it makes it red. If the first condition is false then the last style is applied.
You could use something like
ng-style="condition && { /*properties*/ } || condition2 && { /*other properties*/ }"
ng-style="ifTrue ? 'opacity:1;' : 'opacity: 0.5;'
ng-style=(condition) ? 'run this if true' : 'run this if false'
Why dont use something like this?
how to set for three condition
example:
if data is === 1 then red
if data is === 2 then blue
else pink
#mario - you can use something like
[ngStyle]="{'property-to-set': (if_1) ? (true_block_1) : ((if_2) ? (true_block_2) : (other_true))}
I would like something like this
number(x)
&:nth-of-type(x)
Mostly just for readability - and for a basic example of when I might need to use the & in a mixin...
li //
number(1)
color: red
number(2)
color: blue
To yield...
li //
&:nth-of-type(1)
color: red
&:nth-of-type(2)
color: blue
Is this possible? Escaping ... ? ? ?
for my break-points... i use a variable --- but can't here
#media break-point-1 etc...
I'm afraid you can create shortcut like that
But you can use this mixin
setColors(colorList)
for col, index in colorList
&:nth-child({index})
color: col;
setColors(red blue);
This is a very old question and I am sure you found a solution a long time ago but there isn´t an accepted answer and maybe is useful for other users.
To use variables in selectors, they must be enclosed in braces (interpolation). To get the content in the mixin, use the block mixin feature:
Stylus
number(x)
&:nth-of-type({x})
{block}
li
+number(1)
color red
+number(2)
color blue
CSS:
li:nth-of-type(1) {
color: #f00;
}
li:nth-of-type(2) {
color: #00f;
}