scss 脏base.scss
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了scss 脏base.scss相关的知识，希望对你有一定的参考价值。
$family: 'Helvetica', 'Arial', sans-serif;
$color: #222;
$size: 16px; // no more 100%
$line: 1.778; // no more teensy rythmn, let it breathe
$space: $line * 1rem;
// variable bindings
// [element]_[rule indicator]--[variance]
// just go with it, ain't gotta be fancy
// of course you should replace these in production code
// but this is sass. sass is not production. so we can be as dirty as we want back here
$root_color: tint($color, 10%) !default;
$root_bg: #ccc !default;
$body_margin: 0 !default;
$body_padding: $space !default;
$body_width: 100% !default;
$body_width--max: 100% !default;
$body_width--min: 320px !default;
$body_bg: tint($root_bg, 30%) !default;
$body_color: inherit !default;
$body_margin--y: 0 !default;
// placeholder, because some form controls don't inherit correctly
%root-text {
color: $color;
font-size: $size;
line-height: $line;
font-family: $family;
}
:root,
html {
@extend %root-text;
color: $root_color;
background-color: $root_bg;
cursor: default;
height: 100%;
text-rendering: optimizeSpeed;
box-sizing: border-box;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
overflow-x: hidden;
overflow-y: auto;
-ms-overflow-style: -ms-autohiding-scrollbar; /* IE11-, Edge */
}
/* --------------------
* inheritance of doom
**
* finally! an inheritance for me!
* we have to make this selection for box-sizing,
* might as well get our money's worth.
*/
// placed in two mixins for easy turn off
@mixin inheritizr {
font-size: inherit;
line-height: inherit;
text-decoration: inherit;
vertical-align: inherit;
}
@mixin sanitizr {
border-style: solid;
border-color: rgba(0,0,0,.25);
border-width: 0;
background-repeat: no-repeat;
}
@mixin resetizr {
// woah, easy now
// position: relative;
margin: 0;
padding: 0;
}
*
::before,
::after {
box-sizing: inherit;
@include inheritizr;
@include sanitizr;
@include resetizr;
}
// note on box-sixing:
// remember if you are using NEAT or
// another layout library to TURN OFF
// its box-sizing output into CSS.
// Neat does not use 'inherit' for box-sizing
// correction: neat has been updated
// ; however, the following selections should only be done once
// and neat is not used in many projects
/* --------------------
* body
**
* 1: body is the "wrapper"
* 2: ensure children with 'position:absolute' don't break out and body position can be manipulated
* 3: force body to fill view
* 3.1: 101% min-height on body
* a.) forces scrollbars to appear on <html>
* b.) works to this effect no matter if body top/bottom margin is 0
*/
body {
display: block;
position: relative;
min-height: 101%; /* 3 */
background: $body_bg;
color: $body_color;
width: $body_width;
min-width: $body_width--min;
max-width: $body_width--max;
margin: $body_margin--y auto;
padding: $body_padding;
}
@media (max-width: $body_width--min) {
/* put scrollbars back for super teensy screens */
:root, html {
overflow-x: auto;
}
}
/*
if you set $body_width--max to a unit other than % -
@media (min-width: $body_width--max) {
nothing needs done here unless 'auto' is removed from body margin,
this lets you use percentages in the body-max-width variable.
useful to always have space between body and the screen and/or setting the max to 100%
in case you are cool and make for high-res
}
*/以上是关于scss 脏base.scss的主要内容，如果未能解决你的问题，请参考以下文章