diff --git a/scss/_core.scss b/scss/_core.scss index e5a87b59d..009eb043c 100644 --- a/scss/_core.scss +++ b/scss/_core.scss @@ -1,9 +1,11 @@ // Base Class Definition // ------------------------- +@use "sass:list"; + .#{$fa-css-prefix} { display: inline-block; - font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} #{$fa-font-family}; // shortening font declaration + font: normal normal normal list.slash($fa-font-size-base, $fa-line-height-base) #{$fa-font-family}; // shortening font declaration font-size: inherit; // can't have font-size inherit on line above, so need to override text-rendering: auto; // optimizelegibility throws things off #1094 -webkit-font-smoothing: antialiased; diff --git a/scss/_fixed-width.scss b/scss/_fixed-width.scss index b221c9813..5411f9538 100644 --- a/scss/_fixed-width.scss +++ b/scss/_fixed-width.scss @@ -1,6 +1,8 @@ // Fixed Width Icons // ------------------------- +@use "sass:math"; + .#{$fa-css-prefix}-fw { - width: (18em / 14); + width: math.div(18em, 14); text-align: center; } diff --git a/scss/_larger.scss b/scss/_larger.scss index 41e9a8184..a4065941f 100644 --- a/scss/_larger.scss +++ b/scss/_larger.scss @@ -2,9 +2,11 @@ // ------------------------- /* makes the font 33% larger relative to the icon container */ +@use "sass:math"; + .#{$fa-css-prefix}-lg { - font-size: (4em / 3); - line-height: (3em / 4); + font-size: math.div(4em, 3); + line-height: (3em * 0.25); vertical-align: -15%; } .#{$fa-css-prefix}-2x { font-size: 2em; } diff --git a/scss/_list.scss b/scss/_list.scss index 7d1e4d54d..988e6f87a 100644 --- a/scss/_list.scss +++ b/scss/_list.scss @@ -1,6 +1,8 @@ // List Icons // ------------------------- +@use "sass:math"; + .#{$fa-css-prefix}-ul { padding-left: 0; margin-left: $fa-li-width; @@ -11,9 +13,9 @@ position: absolute; left: -$fa-li-width; width: $fa-li-width; - top: (2em / 14); + top: math.div(2em, 14); text-align: center; &.#{$fa-css-prefix}-lg { - left: -$fa-li-width + (4em / 14); + left: -$fa-li-width + math.div(4em, 14); } } diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 6fdb12847..3a6d9f87c 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -1,9 +1,11 @@ // Mixins // -------------------------- +@use "sass:list"; + @mixin fa-icon() { display: inline-block; - font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} #{$fa-font-family}; // shortening font declaration + font: normal normal normal list.slash($fa-font-size-base, $fa-line-height-base) #{$fa-font-family}; // shortening font declaration font-size: inherit; // can't have font-size inherit on line above, so need to override text-rendering: auto; // optimizelegibility throws things off #1094 -webkit-font-smoothing: antialiased; diff --git a/scss/_variables.scss b/scss/_variables.scss index 3a8abf3d9..415ad1e2d 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1,6 +1,8 @@ // Variables // -------------------------- +@use "sass:math"; + $fa-font-path: "../fonts" !default; $fa-font-size-base: 14px !default; $fa-line-height-base: 1 !default; @@ -9,7 +11,7 @@ $fa-font-family: "ForkAwesome" !default; $fa-version: "1.2.0" !default; $fa-border-color: #eee !default; $fa-inverse: #fff !default; -$fa-li-width: (30em / 14) !default; +$fa-li-width: math.div(30em, 14) !default; $fa-var-500px: \f26e; $fa-var-activitypub: \f2f2;