lgth_step_down.sass
· 1.6 KiB · Sass
Raw
@use "sass:math"
$fs: 21px
$mplr: 1.667
$lcct: 32
$lgth: $lcct * 1rem
$lmch: $mplr * 1rem
$lsid: calc(($mplr - 1) / 2) * 1rem
$lacs: (2 * $mplr - 1) * 1rem
html, body
writing-mode: vertical-rl
font-size: $fs
article
height: $lgth
text:
align: justify
margin: $lacs
// Style text frame
@mixin text_frame($_lcct, $should_set_fs: false)
@if $should_set_fs
html, body
font-size: $fs
article
height: $_lcct * 1rem
@function corresponding_screen_height($text_frame_height)
// Should return `px`
@debug $text_frame_height, $fs, $text_frame_height + (2 * $mplr - 1) * 2 * $fs
@return $text_frame_height + (2 * $mplr - 1) * 2 * $fs
// Create `max-height` breakpoints
$_last_breakpoint: null
@mixin screen_breakpoints($start_lcct, $decrease, $fs)
$fs: $fs !global
@for $i from 0 through $decrease
@if $i == 0
@if $_last_breakpoint != null
@media screen and (max-height: corresponding_screen_height($_last_breakpoint))
@include text_frame($start_lcct - $i, true)
@else
@media screen and (max-height: corresponding_screen_height(($start_lcct - $i + 1) * $fs))
@include text_frame($start_lcct - $i)
@if $i == $decrease
$_last_breakpoint: ($start_lcct - $i) * $fs !global
@mixin lgth_step_down($ideal_lcct, $min_lcct, $sizes...)
$sizes: append($sizes, 0px)
@for $i from 1 to length($sizes)
$greedy_step: math.floor(math.div((nth($sizes, $i) - nth($sizes, $i + 1)) * $ideal_lcct, nth($sizes, $i)))
$step: min($greedy_step, $ideal_lcct - $min_lcct)
@include screen_breakpoints($ideal_lcct, $step, nth($sizes, $i))
@include lgth_step_down($lcct, 18, 21px, 18px, 16px)
1 | @use "sass:math" |
2 | |
3 | $fs: 21px |
4 | $mplr: 1.667 |
5 | $lcct: 32 |
6 | |
7 | $lgth: $lcct * 1rem |
8 | $lmch: $mplr * 1rem |
9 | $lsid: calc(($mplr - 1) / 2) * 1rem |
10 | $lacs: (2 * $mplr - 1) * 1rem |
11 | |
12 | |
13 | html, body |
14 | writing-mode: vertical-rl |
15 | font-size: $fs |
16 | |
17 | article |
18 | height: $lgth |
19 | text: |
20 | align: justify |
21 | margin: $lacs |
22 | |
23 | |
24 | // Style text frame |
25 | @mixin text_frame($_lcct, $should_set_fs: false) |
26 | @if $should_set_fs |
27 | html, body |
28 | font-size: $fs |
29 | article |
30 | height: $_lcct * 1rem |
31 | |
32 | @function corresponding_screen_height($text_frame_height) |
33 | // Should return `px` |
34 | @debug $text_frame_height, $fs, $text_frame_height + (2 * $mplr - 1) * 2 * $fs |
35 | @return $text_frame_height + (2 * $mplr - 1) * 2 * $fs |
36 | |
37 | // Create `max-height` breakpoints |
38 | $_last_breakpoint: null |
39 | @mixin screen_breakpoints($start_lcct, $decrease, $fs) |
40 | $fs: $fs !global |
41 | @for $i from 0 through $decrease |
42 | @if $i == 0 |
43 | @if $_last_breakpoint != null |
44 | @media screen and (max-height: corresponding_screen_height($_last_breakpoint)) |
45 | @include text_frame($start_lcct - $i, true) |
46 | @else |
47 | @media screen and (max-height: corresponding_screen_height(($start_lcct - $i + 1) * $fs)) |
48 | @include text_frame($start_lcct - $i) |
49 | @if $i == $decrease |
50 | $_last_breakpoint: ($start_lcct - $i) * $fs !global |
51 | |
52 | @mixin lgth_step_down($ideal_lcct, $min_lcct, $sizes...) |
53 | $sizes: append($sizes, 0px) |
54 | @for $i from 1 to length($sizes) |
55 | $greedy_step: math.floor(math.div((nth($sizes, $i) - nth($sizes, $i + 1)) * $ideal_lcct, nth($sizes, $i))) |
56 | $step: min($greedy_step, $ideal_lcct - $min_lcct) |
57 | @include screen_breakpoints($ideal_lcct, $step, nth($sizes, $i)) |
58 | |
59 | |
60 | @include lgth_step_down($lcct, 18, 21px, 18px, 16px) |