How use the pixel with em [SASS]

1

Hi,
I tried to understand a variable setup to use pixel but generate em value

$base__font-size: 15 !default;

// convert pixel to em
@function em($px, $base: $base__font-size ) {
  @return ($px / $base) * 1em;
}

here that’s works well, but when I used 15px in the value:

$base__font-size: 15px !default;

I have this errror:

Change detected to: assets/sass/_base.scss
error assets/sass/_text.scss (Line 20: 2.4em/px isn’t a valid CSS value.)

Thanks

2

Don’t add ‘px’ to the value for that variable, or change the function to strip it away. The function is expecting a number.

3

But why 1em works well?

4

I dont know why 1em working. Maybe u want use css function calc instead

5

nope, because in CSS I can’t stock a varaible?
Edit:
same here a responsive element with percentage:

@function calc-percent($target, $container) {
  @return ($target / $container) * 100%;
}

.my-module {
  width: calc-percent(650px, 1000px);
}
6

@return calc($target / $container * 100%);
?

7

I used with value inside, normal for a function, you need to compute something?
the percentage example form here: http://thesassway.com/advanced/pure-sass-functions

8

My mistake… didnt know for that

9

so for my problem, that mean this variable I can’t use it without the function?

$base__font-size: 15 !default;

or I can do it works:

font-size: $base__font-size * 1px;

weirdooooo

10

i tried in pen and it works
pen: [ http://codepen.io/ustvarno/pen/ZOmbJK ]

and here also:
http://www.sassmeister.com/

11

U probably using SASS instead SCSS preprocessor, that might cause error.

12

I’m using sass direcly in the terminal:
sass --watch assets/sass:static/css

Change detected to: assets/sass/_base.scss
error assets/sass/modules/_layout.scss (Line 26: Invalid CSS after "…on: top center ": expected “{”, was “!default;”)

13

same error u get in codepen if u change to SASS

14

I don’t think codePen detect is good.

15

No u are wrong try this:
$base__font-size: 15px !default

instead:
$base__font-size: 15px !default;

16

It doesn’t. Check this out:

http://codepen.io/PortableStick/pen/JKZGAq

The units are specified in the function’s return value. Sass is smart, and it will try to work out your units for you, but what you’re trying is too much. Don’t include ‘px’ in the function inputs.

1 Like
17

---- nice job, thanks