Comments (8)
+1 for the future.
Usually use em
for media queries but am willing to switch to px
for this project as this lib is awesome!
from include-media.
So right now I'd say that we have partial support for EMs. For example, you can do this:
$breakpoints: (phone: 20em, tablet: 48em, desktop: 64em);
@include media(">=phone") {
}
/* Generates: */
@media (min-width: 20em) {
}
The one thing that doesn't work properly right now is when you use greater-than or less-than operators. By default, it adds or subtracts 1 pixel when you use those operators.
Example:
- px:
>phone
means>320px
so it translates to(min-width: 321px)
. - em:
>phone
means>20em
so it translates to(min-width: 21em)
(not what we want).
So maybe we need to add a different factor for each unit? So if you're dealing with pixels it adds 1px, but if you have EMs it adds 0.01em or something?
Let me know your thoughts guys, and thanks for the feedback!
from include-media.
I think that the good thing about this mixin is its flexibility and how it allows developers to use in many different ways. For that reason, I don't think it is a good idea to convert the breakpoints from pixels to ems - if you define $breakpoints
in pixels, then it's because you want to use pixels and I don't think we should force EMs.
What I do think is that we need to support it properly, and the implementation is actually quite simple. Something like this:
@function _get-interval-for-unit($value) {
$intervals: ("px": 1, "em": 0.0625);
@return map-get($intervals, unit($value));
}
This will establish the intervals that should be used for each unit, so:
$breakpoints: (phone: 30em, tablet: 48em, desktop: 64em);
@include media(">phone") {
}
/* Generates: */
@media (min-width: 30.0625em) {
}
How does that sound?
from include-media.
Sass-MQ uses -.01em
.
Or I suppose you could use calc()
but I don't know if it works fine within Media Queries.
@media (min-width: calc(28em - 1px)) {
/* ... */
}
from include-media.
Yes, I saw that Sass-MQ was doing this already and I quite liked it.
My thoughts behind creating a separate function (and a map) instead of hard-coding a value for ems was that it becomes easier and cleaner if we want to support other units, even though pixels and ems will most likely cover the majority of use cases.
calc()
doesn't seem to work within a media query expression.
from include-media.
My thoughts behind creating a separate function (and a map) instead of hard-coding a value for ems was that it becomes easier and cleaner if we want to support other units, even though pixels and ems will most likely cover the majority of use cases.
Makes sense. You might want to support rem
as well.
from include-media.
I've created a new branch (add-intervals) with this stuff in it.
I'll keep doing some testing (feel free to pull and test on your end as well if you fancy it) and if nothing blows up I'll merge this in.
Thanks for the feedback guys!
from include-media.
Added in #19.
from include-media.
Related Issues (20)
- [Documentation] Website down? https://include-media.com/ HOT 5
- Compiling error in IDE's with media(slice($conditions, 2)...) - possible fix HOT 4
- Migrate from @import to @use HOT 3
- Undefined mixin media HOT 1
- cannot import via `@use` HOT 13
- I made a library using this project, can I introduce it as a plugin? HOT 3
- include-media page on npm has a dodgy homepage field and link HOT 1
- How to use AND ? HOT 2
- Remove broken link HOT 1
- Define a default media-expression HOT 1
- Writing style HOT 2
- styled-components HOT 1
- DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. HOT 7
- Help needed- setup HOT 7
- Release 2.0 on npm HOT 19
- Error on compiling HOT 8
- Container Queries? HOT 10
- Compability with current sass version? HOT 3
- `print` support HOT 1
- Using media with variables HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from include-media.