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.
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);
}
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.
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;
}
i'm using breeze 1.4.5 and angular 1.2.1
i'm binding directly to a breeze entity to a property of type decimal using the input type "text"
<input class="form-control" type="text" ng-model="vm.transaction.ListPrice" />
when doing this it only accepts numbers 0-9 in this field (comma, decimal point and other characters are ignored)
another input which binds to a text property of an entity just works fine so it has to be something behind the scenes which i don't understand
(i don't use type "number" because i don't like the buttons for the up/down selection in the input field.)
If the problem still there, try using breeze.directives. zFloat directive solved the problem.
http://www.breezejs.com/breeze-labs/breezedirectivesfloat
Ok now that some time went by the guys at breeze came up with a solution (zfloat directive for angular):
http://www.breezejs.com/breeze-labs/breezedirectivesfloat
Use number input type and hide arrows with this css rule
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
See this answer for alternative methods.
I think using number input type is easy and syntactically better than using text.
I used the recommendation above from notme but needed to add a bit to get the keep the validation from being a problem.
The input type of number allowed the decimal points, so that was good.
The CSS from notme turned off the spinners, that also helped.
However, bootstrap still made the field highlight red when a decimal was in the field. This bit of CSS will make the field look blue when there are decimal points:
input:focus:invalid { color:#333; border-color: rgba(82, 168, 236, 0.8); }
input:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus {
border-color: rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
Alternate approach to solve bootstrap validation issue with decimal
Use step="any" as in:
<input type="number" step="any" />
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.