scss 用于项目元素部分的SASS样板

Posted 2021-05-18

/* Links
========================================================================== */

a {
  color: $accent;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  // @style: GENERIC LINKS HERE
  &:hover,
  &:focus {
    color: darken($accent, 10%), 10%;
    text-decoration: underline;
    outline: 0;
  }
  &:hover, &:active {
    outline-width: 0;
  }
}

/* Text-level semantics
========================================================================== */

abbr[title] {
  cursor: help;
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

i, em {
  font-style: italic;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

mark {
  padding: 0 0.25em;
  background: #ffc;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

[hidden] {
  display: none;
}

details, menu {
  display: block;
}

// @style different kinds of elements, like badges or icons, or iconed links or
// counters and other text-level stuff

/* Adresses
========================================================================== */

address {}

// @style adress here

/* Blockquotes
========================================================================== */

q {}

blockquote {}

// @style blockquotes here

/* Definitions
========================================================================== */

dl {
  // @style DEFAULT DEFINITIONS HERE
}

dt {
  font-weight: bold;
  &:after {
    content: ":";
  }
}

dd {
  position: relative;
  padding-left: 1.8em;
  &:before {
    display: inline-block;
    content: "—";
    position: absolute;
    left: 0.4em;
  }
}

// @style CUSTOM DEFINITIONS HERE

/* Unordered and Ordered lists
========================================================================== */

ul, ol {
  padding-left: 1.4em;
  // @style CUSTOM DEFAULT HERE
  ol, ul {
    margin: 0;
  }
}

ol ol {
  list-style-type: upper-alpha;
}

// @style CUSTOM LISTS HERE
//

/* Textlike inputs
========================================================================== */

%textlike-base {
  // @style GENERIC TEXTLIKE INPUTS HERE
  @include placeholder () {
    // @style PLACEHOLDER TEXT HERE
  }
}

.inpit {
  @extend %textlike-base;
  // @style ONLY ONELINE INPUTS HERE
}

textarea {
  @extend %textlike-base;
  resize: none;
  // @style ONLY TEXTAREAS HERE
}

// @style CUSTOM INPUTS HERE

/* Table styling
========================================================================== */

table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  // @style DEFAULT TABLES HERE

  caption {
    text-align: left;
    font-weight: 700;
    font-family: $ff-h;
    font-size: $h3;
    line-height: 1;
  }

  td {
    // Selector for generic cells ========================================
    // ===================================================================
  }

  td, th {
    // Selector for all cells ============================================
    // ===================================================================
    padding: 0.5em 0.75em;
  }

  >tr:last-child td, tr:last-child th {
    // Selector to match last cell in each row ===========================
    // ===================================================================
  }

  thead td, th {
    // Selector to match heading cells ===================================
    // ===================================================================
    text-align: left;
  }

  tfoot {

  }
}

/* Switchers
========================================================================== */
input[type="checkbox"],
input[type="radio"] {
  padding: 0;
  // @style GENERIC SWITCHERS HERE
  label & {
    vertical-align: -1px;
  }
}

// @style CUSTOM SWITCHERS HERE

/* Headings
========================================================================== */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  line-height: 1;
  font-family: $ff-h;
  // @style: GENERIC HEADERS HERE
  small {
    color: lighten($main, 40%);
    vertical-align: top;
    font-weight: 400;
  }
  // @style: links INSIDE headings
  // ======================================================================
  a {
    color: inherit;
  }
}

// Custom heading here
// ======================================================================
h1, .t-display2 {
  font-size: $h1;
}

h2, .t-display1 {
  font-size: $h2;
}

h3, .t-heading {
  font-size: $h3;
}

h4, .t-subhead1 {
  font-size: $h4;
}

h5, .t-subhead2 {
  font-size: $h5;
}

h6, .t-caption {
  font-size: $h6;
}

// @style: CUSTOM HEADERS HERE

/* Forms
   ========================================================================== */

button, input, optgroup, select, textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

progress {
  display: inline-block;
  vertical-align: baseline;
}

/* Fielsets
========================================================================== */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
  // @style GENERIC FIELDSET HERE
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/* Embedded content like images iframes
========================================================================== */

img {
  max-width: 100%;
  height: auto;
  border-style: none;
  a & {
    border: 0;
  }
}

template {
  display: none;
}

canvas {
  display: inline-block;
}

svg:not(:root) {
  overflow: hidden;
  pointer-events: none !important;
  // @style DEFAULT SVGS HERE
}

audio, video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

// @style DEFAULT FIGURES AND OBJECTS HERE

figure {}

figcaption {}

iframe {}

// @style: CUSTOM FIGURES AND OBJECTS HERE


/* Grouping content
========================================================================== */

hr {
  height: 0;
}

code, kbd, pre, samp {
  font-family: $ff-mono;
  font-size: 1em;
  // @style: DEFAULT CODE ELEMENTS HERE
}

dfn {
  font-style: italic;
}

code, samp, kbd {
  display: inline-block;
  padding: 0 0.5em;
}

pre {
  overflow: auto;
}

// @style: CUSTOM CODE ELEMENTS HERE

/* Selects
========================================================================== */
select {
  text-transform: none;
  color: inherit;
  // @style GENERIC DROPDOWNS HERE
  option {
    display: block;
  }
  optgroup {
    font-weight: bold;
    font-style: normal;
    display: block;
  }
}

select[multiple] {
  height: auto;
}

// @style CUSTOM DROPDOWNS HERE

/* Buttons
========================================================================== */

.button {
  cursor: pointer;
  // @style STYLES FOR ALL BUTTONS
  a& {
    text-decoration: none;
    // @style FOR BUTTON-LIKE ELEMENTS
    &:hover,
    &:focus {
      text-decoration: none;
    }
  }
  &:hover,
  &:focus {}
  &:active {}
}

// @style FOR CUSTOM BUTTON ELEMENTS