Skip to main content
100%

Sass Css Font Stack Variables

✓ Published0🌍 Public
Aackuser
Last edited Feb 14, 2014
Created on Jun 2, 2017

This example displays a curated collection of CSS font-stack variables organized into three categories: serif, sans-serif, and Google fonts. The Sass file defines named variables such as `$georgia-font-stack` and `$roboto-font-stack`, each assigned a fallback list of font families. It shows how developers can reuse consistent typography choices across a project, with the stacks sourced from cssfontstack.com. The code uses Sass variable declarations with `!default` flags to allow easy overrides, making the data structure directly usable in stylesheet development.

AI-generated description

Similar vizzes

Loading thumbnail…

good default fonts #css #style

This example demonstrates a clean, legible typographic foundation for web-based data visualizations, using a stacked font-family declaration that falls back from Helvetica Neue to Helvetica, Arial, and Lucida Grande before settling on a generic sans-serif. The CSS rule, applied to the `body` element, prioritizes system fonts for consistent rendering across platforms without requiring external font files. The code defines the font stack in a stylesheet, ensuring that any chart or graph inherits the same typeface, and it highlights how a single CSS declaration can establish a default aesthetic for an entire visualization project.

TTimeBandit
70% match
Loading thumbnail…

Gist 537f2fa32fb6446af0989d45bf11231c

This example presents a set of technical notes on Sass, a CSS preprocessor, written in Markdown with embedded SCSS and CSS code snippets. It shows the general features of Sass, including nesting, placeholder selectors, variables, mixins, functions, and at-rules like `@use`, `@import`, and `@extend`, alongside their compiled CSS output. The notes illustrate how Sass compiles down to standard CSS and highlight benefits such as code modularity and reusable styles. The content is sourced from a gist authored by Amol Tangade, formatted as a plain-text document rather than a visual chart.

AAmol Tangade
63% match
Loading thumbnail…

Generated by SassMeister.com.

This example demonstrates how Sass variables with `!default` flags and comment-based theme sections control CSS output for an `input` element. The code shows two distinct themes—a red "sui-theme" and a blue "vertical-theme"—where the default variable is overridden, and a component layer applies the blue background while reusing the red token for the `:focus` color. Compiled with dart-sass 1.32.12 in expanded output style, the resulting CSS reveals the cascade order: the red background from the default, then the blue override, and the focus rule inheriting the original red token.

Aandresin87
62% match
Loading thumbnail…

Base CSS document with google fonts, Eric Meyer's reset.css, Ethan Schoonover's solarized palette and some basic responsive code.

This example demonstrates a clean, typography-focused HTML/CSS foundation for a data-visualization project. It imports the "Roboto Slab" and "Exo 2" fonts via Google Fonts, resets default browser styling with Eric Meyer's reset.css, and applies Ethan Schoonover's Solarized color palette. The code uses standard CSS properties, including a responsive `.container` class with a media query for narrow screens, and sets up basic typography and spacing for a chart area. It does not implement any JavaScript or dynamic visualizations, serving only as a base stylesheet for future graphical work.

AAbsarF
60% match
Loading thumbnail…

Generated by SassMeister.com.

SassMeister demonstrates how Sass variables and CSS custom properties interact across theme layers. The input.scss file defines a `$color` variable defaulting to `var(--c-primary)`, then overrides it with a red value in `:root` before applying it to an `input` background. A second vertical-theme block reuses `$color` but relies on the earlier `$input-token` default, while the markup.html sets `--c-primary` to blue via inline styles. The Dart Sass compiler outputs expanded CSS where the focus state’s box-shadow references the token, showing how variable scope and defaults resolve across separate theme files.

Aandresin87
60% match
Loading thumbnail…

Generated by SassMeister.com.

This example demonstrates a modular scale for typography, applying a consistent proportional size and margin rhythm to headings and paragraphs. A Sass loop through the heading elements h6 to h1 assigns font sizes computed by the Modular Scale library, with negative margins creating a tight vertical rhythm. The body’s line-height is set to the golden ratio (1.61803) via `$ms-ratio`, and headings use `white-space: nowrap` and `overflow: hidden` to preserve their single-line layout. Latin filler text shows the scaling effect across all levels.

LLucyI
59% match
Loading thumbnail…

Bitter-Lato combination

This example demonstrates a typographic pairing of the Bitter serif font for headings and the Lato sans-serif font for body text, with the page built as a simple HTML document. It shows how the two Google Fonts are loaded via their stylesheet links and applied through CSS rules, where Bitter is used at various heading sizes and Lato at a lighter weight for paragraphs. The code defines font families, weights, and sizes directly in a `<style>` block, with no external JavaScript or data visualization libraries involved. The content itself is placeholder Lorem Ipsum text, making the focus purely on the visual hierarchy and font contrast.

Aaaizemberg
59% match
Loading thumbnail…

SCSS cheat sheet

This example presents a SCSS cheat sheet as a source-code reference, showing syntax for imports, variables, nesting, mixins, and media queries. The code includes predefined color variables like `$dmn-blue`, uses `lighten()` to adjust shades, and demonstrates `@mixin` definitions for reusable styles such as `body-copy-style` and `rounded`. It also illustrates selector nesting with the `&:hover` parent reference and responsive design via `@media` rules keyed to width variables. The gist by LayneSmith serves as the data source, rendered directly as formatted code.

LLayne Smith
59% match