I'm trying to combine Jake Archibald's mobile-friendly IE sass mixins... http://jakearchibald.github.io/sass-ie ...with the responsive mixins illustrated by Dan Cederholm in his book 'Sass for Web Designers'. I'm using CodeKit to compile the files (detailed below).
all.scss compiles successfully, but all-old-ie.scss fails. CodeKit says:
Error: Undefined operation: "500px gte medium-screens".
on line 8 of /Applications/MAMP/htdocs/sass-ie-test/sass/_utils.scss, in `responsive'
from line 4 of /Applications/MAMP/htdocs/sass-ie-test/sass/_layout.scss
from line 2 of /Applications/MAMP/htdocs/sass-ie-test/sass/all.scss
from line 3 of /Applications/MAMP/htdocs/sass-ie-test/sass/all-old-ie.scss
Use --trace for backtrace.
Not sure what's going on here. My files are:
_utils.scss
$medium: 600px;
$large: 950px;
$fix-mqs: false !default;
#mixin responsive($width) {
#if $fix-mqs {
#if $fix-mqs >= $width {
#content;
}
}
#else if $width == medium-screens {
#media only screen and (min-width: $medium) {
#content;
}
}
#else if $width == large-screens {
#media only screen and (min-width: $large) {
#content;
}
}
}
$old-ie: false !default;
#mixin old-ie {
#if $old-ie {
#content;
}
}
_layout.scss
article {
padding: 30px;
#include responsive(medium-screens) {
padding: 50px;
}
#include responsive(large-screens) {
padding: 70px;
}
#include old-ie {
//stuff for ie
}
}
all.scss
#import 'utils';
#import 'layout';
all-old-ie.scss
$old-ie: true;
$fix-mqs: 500px;
#import 'all';
The error is quite clear here. It explicitly states that it cannot possibly determine whether or not the number 500px is greater than or equal (gte) to the string medium-screens.
You're trying to overcomplicate things for no reason: just use variables.
$medium: 600px;
$large: 950px;
#mixin responsive($width) {
#if $fix-mqs {
#if $fix-mqs >= $width {
#content;
}
} #else {
#media only screen and (min-width: $width) {
#content;
}
}
}
article {
padding: 30px;
#include responsive($medium) {
padding: 50px;
}
#include responsive($large) {
padding: 70px;
}
#include old-ie {
//stuff for ie
}
}
Related
I'm getting an error while passing the mixins into my scss file, i used the same mixins to my another project and it worked fine. but when i try to use the same mixins i get an error.
here is the code:-
.carousel-wrapper {
padding: 0 0 20px;
#include screen(custom, min, 669) {
padding: 0;
}
.carousel-stage {
transition-timing-function: cubic-bezier(
0.77,
0,
0.175,
1
) !important;
padding-left: 660px;
padding-right: 660px;
width: 6944px;
transition: all 0.6s ease 0s;
}
}
The errors:-
Here is the image of the Error
Here is the Mixins I used:-
///Media Queries
$breakpoint-small: 575.98px;
$breakpoint-med-small: 767.98px;
$breakpoint-med: 991.98px;
$breakpoint-large: 1199.98px;
#mixin screen($size, $type: max, $pixels: $breakpoint-small) {
#if $size == "small" {
#media screen and ($type + -width: $breakpoint-small) {
#content;
}
} #else if $size == "med-small" {
#media screen and ($type + -width: $breakpoint-med-small) {
#content;
}
} #else if $size == "med" {
#media screen and ($type + -width: $breakpoint-med) {
#content;
}
} #else if $size == "large" {
#media screen and ($type + -width: $breakpoint-large) {
#content;
}
} #else if $size == "custom" {
#media screen and ($type + -width: $pixels + px) {
#content;
}
} #else {
#content;
}
}
You mixin seems fine, so it must be a declaration problem.
Is the mixin code inside the same file than the first code ?
If not, you should copy-paste your code in the same file, or import it with #import.
I have media query used in scss class, I would like to create media query and define all scss class in that media query. I have trouble accessing nested scss class in media query.
Here is my code
.data-one {
display: flex;
flex-wrap: wrap;
&.mobile {
width: 100%;
.data {
max-width: 100%;
}
}
.data {
height: 72px;
margin-right: 10px;
max-width: 224px;
// #media (max-width: layout-breakpoint-tablet-start) { -----------> This is the original code
// display: none;
// }
}
}
This is what I have tried but it is not working as expected
#media (max-width: layout-breakpoint-tablet-start) {
.data-one {
+.data {
display: none;
}
}
}
Sass 3.2 added the #content directive, which allows us to pass a content block into a mixin as following:
#mixin screen($size) {
$desktop: "(min-width: 1024px)";
$tablet: "(min-width: 768px) and (max-width: 1023px)";
$mobile: "(max-width: 767px)";
#if $size == desktop {
#media only screen and #{$desktop} {
#content;
}
}
#else if $size == tablet {
#media only screen and #{$tablet} {
#content;
}
}
#else if $size == mobile {
#media only screen and #{$mobile} {
#content;
}
}
#else {
#media only screen and #{$size} {
#content;
}
}
}
.wrapper {
margin: 0 auto;
width: 100%;
#include screen('tablet') {
width: 90%;
}
#include screen('desktop') {
width: 85%;
}
}
If you have any question about it feel free to ask.
I'm just pulling my hair right know.
I have a mixing that receives a simple object. Depending on the value of one of the properties should enter inside de IF statement or the ELSE one.
However it's always evaluating as TRUE and can't figure why.
Code is compiled using node-sass (libsass v3.5.4 ) and the gist can be seen here:
https://www.sassmeister.com/gist/40eb28fd55173d7534a7162de3c1b960
Both times calculateHeight mixin is invoked evaluates the if to TRUE and creates a CSS with twice color: red, instead of color: red and color: blue
// ----
// libsass (v3.5.4)
// ----
$headerHeight: 150px;
$headerHeightM: 115px;
$headerHeightS: 100px;
#mixin calculateHeight($obj:()){
#if #{map-get($obj, value)} {
color: red;
#media (min-width: 480px) {
#{map-get($obj, property)}: $headerHeightS;
}
#media (min-width: 768px) {
#{map-get($obj, property)}: $headerHeightM;
}
#media (min-width: 1280px) {
#{map-get($obj, property)}: $headerHeight;
}
}
#else {
color: blue;
#media (min-width: 480px) {
#{map-get($obj, property)}: #{map-get($obj, value)} 233px;
}
}
}
.header{
#include calculateHeight((property: 'height', value: false));
#include calculateHeight((property: "background", value: "url('../img/red_header_wave_1.png') no-repeat center top/100% "));
}
Not sure why, but, if I assign the value of the object property to a variable it does the trick and works. Again, not sure why but it's working now:
// ----
// libsass (v3.5.4)
// ----
$headerHeight: 150px;
$headerHeightM: 115px;
$headerHeightS: 100px;
#mixin calculateHeight($obj:()){
// Assign the mapped property to a variable prior to #if
$var: #{map-get($obj, value)};
#if $var == 'false' {
color: red;
#media (min-width: 480px) {
#{map-get($obj, property)}: $headerHeightS;
}
#media (min-width: 768px) {
#{map-get($obj, property)}: $headerHeightM;
}
#media (min-width: 1280px) {
#{map-get($obj, property)}: $headerHeight;
}
}
#else {
color: blue;
#media (min-width: 480px) {
#{map-get($obj, property)}: #{map-get($obj, value)} 233px;
}
}
}
.header{
#include calculateHeight((property: 'height', value: false));
#include calculateHeight((property: "background", value: "url('../img/red_header_wave_1.png') no-repeat center top/100% "));
}
You are interpolating the value from your map into a string, so you are actually checking the string "false", which is truthy (as you already found out). Get rid of the interpolation #{...} and it should work as expected.
- #if #{map-get($obj, value)} {
+ #if map-get($obj, value) {
I'm trying to use in this case a placeholder inside a mixin, however I get the following error:
"message": "You may not #extend an outer selector from within #media.\nYou may only #extend selectors within the same directive.\nFrom \"#extend %shadow-sm\" on line 7 of build/scss/components/cards/_form-register.scss\n",
"formatted": "Error: You may not #extend an outer selector from within #media.\n You may only #extend selectors within the same directive.\n From \"#extend %shadow-sm\" on line 7 of build/scss/components/cards/_form-register.scss\n on line 2 of build/scss/abstracts/placeholders/_shadows.scss\n>> %shadow-sm { box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important; \n ^\n"
}
Where my Mixin is:
// BOOTSTRAP GRID
#mixin media-breakpoint-xs {
#media (min-width: 320px) {
#content;
}
}
#mixin media-breakpoint-sm {
#media (min-width: 576px) {
#content;
}
}
#mixin media-breakpoint-md {
#media (min-width: 768px) {
#content;
}
}
#mixin media-breakpoint-lg {
#media (min-width: 992px) {
#content;
}
}
#mixin media-breakpoint-xl {
#media (min-width: 1200px) {
#content;
}
}
Where my Placeholder is:
%shadow-none { box-shadow: none !important; }
%shadow-sm { box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important; }
MY CODE:
#include media-breakpoint-lg {
#extend %shadow-sm;
width: 25rem;
}
Is it possible to do insert a placeholder and or maybe even a mixin inside another mixin?
If not, what would be the best way to use good practices?
Before I had a color %placeholder, now I changed and created a #mixin for the same generation .. Which looked like this:
$default-color-property-type-list: border-color, background-color, color;
$default-color-name-map: (
'cream-1': #FAFAFA,
'cream-2': #EFEFEF,
'correct': #02C22B,
'dark-blue-1': #3897F0,
'dark-grey-2': #999999,
'incorrect': #EE2D3E,
'transparent': transparent,
'white': white,
);
#mixin getColor($color-name, $color-property-type) {
#if not map-has-key($default-color-name-map, $color-name) {
#error 'The color #{$color-name} does not exist!';
} #else if not index($default-color-property-type-list, $color-property-type) {
#error 'The color type #{color-type} does not exist!';
} #else {
$color-value: map-get($default-color-name-map, $color-name);
#{$color-property-type}: #{$color-value} !important;
}
}
Soon to insert the way I was wanting (inside another #mixin), I just need to give an #include in my #mixin of colors this way:
#include media-breakpoint-NAME {
#include getColor($color-name, $color-property-type);
}
I just tried to save me some time, generating some helper css classes for different breakpoints.
What I tried:
#mixin resp { width: 100%; height: auto;}
#mixin table { display: table}
#mixin trow { display: table-row}
#mixin tcell { display: table-cell; }
#mixin gutter1px { padding: 0 1px; }
$tools: resp, table, trow, tcell, gutter1px;
#mixin make-tools($breakpoint) {
#each $tool in $tools {
$i: index($tools, $tool);
.#{$tool}-$breakpoint { #include #{$tool}(); }
}
}
#media (min-width: $screen-xs-min) {
#include make-tools(xs);
}
But this dosent seem to work:
#include #{$tool}();
Has anyone an idea how to archive that, or is it simply not possible?