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;
}
Related
I'm trying to put a responsive text-shadow property on my titles (that gives a depth effect).
I kind of succeeded to do it with JSX variables, but it's no use since I need it to be scss only, because the font-size will be determined here. I would maybe need a scss var getter than would give the current font-size at any time.
Here's the kind of solution I'm looking for (scss):
#extend %font-something;
text-shadow: $fontSize * 1px $fontSize / 2 * 1px $fontSize / 14 * 1px #00000029;
Note that %font-something can change the font-size to any size.
Is this possible given the scss technology ?
Interesting topic. Yes, this is indeed possible.
You might use an one-liner:
$font-size: 16;
.foo {
text-shadow: #{$font-size * 1px} #{($font-size / 2) * 1px} #{($font-size / 14) * 1px} rgba(#000, .16);
}
Or, a solution like this:
$font-size: 16;
$offset-x: $font-size * 1px;
$offset-y: ($font-size / 2) * 1px;
$blur-radius: ($font-size / 14) * 1px;
$color: rgba(#000, .16);
$text-shadow: $offset-x $offset-y $blur-radius $color;
.bar {
text-shadow: $text-shadow;
}
Edit:
#mixin depth($font-size) {
text-shadow: #{$font-size * 1} #{($font-size / 2) * 1} #{($font-size / 14) * 1} rgba(#000, .16);
}
p {
#include depth(16px);
}
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.
I am trying to make a mixin to propery convert pixels to relative ems. I would like it to be flexible enough to allow any property to be used with any number of pixel values.
Any ideas on how to add multiple values to a single property without the recursion error I'm creating inside the for loop?
desired usage example 1:
.pixels-to-rems(font-size; 10);
desired output:
font-size: 10px;
font-size: 1rem;
desired usage example 2:
.pixels-to-rems(padding; 10,0,20,10);
desired output:
padding: 10px, 0px, 20px, 10px;
padding: 1rem, 0px, 2rem, 1rem;
Here's the mixin as is.
#baseFontSize: 10px;
.pixels-to-rems(#property, #pxvals) {
#pxValue: null;
#remValue: null;
.for(#pxvals); .-each(#pxval) {
#pxValue: #pxValue #pxval;
#remValue: #remValue (#pxval / #baseFontSize);
}
#{property}: ~"#{pxValue}px";
#{property}: ~"#{remValue}rem";
}
.for() mixin found here
See Merge feature. The only trick is that the merge statement will concatenate values into the same property rule, thus you'll have to isolate px and rem rules via some hack. For example like this:
usage {
.pixels-to-rems(padding, 10 0 20 10);
.pixels-to-rems(font-size, 50);
}
// impl.:
#base-font-size: 10px;
.pixels-to-rems(#p, #vs) {
.for(#vs); .-each(#v) {
#{p}+_: 1px * #v;
#{p}#{-}+_: 1rem * #v / #base-font-size;
}
#-: ~" ";
}
// .for-each impl. (stripped from the snipped linked in the question)
.for(#array) {.for-impl_(length(#array))}
.for-impl_(#i) when (#i > 1) {.for-impl_((#i - 1))}
.for-impl_(#i) when (#i > 0) {.-each(extract(#array, #i))}
Demo.
How can I use a negative variables in Stylus ?
I write mixin for a sprite:
sprite-medium(col,row)
width = 40px
height = 40px
width: width
height: height
background: url('../img/medium-sprite.png') no-repeat
background-position: -col*width -row*height
And I have an error. Of course I can write negative values in call of mixins, but it's not a perfect decision. Anyone can help? Thanks.
Stylus is treating the - before col and row as part of the name - they need to be separated for that to work like -(col * width), however you also need to avoid subtracting the two values that you want for background position. Here's a solution with a working background calculation and a bit simplified through the use of property lookups:
sprite-medium(col, row)
width: 40px
height: 40px
background: url('../img/medium-sprite.png') no-repeat
background-position: -(col * #width) -1 * (row * #height)
Hope this helps.
Now, I am almost having a responsive header as my original question was How to make a header responsive? . Still I am bit stuck with having the width of elements right.
I am using the following Susy-Compass setup:
.mod-header
#include container ($total-columns, $mobile-to-medium, $medium-to-large)
border: 2px red solid
+rem('height', 70px)
#include susy-grid-background
#include at-breakpoint($mobile-to-medium $columns-medium $medium-to-large)
#include susy-grid-background
#include at-breakpoint($medium-to-large)
#include susy-grid-background
.logo
float: left
border: 1px red solid
+rem('margin', 20px 0)
+data-uri-bg('logo.png')
nav
float: right
+rem('margin', 20px 0)
font-weight: 600
#include at-breakpoint($mobile-to-medium $columns-medium)
border: 1px blue solid
#include span-columns(2)
.tour
display: none
.action
border: 1px green solid
#include span-columns(1)
This maps to the following rendered layout:
Now, the effect of the span-columns does not seem to take effect, as well as the spacing from .logo to nav. I would like to have .action and the .find tags having width of 1 column each on the right, while the .logo has a fixed width on the left. Any ideas?
EDIT:
The screen settings with Susy are:
$mobile-to-medium: 400px
$medium-to-large: 800px
$columns-small: 1
$columns-medium: 8
$columns-large: 12
$column-width : 3em // each column is 4em wide
$gutter-width : 0.4em // 1em gutters between columns
$grid-padding : 0 // grid-padding equal to gutters
$total-columns: $columns-small
I think you need to reset the column at the breakpoint. I don't know what's the value of your mobile-to-medium, columns-medium, medium-to-large, and total-columns. It's an important information that's not listed above. But you might want to check this one Changing from 4 to 3 columns with omega with Susy fails, I think that's related to your question.