Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Convert to SCSS for eyeglass support #20

Closed
wants to merge 2 commits into from
Closed

Convert to SCSS for eyeglass support #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ebf515d
Convert to scss
stevetweeddale Jul 8, 2016
8bf4411
Add the line eyeglass was complaining about
stevetweeddale Jul 8, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@
},
"homepage": "https://github.com/lolmaus/breakpoint-slicer#readme",
"eyeglass": {
"exports": "eyeglass-exports.js"
"exports": "eyeglass-exports.js",
"needs": "^0.8.3"
},
"devDependencies": {
"breakpoint-sass": "^2.6.1"
Expand Down
8 changes: 0 additions & 8 deletions stylesheets/_breakpoint-slicer.sass
View file
Open in desktop

This file was deleted.

8 changes: 8 additions & 0 deletions stylesheets/_breakpoint-slicer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
// Default values
@import "breakpoint-slicer/variables";

// Helper functions
@import "breakpoint-slicer/helper-functions";

// The magic!
@import "breakpoint-slicer/mixins";
321 changes: 166 additions & 155 deletions .../breakpoint-slicer/_helper-functions.sass → .../breakpoint-slicer/_helper-functions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,155 +1,166 @@
// Returns a correction value for the given breakpoint
// to prevent media query overlapping.
//
// Relies on the global variable $slicer-anti-overlap-corrections
// that should contain a list of allowed correction values.
//
// Returns either only positive or only negative value.
//
// anti-overlap-correction($bp, $positive: true)
// - $bp : a breakpoint, e. g. 800px or 20em
// - $positive : whether to return only positive or only negative values
// * true - return only positive correction value (default)
// * false - return only negative correction value
@function anti-overlap-correction($bp, $positive: true)
@each $correction in $slicer-anti-overlap-corrections
@if (unit($bp) == unit($correction)) and (($correction > 0) == $positive)
@return $correction
@return 0


// total-slices()
//
// Accepts no arguments.
//
// Returns total number of slices
// (which is equal to total number of breakpoints).
@function total-slices()
@return length($slicer-breakpoints)


// left-bp-of-slice($slice)
// - $slice : <slice number> A number of a slice. Should be positive integer.
//
// Returns the left breakpoint of an Nth slice, e. g. `600px`.
@function left-bp-of-slice($slice)
$slice: get-slice-id($slice)
$min: 1
$max: total-slices()

// Making sure that the slice provided is valid
@if ($slice < $min) or ($slice > $max)

@warn "Wrong Slice number provided: #{$slice}. Should be between #{$min} and #{$max}."

@else

$left: i am declared

// Special treatment of the first slice...
@if $slice == 1
// ...to prevent a meaningless `min-width: 0` meida query
$left: max-width // This is Breakpoint's syntax

@else
// Returning the left edge of the slice
$left: nth($slicer-breakpoints, $slice)
$left: $left + anti-overlap-correction($left, true)

@return $left


// right-bp-of-slice($slice)
// - $slice : <slice number> A number of a slice. Should be positive integer.
//
// Returns the right breakpoint of an Nth slice, e. g. `800px`.
@function right-bp-of-slice($slice)
$slice: get-slice-id($slice)
$min: 1
$max: total-slices() - 1

// Making sure that the slice provided is valid
@if $max == total-slices()
@warn "Slice number provided: #{$slice}. It's the last slice, it has no right edge."
@else if ($slice < $min) or ($slice > $max)
@warn "Wrong column number provided: #{$slice}. Should be between #{$min} and #{$max}."
@else
// Reading the right edge of the slice
$right-bp: nth($slicer-breakpoints, $slice + 1)
@return $right-bp + anti-overlap-correction($right-bp, false)


// bp($slice)
//
// A shortcut for nth($slicer-breakpoints, $slice)
@function bp($slice)
@return nth($slicer-breakpoints, $slice)


// lbp($slice)
//
// A shortcut for left-bp-of-slice($slice)
@function lbp($slice)
@return left-bp-of-slice($slice)


// rbp($slice)
//
// A shortcut for right-bp-of-slice($slice)
@function rbp($slice)
@return right-bp-of-slice($slice)


// get-slice-id($slice-id-or-name)
//
// Returns a slice number corresponding to a slice name
//
// - $slice-id-or-name: <slice number or name> Should be either a number of a slice (positive integer)
// or a name of the slice from $slicer-breakpoint-names (string)
@function get-slice-id($slice-id-or-name)

// Treating the argument as a slice name.
// Retrieving slice id for given slice name
$slice-id: index($slicer-breakpoint-names, $slice-id-or-name)

// Checking whether a slice with the given name exists
@if $slice-id
//@warn "slice-id is truthful"

// Return the id found
@return $slice-id
@else
//@warn "slice-id is falsy"

// Assume an id was given in the first place
@return $slice-id-or-name


// prev-slice($slice-id-or-name)
//
// Returns previous slice id for the given slice
@function prev-slice($slice-id-or-name)

$slice-id: get-slice-id($slice-id-or-name)

@if $slice-id > 1
$slice-id: $slice-id - 1
@else
@warn "Previous slice for the first slice requested"

@return $slice-id


// next-slice($slice-id-or-name)
//
// Returns next slice id for the given slice
@function next-slice($slice-id-or-name)

$slice-id: get-slice-id($slice-id-or-name)

@if $slice-id < total-slices()
$slice-id: $slice-id + 1
@else
@warn "Previous slice for the first slice requested"

@return $slice-id
// Returns a correction value for the given breakpoint
// to prevent media query overlapping.
//
// Relies on the global variable $slicer-anti-overlap-corrections
// that should contain a list of allowed correction values.
//
// Returns either only positive or only negative value.
//
// anti-overlap-correction($bp, $positive: true)
// - $bp : a breakpoint, e. g. 800px or 20em
// - $positive : whether to return only positive or only negative values
// * true - return only positive correction value (default)
// * false - return only negative correction value
@function anti-overlap-correction($bp, $positive: true) {
@each $correction in $slicer-anti-overlap-corrections {
@if unit($bp) == unit($correction) and $correction > 0 == $positive {
@return $correction;
}
}

@return 0;
}

// total-slices()
//
// Accepts no arguments.
//
// Returns total number of slices
// (which is equal to total number of breakpoints).
@function total-slices() {
@return length($slicer-breakpoints);
}

// left-bp-of-slice($slice)
// - $slice : <slice number> A number of a slice. Should be positive integer.
//
// Returns the left breakpoint of an Nth slice, e. g. `600px`.
@function left-bp-of-slice($slice) {
$slice: get-slice-id($slice);
$min: 1;
$max: total-slices();

// Making sure that the slice provided is valid
@if $slice < $min or $slice > $max {
@warn "Wrong Slice number provided: #{$slice}. Should be between #{$min} and #{$max}.";
}
@else {
$left: i am declared;

// Special treatment of the first slice...
@if $slice == 1 {
// ...to prevent a meaningless `min-width: 0` meida query
$left: max-width;
}
@else {
// Returning the left edge of the slice
$left: nth($slicer-breakpoints, $slice);
$left: $left + anti-overlap-correction($left, true);
}

@return $left;
}
}

// right-bp-of-slice($slice)
// - $slice : <slice number> A number of a slice. Should be positive integer.
//
// Returns the right breakpoint of an Nth slice, e. g. `800px`.
@function right-bp-of-slice($slice) {
$slice: get-slice-id($slice);
$min: 1;
$max: total-slices() - 1;

// Making sure that the slice provided is valid
@if $max == total-slices() {
@warn "Slice number provided: #{$slice}. It's the last slice, it has no right edge.";
}
@else if $slice < $min or $slice > $max {
@warn "Wrong column number provided: #{$slice}. Should be between #{$min} and #{$max}.";
}
@else {
// Reading the right edge of the slice
$right-bp: nth($slicer-breakpoints, $slice + 1);

@return $right-bp + anti-overlap-correction($right-bp, false);
}
}

// bp($slice)
//
// A shortcut for nth($slicer-breakpoints, $slice)
@function bp($slice) {
@return nth($slicer-breakpoints, $slice);
}

// lbp($slice)
//
// A shortcut for left-bp-of-slice($slice)
@function lbp($slice) {
@return left-bp-of-slice($slice);
}

// rbp($slice)
//
// A shortcut for right-bp-of-slice($slice)
@function rbp($slice) {
@return right-bp-of-slice($slice);
}

// get-slice-id($slice-id-or-name)
//
// Returns a slice number corresponding to a slice name
//
// - $slice-id-or-name: <slice number or name> Should be either a number of a slice (positive integer)
// or a name of the slice from $slicer-breakpoint-names (string)
@function get-slice-id($slice-id-or-name) {
// Treating the argument as a slice name.
// Retrieving slice id for given slice name
$slice-id: index($slicer-breakpoint-names, $slice-id-or-name);

// Checking whether a slice with the given name exists
@if $slice-id {
//@warn "slice-id is truthful"

// Return the id found
@return $slice-id;
}
@else {
//@warn "slice-id is falsy"

// Assume an id was given in the first place
@return $slice-id-or-name;
}
}

// prev-slice($slice-id-or-name)
//
// Returns previous slice id for the given slice
@function prev-slice($slice-id-or-name) {
$slice-id: get-slice-id($slice-id-or-name);

@if $slice-id > 1 {
$slice-id: $slice-id - 1;
}
@else {
@warn "Previous slice for the first slice requested";
}

@return $slice-id;
}

// next-slice($slice-id-or-name)
//
// Returns next slice id for the given slice
@function next-slice($slice-id-or-name) {
$slice-id: get-slice-id($slice-id-or-name);

@if $slice-id < total-slices() {
$slice-id: $slice-id + 1;
}
@else {
@warn "Previous slice for the first slice requested";
}

@return $slice-id;
}
Loading