so I've been trying to figure this out but maybe I'm just beating my head against the wall. I'm trying to make a sass mixin that uses null arguments so that the argument will not be included unless a value is specifically assigned to the output like so:
// main mixin
#mixin fontSettings(
$font-size: null,
$line-height: null,
)
{
// if null, get the default value
#if not $font-size {
$font-size: -get-font-defaults(font-size);
}
// if null get, default value
#if not $line-height {
$line-height: -get-font-defaults(line-height);
}
// calculate font stuff
$font-size: $font-size * 1rem;
$line-height: $line-height * 1rem;
//output
font-size: $font-size;
line-height: $line-height;
}
// map merge mixin
#mixin -set-font-defaults() {
$-font-defaults: map-merge($-font-defaults, keywords($defaults)) !global;
}
// function to get map values
#function -get-font-defaults($key){
#return map-get($-font-defaults, $key);
}
// default settings config map
$-font-defaults: (
'font-size': 1.2,
'line-height': 2,
);
and usage would be
p {
//output sets fontsize to 12px and line height to 20px
#include fontSettings;
}
my question is - is there any way to shorten this without having to do an #if validation for each argument? like using a #each loop to loop through the arguments? I keep getting invalid null operations unless I do a validation for each argument separately. if there's no way to shorten this with a loop, then I'll accept that since I'm a noob but if there is a way to shorten this I would appreciate some advise on how to do so. I plan on adding more arguments to the mixing, this is just a test with the two. thanks in advance for any help.
There is an easier way, you need to leverage the optional parameters of the mixin in your favor. By using optional parameters, not defining them allows the default values set in the declaration to kick in like the example below.
#mixin fontSettings($font-size: 1.2, $line-height: 2) {
font-size: $font-size * 1rem;
line-height: $line-height * 1rem;
}
I have been using sass for a while and for ages I have been using the following px to em function for my media queries:
$browser-context: 16; // Default
#function em($pixels, $context: $browser-context) {
#return #{$pixels/$context}em
}
However, I am now wanting to set up a different base font size depending on width of screen. SO for instance for mobile sizes
$browser-context: 14; // Default
and for bigger screens:
$browser-context: 16; // Default
But Im not sure how to wrap this all up in sass. Any ideas?
Thanks,
I'm pretty sure that this won't be achievable in SASS without thinking outside the box.
SASS, as you know compiles before getting sent to the browser, therefore, at that point we have no idea what browser, let alone what screen size. Therefore, media queries are out.
What you could do (I'm theorising here) is:
Set up you em function to produce a series of font sizes specific to different browser widths e.g.
#function em780($pixels, $context: $browser-context) {
#return #{$pixels/$context}em
}
and
#function em420($pixels, $context: $browser-context) {
#return #{$pixels/$context}em
}
etc.
This should produce the correct em size for each specific screen width. Then, assign those em sizes within a normal media query
#media all and (max-width: 420px){
h1{ font-size: $em420;
}
#media all and (max-width: 780px){
h1{ font-size: $em780;
}
Does that make any sense ?
Obviously, don't copy the 'code' I've written here but hopefully the general idea is valid.
This is my mixin:
#function em($px, $base: 16px) {
#return ($px / $base) * 1em;
}
use it like font-size: em(24px);. I think it is more clear then just typing values
I am trying to write a mixin for animations in css3. An animation in css3 requires an #keyframe. But a mixin declaration in SASS (and other declarations) start with # too. Like #mixin, #for, etc... So what I was trying to do writing a mixin for an animation (I was trying to have all automated inside the mixin) was to put the #keyfram escaped for SASS when passed to CSS not to interpret the #keyframe's #. Is it possible to do this?
Example :
#mixin animation(
//variables :
$mykeyframe:mykeyframe,
$prop1:background,
$value1-i:white,
$value1-e:red,
$prop2:color,
$value2-i:black,
$value2-e:white,
$prop3:font-weight,
$value3-i:400,
$value3-e:bold,
$time:5s,
$iteration-count:1,
$timing-function:linear,
$delay:0s,
$direction:normal,
$play-state:running
)
{//HERE'S THE PROBLEM :
#keyframes $mykeyframe{
0%{$prop1:$value1-i; $prop2:$value2-i; $prop3:$value3-i}
100%{$prop1:$value1-e; $prop2:$value2-e; $prop3:$value3-e}
}
-webkit-animation: $mykeyframe $time $iteration-count; /* Chrome, Safari 5+ */
-moz-animation: $mykeyframe $time $iteration-count; /* Firefox 5-15 */
-o-animation: $mykeyframe $time $iteration-count; /* Opera 12.00 */
animation: $mykeyframe $time $iteration-count; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
/* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
animation-timing-function: $timing-function;
animation-delay: $delay;
animation-direction: $direction;
animation-play-state: $play-state;
/* Safari and Chrome: */
-webkit-animation-timing-function: $timing-function;
-webkit-animation-delay: $delay;
-webkit-animation-direction: $direction;
-webkit-animation-play-state: $play-state;
}
Even though the mixin (#mixin) and conditional (#for, #if etc.) directives in SASS start with the symbol #, you can still use it for other keywords that are not part of the SASS library like if, mixin etc.
So, you can still do:
#mixin animation($mykeyframe:mykeyframe) {
#keyframes $mykeyframe {
}
}
body {
#include animation(someframe);
}
and this will generate:
body {
#keyframes someframe {}
}
I have recently converted a Flex3 AIR project to Flex4, so it now uses Flex4.1 sdk and <s:WindowedApplication>. It is a large project and having painstakingly updated all the vital bits of code to work with Flex4 it now happliy compiles.
Most of the components in the project decend over quite a few generations from an mx based component, so I have not yet updated this to spark due to the workload. The problem I am having is that I cannot get the embedded font to work for spark components that I now add to my mx components.
For example, I have edited one of my (mx based) components and added some items to it. My embedded font has to have embedAsCFF=false so that it works for my mx components. So to get this to also embed for spark, I should be able to simply embed it again with embedAsCFF=true as shown below:
#font-face
{
src: url("assets/fonts/MyriadWebPro.ttf");
font-family: mainWithCFF;
font-style: normal;
font-weight: normal;
font-anti-alias-type: "advanced";
embedAsCFF: true;
}
s|Label{
font-family: mainWithCFF;
}
I have tried a basic example of this that Adobe provides and this example works just fine, but in my complex project, it does not work. I do not get any errors, but instead of the spark component using MyriadWebPro it defaults to Times.
I wonder if this is because my component is mx based rather than spark based. Maybe this only works if you are using an mx component inside a spark component? If so does anyone know of a solution to the problem where you have an mx component and want to have a spark Label inside that?
If your component is MX (Halo), you want embedAsCFF to be false.
For Spark components, you embedAsCFF: true.
Also, I'm not sure your advanced Anti Aliasing is correct.
Spark Example:
#font-face
{
font-family: "Myriad Web Pro";
src: url("./assets/fonts/MyriadWebPro.ttf");
font-weight: normal;
embedAsCFF: true; /* Spark */
advancedAntiAliasing: true;
unicodeRange:
U+0041-U+005A, /* Upper-Case [A..Z] */
U+0061-U+007A, /* Lower-Case a-z */
U+0030-U+003F, /* Numbers [0..9] */
U+0020-U+002F, /* Space + Punctuation [ !"#$%&'()*+,-./ ] */
U+003A-U+0040; /* Special Chars [ :;?# ] */
}
MX Halo Example:
#font-face
{
font-family: "Myriad Web Pro";
src: url("./assets/fonts/MyriadWebPro.ttf");
font-weight: normal;
embedAsCFF: false; /* Halo */
advancedAntiAliasing: true;
unicodeRange:
U+0041-U+005A, /* Upper-Case [A..Z] */
U+0061-U+007A, /* Lower-Case a-z */
U+0030-U+003F, /* Numbers [0..9] */
U+0020-U+002F, /* Space + Punctuation [ !"#$%&'()*+,-./ ] */
U+003A-U+0040; /* Special Chars [ :;?# ] */
}
I'm trying to use the following CSS styles. They are working on most browsers, including ie7. However in ie8, the transparent background does not show and instead I get the background color which I would like to leave set as a fallback color.
section.rgba{
background-color: #B4B490;
background-color: rgba(200, 0, 104, 0.4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')";
zoom: 1
}
I would like to be able to get this to work without having to resort to an IE stylesheet where i set the background color to none. Is this possible?
Anybody know how to fix it?
After glancing over at CSS3please I realized I was doing overkill with my IE7/IE8 gradient styles. Simply using the following style does the job:
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
Apparently, there is no need for the -ms-filter and zoom rules.
Just adding this as an update - I know the OP got their answer but I found this question while trying to figure out why it (the "fallback") was even "working" in IE7, it confused me no-end so here's what I found out.. it's not working properly in IE6/7...
IE8 is right here, what you're seeing (with the code in the OP) in IE8 is the background color showing through the gradient filter overlay, and as it's the same color that makes the gradient look like it's not working and that all you're getting is the solid color. That's what should happen in all IE's!
IE6 & 7 are incorrectly ignoring the fallback (so it's not really a fallback) and have their transparent background-color because of a bug, purely because the OP has the colors, both hex and RGBa specified using background-color
There are many ways to workaround this.. see: IE Background RGB Bug - and the last comment especially for ways - this workaround would only really be applicable if not using filters/gradients i.e. really using just RGBa (semi-transparent) backgrounds.
If using MS "filter" Gradients to simulate RGBa, The MS filters are stable back to IE5.5 so the reality is that they don't need a fallback and background: none; fed to IE only browsers, to override the fallback required for other browsers (weird huh!) is likely the best solution in the original case - A fallback colour is only necessary for older browser versions of Opera(especially) & Firefox, Safari et al in the case of their gradients/rgba not yet being supported.
It appears, you have to put either width or height to DIV CSS for gradient to work in IE 7+
( at least I had to )
.widget-header {
text-align: center;
font-size: 18px;
font-weight: normal;
font-family: Verdana;
padding: 8px;
color: #D20074;
border-bottom: 1px solid #6F6F6F;
height: 100%;
/* Mozilla: */
background: -moz-linear-gradient(top, #FFFFFF, #E2E2E2);
/* Chrome, Safari:*/
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E2E2E2));
/* MSIE */
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E2E2E2');
/* Opera 11.10 + */
background-image: -o-linear-gradient(top, #FFFFFF, #E2E2E2);
}
Hope this helps
I found I had to change the <a> element from display:inline to display:block before the filter style would work. Also, the color can be specified with a 4-byte sequence where the first byte is opacity, then rgb, ie. #oorrggbb. Eg.
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffA0C848', endColorstr='#ff70A828');
display:block;
You're using Modernizer wrong. Modernizer places classes on the HTML element; not each individual element. Here's what I used in IE8 to color the SECTION tags.
.rgba section {
background-color: rgba(200, 0, 104, 0.4);
}
.no-rgba section {
background-color: #B4B490;
}
.no-cssgradients section {
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')";
zoom: 1;
}
The zoom rule is to make sure hasLayout was triggered, your use-case not having a need for it is probably because hasLayout is already being triggered.
regarding the -ms- prefix, according to Microsoft's documentation ( http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx scroll down to "Downlevel Support and Internet Explorer 4.0 Filters", no anchors I can link to), to target IE8, one should be using the -ms- prefix, to target anything prior to that, one should be using the unprefixed one
#element {
background: -moz-linear-gradient(black, white); /* FF 3.6+ */
background: -ms-linear-gradient(black, white); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(black, white); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
background: linear-gradient(black, white); /* the standard */
}
The best solution that works for IE7 and IE8 is to use a gradient image and set repeat-x: true while putting it in the background. This works for all browser types that I have found.
you can use the -ms-filter but i guess its the same issue as opacity if you do filter before -ms-filter it fails se more at:
http://www.quirksmode.org/css/opacity.html for that theory
so you need to do like this:
background-color: #D5D6D7;
background-image: linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -o-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -moz-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -ms-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(213,214,215)),
color-stop(1, rgb(251,252,252))
);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#D5D6D7',EndColorStr='#FBFCFC')";
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D5D6D7', endColorstr='#FBFCFC');
this works for me
besides that you cant have a 8 char hexcode (hex is latin for six) and on top of this you have the same color to gradient between you have to have different colors