I start using sass, at the moment I start to discover mixin and writing my own one.
I have a mixin:
#mixin column-set ($number, $width, $gap, $rule-style, $rule-width, $rule-color, $col-span) {
-webkit-column-count: $number; /* Chrome, Safari, Opera */
-moz-column-count: $number; /* Firefox */
column-count: $number;
-webkit-column-width: $width; /* Chrome, Safari, Opera */
-moz-column-width: $width; /* Firefox */
column-width: $width;
-webkit-column-gap: $gap; /* Chrome, Safari, Opera */
-moz-column-gap: $gap; /* Firefox */
column-gap: $gap;
-webkit-column-rule-style: $rule-style; /* Chrome, Safari, Opera */
-moz-column-rule-style: $rule-style; /* Firefox */
column-rule-style: $rule-style;
-webkit-column-rule-width: $rule-width; /* Chrome, Safari, Opera */
-moz-column-rule-width: $rule-width; /* Firefox */
column-rule-width: $rule-width;
-webkit-column-rule-color: $rule-color; /* Chrome, Safari, Opera */
-moz-column-rule-color: $rule-color; /* Firefox */
column-rule-color: $rule-color;
-webkit-column-span: $col-span; /* Chrome, Safari, Opera */
column-span: $col-span;
}
I would like to use it but not always with all arguments, for this reason I put them in order of how I think I will need them. But it looks like when I call this mixin I need to enter all arguments. Is there any way to avoid this?
for example:
call1
#include column-set(3, 40px);
call2
#include column-set (2, 40px, 10px, solid, 1px, blue);
I try to find there answer but with no success. Can anyone help?
You can set a default value, if don't set a value in the #include the default value is used:
#mixin column-set ($number:3, $width:200px, $gap:20px){
...
}
You can set to null also.
#mixin column-set ($number:3, $width:null, $gap:null){
...
}
In the include you can call the parameters you want to use:
.class{
#include column-set($gap:10px)
}
Related
I am having trouble with my media queries in Sass - I am a beginner. If you have time can you take a look at my project and let me know if you can see why my media query is not working? I have one in the _body partial.
https://w.trhou.se/grhzs023qb
columns {
#media #{$break-narrow} {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
}
Thank you.
With 0.12.x version of Compass, I was defining support for oldies that way:
#import "compass/support"
$legacy-support-for-ie6: false;
$legacy-support-for-ie7: true;
$legacy-support-for-ie8: true;
$legacy-support-for-mozilla: false;
#if ($legacy-support-for-ie7) {
// specific declaration if ie7 is supported
}
I'm wonder how I should define browser support following Compass 1.x system.
Maybe something like that:
// Add support for a specific browser
$browser-minimum-versions: (
'ie': "7",
'ie': "8"
);
// Reject browsers
$supported-browsers: reject(browser-versions("ie"), "6", "7", "8");
But it returns that error (running on Compass 1.0.1):
(Line 206 of /Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/_support.scss: 5.5 is not known browser.)
Excluding browsers is done by modifying the $graceful-usage-threshold variable. If Browser X only has 4.99% of the market share, you want to set it to 5.
$debug-browser-support: true;
$browser-minimum-versions: (
"ie": "9"
);
$graceful-usage-threshold: 4.46163;
#import "compass";
.foo {
#include opacity(.5);
#include border-radius(10px);
}
Output:
.foo {
/* Content for ie 8 omitted.
Minimum support is 9. */
opacity: 0.5;
/* Capability border-radius is not prefixed with -moz because 0.25036% of users are affected which is less than the threshold of 4.46163. */
/* Capability border-radius is not prefixed with -ms because 0% of users are affected which is less than the threshold of 4.46163. */
/* Capability border-radius is not prefixed with -o because 0% of users are affected which is less than the threshold of 4.46163. */
/* Capability border-radius is not prefixed with -webkit because 0.1583% of users are affected which is less than the threshold of 4.46163. */
border-radius: 10px;
}
Note that this causes other minority browsers to be excluded that you may want to support. That's when the $browser-minimum-versions comes into play.
$browser-minimum-versions: (
"ie": "9",
"safari": "4"
);
Output:
.foo {
/* Content for ie 8 omitted.
Minimum support is 9. */
opacity: 0.5;
/* Capability border-radius is not prefixed with -moz because 0.25036% of users are affected which is less than the threshold of 4.46163. */
/* Capability border-radius is not prefixed with -ms because 0% of users are affected which is less than the threshold of 4.46163. */
/* Capability border-radius is not prefixed with -o because 0% of users are affected which is less than the threshold of 4.46163. */
/* Capability border-radius is prefixed with -webkit because safari "4" is required. */
/* Creating new -webkit context. */
-webkit-border-radius: 10px;
border-radius: 10px;
}
There are changes in the works to make it easier to exclude old browsers. You can follow them here: https://github.com/Compass/compass/issues/1762
If you want to make rules for a specific browser, then the $critical-usage-threshold variable comes into play:
$debug-browser-support: true;
$browser-minimum-versions: (
"ie": "9"
);
$critical-usage-threshold: 4.46163;
$graceful-usage-threshold: 4.46163;
#import "compass";
.foo {
#include for-legacy-browser('ie', '8') {
color: green;
// this is based on $critical-usage-threshold by default
// if $critical-usage-threshold is lower than the version's usage
// then this content will be generated
}
#if support-legacy-browser('ie', '8') {
color: red;
}
}
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 {}
}
Below is my main scss file for my current project.
I use the variables also in css_ve.scss which is imported afterwards.
The generated css files work as expected but Scout throws errors in the log panel because it can't find the variables declarations in css_ve.scss.
This is a minor issue but I would like to know how to prevent these errors from occuring.
One solution would be to create a scss file only for variables and import it from all the other files but I would like to avoid to have too many scss files scattered in my project.
Thanks in advance!
/* VARIABLES ------------------------------ */
/* fonts */
$font-family-1: 'Arial', 'Meiryo', 'MS Gothic', 'MS UI Gothic', 'MS PGothic', 'Arial Unicode';
$font-family-2: 'MS UI Gothic', 'MS PGothic', 'Arial Unicode';
$font-size: 14px;
/* colors */
$color-1: #000000; /* black */
$color-2: #ffffff; /* white */
$color-3: #CCCCCC; /* grey */
$color-4: #00A3AF; /* green */
$color-5: #FF6600; /* orange */
/* IMPORTS ------------------------------ */
/* validationEngine */
#import "validation_engine/css_ve.scss";
/* STYLES ------------------------------ */
....
#import "validation_engine/css_ve"; perhaps?