lolmaus/breakpoint-slicer

Slice media queries with ease

breakpoint-slicer's Issues

[Question] Is it posible with breakpiont-slicer?

How can I set this rule with breakpoint-slicer

footer {
    @media only screen and (min-width: 480px) and (max-width: 320px) and (orientation: landscape) {
        // some css goes here...
    }
}

Is it posible with breakpiont-slicer?

Slices and media variables cannot be overridden when importing module

Currently, both slices and media variables are not configurable when loading the module. The following will cause an error during compilation:

@use 'breakpoint-slicer' as bs with ($slices: (small: 0, medium: 400, large: 800));

SassError: This variable was not declared with !default in the @used module.
13 │ @use 'breakpoint-slicer' as bs with ($slices: (small: 0, medium: 400, large: 800));
   │                                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Declaring configurable variables with !default allows them to be overridden when loading the module, as described here:
https://sass-lang.com/documentation/at-rules/use#configuration

Slices selecting non-existent breakpoints

Hi,

Im having some issues with slicer.

My grid has the following breakpoints

$slicer-breakpoints: 0 768px 980px 1200px;

I then call the third slice:

@include from(3) {
 // rules
 }

but it compiles to:

@media (min-width: 600px) {
@media -sass-debug-info{filename{font-    family:file\:\/\/\/Users\/luismartins\/Sites\/idomlive\.com\/css- src\/components\/_navigation\.scss}line{font-family:\0000333}}
header .sitenav {
     display: block;
 }

Am I missing something here?

support $slices to explicitly include unit

Hello,

I am in favor of not assuming px as the desired unit for media-queries and to let the user explicitly provide the unit with custom $slices.

Example:

$slices: (
  small: 0px,
  medium: 400px,
  large: 800px,
);

instead of:

$slices: (
  small: 0,
  medium: 400,
  large: 800,
);

would you be open for this?
If so, I'm happy to provide a PR.

Undefined variable slicer-breakpoint-names

It looks like the $slicer-breakpoint-names causes an error if you don’t use it. I get this error trying to precompile / load my stylesheets

Sass::SyntaxError: Undefined variable: "$slicer-breakpoint-names".
 (in /tmp/build_1196b2ef-9b24-4173-b8a0-d2faac0c5ba7/app/assets/stylesheets/main.css.sass:94)
 /tmp/build_1196b2ef-9b24-4173-b8a0-d2faac0c5ba7/vendor/bundle/ruby/2.1.0/gems/breakpoint-slicer-1.3/stylesheets/breakpoint-slicer/_helper-functions.sass:94:in `between'

/cc @jvgreenaway

Px slices should not overlap

[Question] Are there any plans for migration to dart-sass?

Dear Maintainer(s),

Are there are any plans for migration to the state of the art sass?

FYI

Warm regards,
LA

Examples of Integration with Laravel Mix (Webpack)

I know this isn't the best place for general support but consider it a feature request? 🧐😬. I've been beating my head against the wall for a few too many hours now trying to get my breakpoint-slicer setup used previously in gulp to play nicely with Laravel Mix. Anyone have any success with this and if yes are you willing to share your mix file? 😢

Breakpoint Slicer dosn't work with non Legacy Syntax

Breakpoint Slicer crashes when using the modern syntax for Breakpoint.

Syntax error: Function find-object finished without @return

I keep getting this error when trying to use bp-slicer:

Syntax error: Function find-object finished without @return
        on line 14 of /Library/Ruby/Gems/2.0.0/gems/singularitygs-1.2.1/stylesheets/singularitygs/grids/_find.scss, in `grid-span'
        from line 14 of sass/partials/_module.scss, in `@content'
        from line 75 of /Library/Ruby/Gems/2.0.0/gems/breakpoint-slicer-1.3.4/stylesheets/breakpoint-slicer/_mixins.sass, in `@content'
        from line 39 of /Library/Ruby/Gems/2.0.0/gems/breakpoint-slicer-1.3.4/stylesheets/breakpoint-slicer/_mixins.sass, in `@content'
        from line 62 of /Library/Ruby/Gems/2.0.0/gems/breakpoint-2.4.2/stylesheets/_breakpoint.scss, in `breakpoint'
        from line 38 of /Library/Ruby/Gems/2.0.0/gems/breakpoint-slicer-1.3.4/stylesheets/breakpoint-slicer/_mixins.sass, in `between'
        from line 74 of /Library/Ruby/Gems/2.0.0/gems/breakpoint-slicer-1.3.4/stylesheets/breakpoint-slicer/_mixins.sass, in `to'
        from line 13 of sass/partials/_module.scss, in `@content'
        from line 42 of sass/partials/_mixins.scss, in `modern'
        from line 12 of sass/partials/_module.scss
        from line 66 of sass/_global.scss
        from line 3 of sass/app.scss    

Not really sure what the deal is. My "modern" mixin is just this:

    $modern: false !default;
    @mixin modern {
        // Only use this content if we're dealing with a modern browser
        @if $modern {
            @content;
        }
    }

I wasn't sure if this issue needed to be under singularitygs, or slicer, but whenever I remove slice includes from my scss, it compiles so...

Any chance on bower package?

Hi, it would be great if this irreplacable plugin could be on bower for those, who don't use compass anymore. Is it possible?

FR: Better Standard Default Breakpoint Designations...

This would correspond better to, for example, tailwind...and most other breakpoint concepts I've seen in the past.

xxs · xs · sm · md · lg · xl

Add to Breakpoint Extensions

Hey! This looks very cool! When you've got code uploaded, be sure to issue a pull request to https://github.com/Team-Sass/breakpoint/blob/2.x.x/README.markdown to add it to the "Awesome Things Build with Breakpoint" section!

How to install breakpoint-slicer when i use node-sass?

npm install breakpoint-slicer -g don't work

Support for em-based media queries

Currently slices can only be defined in pixels, is there a plan to add support for em-based media queries?

Eyeglass support

Any chance of providing support for Eyeglass? It's a JS equivalent to Compass from what I understand. The support would make it possible to use Breakpoint Slicer via LibSass on Node.js I think?

Details on how to support Eyeglass is here: https://github.com/sass-eyeglass/eyeglass/blob/master/docs/eyeglass_modules/index.md#bringing-eyeglass-to-existing-projects

Wrong link

I am sorry to pollute your hub with issues outside the scope of your project.

The link to singularity now goes to bundler. I should just submit a pull for the markdown, I trust you understand this is faster for me and such a small change.

What I really wish I kew, is whether it is possible to merge slicer with breakup. I want to use slicer and I need to generate separate sheets per breakpoint. Is that a huge endeavour or could I hack it out in half a day...

Gulp error when including breakpoint with npm

Here are the relevant parts of the gulpfile:

const paths = {
   css: {
        files: './assets/sass/**/*',
        entry: './assets/sass/site.scss',
        plain: './assets/sass/css/**/*',
    }

return gulp
        .src(paths.css.entry)
        .pipe(sass({
        	includePaths: ['./node_modules/breakpoint-sass/stylesheets']
        }).on('error', sass.logError))

And in the site.scss I'm including it like this:

@import 'breakpoint-sass';
@import 'breakpoint-slicer';

When I run gulp I'm getting an error:

Message:
    assets\sass\site.scss
Error: File to import not found or unreadable: breakpoint-sass.

assets and node_modules are both in the root directory. Any help really appreciated!

RE "Instead of installing the gem manually, consider using Bundler."

New to ruby and Bundler. Created gemfile and got breakpoint, but do not know how/what to do for slicer. Please forgive me and delete if this is the wrong place to ask. But I hope you'll consider adding details to that instruction. Thank you.

# A sample Gemfile
source "https://rubygems.org"

# gem "rails"
gem "breakpoint", "~>2.4.0"

## dsm 6 jan 15 failed to guess how to do this
## https://github.com/lolmaus/breakpoint-slicer
## gem "slicer", "1.36"

Current link that says "consider Bundler" actually goes to
https://github.com/at-import/Singularity o
I think you want it to go to
http://bundler.io/v1.7/git.html

At that page I got this idea:

gem 'slicer', "1.36", :git => 'https://github.com/lolmaus/breakpoint-slicer'

But am still at a loss to get started

$ Bundler install 
Updating https://github.com/lolmaus/breakpoint-slicer
There was a LoadError while loading breakpoint-slicer.gemspec: 
cannot load such file -- compass from
  /Users/me/.rbenv/versions/2.1.5/lib/ruby/gems/2.1.0/bundler/gems/breakpoint-slicer-f057dcb5ae52/breakpoint-slicer.gemspec:2:in `<main>'

Does it try to require a relative path? That's been removed in Ruby 1.9.

It wants compass? Yet I have compass and was generating sass stylesheets.

WARNING: Wrong Slice number provided: 10. Should be between min and 5.

Hi, @lolmaus.
I set these values for slicer:

// -------------------------- BREAKPOINT SLICER --------------------------------
$slicer-brakepoints: 0 320px 480px 550px 600px 750px 768px 800px 992px 1024px 1200px 1300px;
// Slice numbers:    |  1 |  2 |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  10  |  11  |  12  →
// -----------------------------------------------------------------------------

footer {
    // some css goes here...

    //@media only screen and (min-width: 1024px) {
    @include from(10) {
        min-height: 160px;
        max-height: 300px;
    }
}

Now when I try to compile the following error exists:

WARNING: Wrong Slice number provided: 10. Should be between min and 5.
         on line 42 of /var/lib/gems/1.9.1/gems/breakpoint-slicer-1.2/stylesheets/breakpoint-slicer/_helper-functions.sass

thanks.

Extending breakpoint-slicer to support vertical media queries

Just throwing this out there because I would like something like this in one of my current projects.

Would you be open to something like this? If so, what do you think the syntax should look like? I'd be able to help implement.

Error: Invalid CSS after " $keys: list":

Hi.

Thank you for your hard work on the new version. Looks very promising!

When I switched though Im getting the following error message:

Message:
node_modules/breakpoint-slicer/index.scss
Error: Invalid CSS after " $keys: list": expected expression (e.g. 1px, bold), was ".append($keys, $key"
on line 162 of node_modules/breakpoint-slicer/index.scss
from line 24 of src/assets/scss/style.scss
$keys: list.append($keys, $key);

Would you be able to advice please?

Thanks

Support for Breakpoint's in-line no-query

Breakpoint 2.0.2 supports an on-demand no-query parameter. I'd love to see support for this in Breakpoint Slicer