Questions tagged [breakpoint-sass]

Breakpoint: A SASS/Compass extension to set media queries

Breakpoint is a SASS/Compass extension that makes writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries, then call it using the breakpoint mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself, to handling cross-browser compatibility issues, so you can focus on what's important: making sure your website looks its best.

Breakpoint also allows you to get the context of your media queries from your code, allowing you to write dynamic mixins based on their media query context.

If you'd prefer the semantic awesomeness of string names to identify your queries as opposed to variables, or want to dynamically generate media queries, check out the Respond-To syntax, now included in Breakpoint core, or jet-propelled Breakpoint Slicer mixins.

Documentation: https://github.com/Team-Sass/breakpoint/wiki

61 questions
0
votes
1 answer

Susy 2 and Breakpoint

I am finally transitioning over to Susy 2 from Susy One and have been struggling a bit with the new syntax. Specifically, using it with the Breakpoint mixin. In Susy One, I had this: // Mobile First Settings .grid-construct{ $total-columns:…
Yahreen
  • 1,639
  • 7
  • 24
  • 38
0
votes
0 answers

Nested breakpoint-sass with Susy span mixin

I use nested breakpoint with Susy. The compiled CSS contain the line: box-sizing: ; When I don't use nested breakpoint the compiled CSS is correct. The SASS code: @include border-box-sizing; #list { $map: ( columns: 12, gutters:…
Diabolik
  • 1
  • 2
0
votes
1 answer

Using susy and breakpoint with grunt-sass

Im working on a new project and started to use grunt-sass instead of grunt-contrib-sass because its alot faster. I also removed compass. The thing now is that i cannot find a way to add 'susy' grid and 'breakpoint' anymore. I used to put this in a…
Toasty
  • 59
  • 12
0
votes
1 answer

Susy 2.1.3 issue regarding layout change on breakpoint

Help me out you sassy susy's, I am at my breaking point! I am trying to make the most efficient layout for my project, and I have come across something I havn't been able to figure out with Susy/breakpoint. I want the layout columns to change at…
worlddev
  • 52
  • 1
  • 8
0
votes
1 answer

How to support IE8 with breakpoint-sass and mobile first

I am using breakpoint-sass gem to handle media queries for mobile first responsive stylesheets. I need to create a separate css file for IE8 (which does not support media queries), whereby I want to have all the styles, omitting the strings starting…
SleepWalker
  • 1,152
  • 14
  • 17
0
votes
1 answer

Breakpoint does not output anything

Having a very weird breakpoint problem. Screen.scss contains the most basic breakpoint example: @import "breakpoint"; $high-tide: 500px; .johnny-utah { color: blue; @include breakpoint($high-tide) { content: 'Whoa.'; } …
0
votes
1 answer

Error when importing files within breakpoint-sass mixin

I'm trying to import a set of files using breakpoint-sass but am getting an error filenames.scss (Line 99: Import directives may not be used within control directives or mixins.) The code im using is: @include breakpoint($breakpoint2) { @import…
Qasim
  • 168
  • 1
  • 8
0
votes
1 answer

Add Susy to existing grunt build

I have an existing project that I build with grunt and would like to add Susy. The build works fine without Susy. It looks like Breakpoint should be used with Susy. Both of these require Sass to be at least V3.3. And from the CLI it is: Sass 3.3.10…
OPunWide
  • 133
  • 1
  • 8
0
votes
3 answers

Setting Breakpoints to respond to screen size using CSS @media

I'm setting breakpoints in css using '@media only screen and (max-width: 500px)'. When I set it to change colour upon reaching the breakpoint it works: @media only screen and (max-width: 500px) {#container{color:black;}} the container div does go…
NiallJG
  • 1,881
  • 19
  • 22
0
votes
1 answer

angular-generator with susy and breakpoint

I am trying to setup an angular app using Susy and Breakpoint instead of bootstrap. I am using yeoman to run angular-generator. During the install, instead of saying Yes to bootstrap, i say No. This all goes well and my app runs in the browser fine…
0
votes
4 answers

Using Codekit 2 with Susy and Breakpoint

I like to use Codekit for a Compass-Poject with Susy and Breakpoint. @import "compass"; @import "compass/reset"; @import "susy"; @import "breakpoint"; But there is an error message "File to import not found or unreadable: breakpoint." Can i use…
0
votes
1 answer

Using variables with susy-breakpoint in susy 2

I have recently upgraded to Susy2 and having to rework my base templates with new susy-breakpoints instead of at-breakpoint. With the new susy-breakpoint I need to define a breakpoint and a layout for the short hand like so "60em, 12" and I have…
user2852784
  • 101
  • 1
  • 4
0
votes
2 answers

Media queries missing the screen using Breakpoint Sass

I'm using Susy 2 with breakpoint-sass to create my media queries. It's outputting like: @media (min-width: 1000px) I'm wondering why the screen is missing? It should read: @media screen (min-width: 1000px) I'm trying to add css3-mediaqueries-js…
sarah3585
  • 637
  • 13
  • 37
0
votes
1 answer

Prepros failed to compile when using gem breakpoint

Whenever I try to include the "breakpoint" gem in me prepros-project, I'm getting this error: error sass/main.scss (Line 3 of sass/_grid.scss: File to import not found or unreadable: breakpoint. Load paths: C:/xampp/htdocs/egoplan/sass …
0
votes
1 answer

Unable to gem install breakpoint on Mac

I am trying to install breakpoint on my macbook but it fails to compile. The full output is below. I am new to Mac and am not sure what I might have done wrong. My Windows workstation had no trouble this evening. Thank you! Aarons-MacBook-Pro:~…
Aaron Greenlee
  • 4,587
  • 4
  • 26
  • 37