General
variables
sgl-base-font-size
$sgl-base-font-size: 18 !default;
Description
Base font size.
Type
Number
sgl-base-line-height
$sgl-base-line-height: 1.3 !default;
Description
Base line height.
Type
Number
Used by
- [mixin]
sgl-html
- [mixin]
sgl-body
- [mixin]
sgl-heading
- [mixin]
sgl-margins
sgl-base-unit
$sgl-base-unit: "em" !default;
Description
Base unit (px
, em
, rem
, pxrem
).
Type
String
sgl-scale-factor
$sgl-scale-factor: $GOLDEN_SECTION !default;
Description
Scale factor.
Type
Number
Used by
- [mixin]
sgl-heading
sgl-debug-mode
$sgl-debug-mode: false !default;
Description
Enables/disables debug mode.
Outputs background lines imitating a notebook's sheet.
Declare it in your own _variables.scss
, _config.scss
or the like. Basically, it must be declared before the @import "sassy-gridlover"
.
Type
Boolean
Example
$sgl-debug-mode: true;
html {
+Sassy-Gridlover - v6.0.5 General
variables
sgl-base-font-size
$sgl-base-font-size: 18 !default;
Description
Base font size.
Type
Number
sgl-base-line-height
$sgl-base-line-height: 1.3 !default;
Description
Base line height.
Type
Number
Used by
- [mixin]
sgl-html
- [mixin]
sgl-body
- [mixin]
sgl-heading
- [mixin]
sgl-margins
sgl-base-unit
$sgl-base-unit: "em" !default;
Description
Base unit (px
, em
, rem
, pxrem
).
Type
String
sgl-scale-factor
$sgl-scale-factor: $GOLDEN_SECTION !default;
Description
Scale factor.
Type
Number
Used by
- [mixin]
sgl-heading
sgl-debug-mode
$sgl-debug-mode: false !default;
Description
Enables/disables debug mode.
Outputs background lines imitating a notebook's sheet.
Declare it in your own _variables.scss
, _config.scss
or the like. Basically, it must be declared before the @import "sassy-gridlover"
.
Type
Boolean
Example
$sgl-debug-mode: true;
html {
background-image: linear-gradient(rgba(0, 170, 255, 0.3) 1px, transparent 1px);
background-position: left top;
background-size: 19px 19px;
@@ -55,7 +55,7 @@
@if $sgl-extras == true {
@include sgl-extras;
}
- }" data-collapsed="@mixin sgl-html($font-size: $sgl-base-font-size) { ... }">@mixin sgl-html($font-size: $sgl-base-font-size) { ... }
Description
To use on <html>
.
Outputs font-size
and line-height
always in px
.
Parameters
parameter Name parameter Description parameter Type parameter Default value $font-size
Root font size.
Number
$sgl-base-font-size
Example
html {
+ }" data-collapsed="@mixin sgl-html($font-size: $sgl-base-font-size) { ... }">@mixin sgl-html($font-size: $sgl-base-font-size) { ... }
Description
To use on <html>
.
This mixin is mandatory for the all the other mixins to work.
Outputs font-size
and line-height
always in px
.
Parameters
parameter Name parameter Description parameter Type parameter Default value $font-size
Root font size.
Number
$sgl-base-font-size
Example
html {
@include sgl-html(18);
}
html {
font-size: 18px;
@@ -260,4 +260,4 @@
margin-bottom: 0px;
margin-top: 0rem;
margin-bottom: 0rem;
-}
Requires
- [variable]
sgl-base-line-height
- [variable]
sgl-debug-mode
\ No newline at end of file
+}
Requires
- [variable]
sgl-base-line-height
- [variable]
sgl-debug-mode