Calculating an em value -1px in CSS/SASS without assuming the user's default font size -


i setting rwd breakpoints variables in sass, e.g. $bp-medium: 48em; (equivalent 768px when 1em = 16px). able set variable 1px less that, , have variable's value set in ems breakpoint continues respect user's base size preferences.

sass provides calculation tools, certainly, every way i've tried relies on me having make assumption regarding how many pixels user has browser's default font size set to. example:

$bp-medium-1: ($bp-medium/1em)*16px-1px; 

…gives $bp-medium-1 value of 767px (worst of options result in px), or

$bp-medium-1: $bp-medium - (1em/16); 

…which gives $bp-medium-1 value of 47.9375em — better, since @ least result in ems now, i've had use assumed '16' in calculation again.

to recap then: want work out 48em - 1px, end result being in ems , without having assume 16px/em base size.

can done?

no, cannot. way can perform arithmetic operations incompatible units em , px via calc() in css (not sass), , that not allowed in media queries.

you can use largest possible decimal (based on precision settings) smaller specific value.

// default precision in sass 5 decimal places // go bigger , sass round @media (max-width: 34.99999em) {     body {         background: red;     } }  @media (min-width: 35em) {     body {         background: green;     } } 

Comments

Popular posts from this blog

c# - Binding a comma separated list to a List<int> in asp.net web api -

Delphi 7 and decode UTF-8 base64 -

html - Is there any way to exclude a single element from the style? (Bootstrap) -