This code does not generate error but classes was not created.
Do someone have an idea ?
$properties: margin, padding, height, margin-top, margin-bottom, border,
height;
#each $property in $properties {
#for $size from 1 through 500 {
.#{$property}-#{$size} {
$property: #{$size}px;
}
}
}
You also need to interpolate the css-property: #{$property}: #{$size}px;
Related
_theme-var.scss
//color palette
$colors:(
"primary":#ff0000,
"secondary":#898989,
"dark":#360000,
"light":#ffaeae,
"white":#fff
);
style.scss
#import "./theme-var";
#each $key,$val in $colors{
.text-#{$key}-color{
color: $val;
}
.bg-#{$key}-color{
background-color:$val;
}
#for $i from 1 through 9{
.text-#{$key}-color-light-#{$i}{
color: mix(#ffff, #{$val},$i*10); // getting error for this line
}
}
}
ERROR
It says that argument $color-1 of mix($color-1, $color-2, $weight: 50%) must be a color, I am passing color and also $val contains valid hax color what could be the reason for error?
ERROR SCREENSHOT
You need to remove the interpolation on #{$val}. The variable is already a color and the interpolation seems to convert it to something else, that's why you get this error.
#for $i from 1 through 9 {
.text-#{$key}-color-light-#{$i}{
color: mix(#ffff, $val, $i*10);
}
}
I have some sass function to create same margin, and it is inside loop like this
$short-margins: ( top: 'mt', left: 'ml', bottom: 'mb', right: 'mr' );
#for $i from 0 through 200 {
#each $position, $prefix in $short-margins{
.#{$prefix}-#{$i} {
margin-#{$position}: #{$i}px;
}
}
}
This will create margin classes like this mr-0 and so on until mr-200, the problem is in line
margin-#{$position}: #{$i}px;
There I create px in loop, but i need that to be in rem? I ahve some function like this
$base-font-size: 14px;
// Remove units from the given value.
#function strip-unit($number) {
#if type-of($number) == 'number' and not unitless($number) {
#return $number / ($number * 0 + 1);
}
#return $number;
}
// convert only single px value to rem
#function single-px-to-rem($value) {
$unitless-root-font-size: strip-unit($base-font-size);
#return $value / $unitless-root-font-size * 1rem;
}
But when i want to use function inside loop like this
#for $i from 0 through 200 {
#each $position, $prefix in $short-margins{
.#{$prefix}-#{$i} {
margin-#{$position}: single-px-to-rem(#{$i});
}
}
}
It does not compile throw me error, does any body knows how ti use sass #function inside #for?
You are doing it right, but you need to send the $i value without interpolation:
#for $i from 0 through 200 {
#each $position, $prefix in $short-margins{
.#{$prefix}-#{$i} {
margin-#{$position}: single-px-to-rem($i);
}
}
}
I want to output some utility classes and I can't seem to get the lighter and darker tones of my base color to output both darker and lighter tones. I am new to Scss but this is what I have:
$aqua: #00ffff;
$color-map: (
background-color-aqua-light: ($aqua, background-color, lighten,),
color-aqua-light: ($aqua, color, lighten),
background-color-aqua-dark: ($aqua, background-color, darken),
color-aqua-dark: ($aqua, color, darken)
);
#each $color-class, $colour-variables in $color-map {
$class-name: nth($color-class, 1);
$color-name: nth($colour-variables, 1);
$color-type: nth($colour-variables, 2);
$color-brightness: nth($colour-variables, 3);
#for $i from 20 through 100{
#if $i % 10 == 0{
$percentage: $i*0.5%;
.#{$class-name}-#{$i}{
#{$color-type}: #{$color-brightness}($color-name, $percentage);
}
}
}
}
It looks like you're generating the method name in the CSS:
So this SCSS
#{$color-type}: #{$color-brightness}($color-name, $percentage);
Becomes this CSS
.background-color-aqua-light-40 {
background-color: lighten(#00ffff, 20%);
}
To my knowledge, you can't interpolate a SASS method name and get SASS to interpret it. But. I think you can (maybe less elegantly) get around that limitation with the #if and #elseif rules in your #for loop.
#for $i from 20 through 100 {
#if $i % 10 == 0 {
$percentage: $i*0.5%;
.#{$class-name}-#{$i} {
#if ( $color-brightness == lighten ) {
#{$color-type}: lighten($color-name, $percentage);
} #elseif ( $color-brightness == darken ) {
#{$color-type}: darken($color-name, $percentage);
}
}
}
}
EDIT: FWIW, I tested the #if/#elseif solution on sassmeister.com and it seems to crank out the CSS you are after.
I use Drupal FortyTwo theme. The theme provides a mixin named PXTOEM:
// PXTOEM
// Calculate percentage with font-size as context
#function pxtoem($pixels...) {
$result: '';
#each $item in $pixels {
$result: $result + ($item + 0) / $default-font-size + em + ' ';
}
#return #{$result};
}
In my scss file I use it like:
.header-menus {
padding: pxtoem(0, $grid-gutter-width);
}
But after compiling it doesn't get the proper output?
padding: 0/pxem 0.75/pxem; (see screenshot)[![Screenshot][2]][2]
Instead of + 0 you should add pixels: + 0px. And instead of + em use + 0em.
Sassmeister demo.
If you can not modify source code of the theme, create your own function.
$default-font-size: 16px;
// PXTOEM
// Calculate percentage with font-size as context
#function pxtoem($pixels...) {
$result: '';
#each $item in $pixels {
$result: $result + ((($item + 0px) / $default-font-size) + 0em) + ' ';
}
#return #{$result};
}
.header-menus {
padding: pxtoem(0, 30, 30px);
}
Css output:
.header-menus {
padding: 0em 1.875em 1.875em ;
}
I am using the following mixin for REM conversions
https://gist.github.com/bitmanic/1134548
Since the latest SASS update the mixin is now showing an error:
// If the value is zero or a string or a color, return unchanged input
#if $value == 0 or type-of($value) == "string" or type-of($value) == "color" {
$rem-values: append($rem-values, $value); }
#else {
$rem-values: append($rem-values, $value / $baseline-rem); } }
The result of 0px == 0 will be false in future releases of Sass. Unitless numbers will no longer be equal to the same numbers with units.
I am a bit new to SASS, can someone help trouble shoot this?
Are you sure it's an actual error rather than a warning?
The warning is likely in reference to this issue. The jist of the problem being fixed here is where 1px == 1, which is inherently untrue.
Realistically, you should always use 0 for lengths rather than 0px, despite the fact that they are equal, simply because you would be saving a few bytes. You should be able to strip off the unit and then perform the comparison:
$baseline_px: 10px;
#mixin rem($property, $px_values) {
// Convert the baseline into rems
$baseline_rem: ($baseline_px / 1rem);
// Print the first line in pixel values
#{$property}: $px_values;
// Create an empty list that we can dump values into
$rem_values: ();
#each $value in $px_values {
// If the value is zero, return 0
#if $value / ($value * 0 + 1) {
$rem_values: append($rem_values, $value);
zero: $value;
}
// If the value is not zero, convert it from px to rem
#else {
$rem_values: append($rem_values, ($value / $baseline_rem) );
not-zero: $value
}
}
// Return the property and its list of converted values
#{$property}: $rem_values;
}
.foo {
#include rem(font-size, 10px);
#include rem(border-width, 0px);
#include rem(border-width, 0);
}
Alternately, you could check if it is within a list of zero values:
#if index((0, 0px), $value) {
// do 0 related stuff
}