SCSS Tick Marks Function

Developer
Brandon Kennedy
Size
3,630 Kb
Views
34,408
  1. SCSS Tick Marks Function Previews
  2. SCSS Tick Marks Function HTML Codes
  3. SCSS Tick Marks Function CSS Codes

How do I make an scss tick marks function?

SCSS function that adds tick marks to a gauge with CSS.. What is a scss tick marks function? How do you make a scss tick marks function? This script and codes were developed by Brandon Kennedy on 18 September 2022, Sunday.

SCSS Tick Marks Function Previews
IQ Test

SCSS Tick Marks Function - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SCSS Tick Marks Function</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/https___s3_us_west_2_amaz.css'>
<link rel='stylesheet prefetch' href='css/https___s3_us_west_2_amaz.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="gauge"> <!-- set the width inline so it can be done dynamically if necessary--> <div class="fill" style="width: 23%"></div>
</div>
</body>
</html>

SCSS Tick Marks Function - Script Codes CSS Codes

// includes modifiers mixin
// includes colors mixin
$color-settings: ( 'colors': ( 'a': ( 0: #333333 ), 'b': ( 0: #ff6347 ), // red 'c': ( 0: #1e90ff ), // blue 'd': ( 0: #46d246 ), // green )
);
@include define-color-set;
// spacing and width are integers representing percentage of element width
@function make_ticks($spacing: 5, $width: 1, $color: #333) { $gradient: transparent 0%; $x: 0; @while $x < 100 { $x: $x + $spacing; $gradient: $gradient, transparent percentage($x / 100), $color percentage($x / 100), $color percentage(($x + $width) / 100), transparent percentage(($x + $width) / 100); } @return linear-gradient(to left, $gradient);
}
$gauge-h: 50px;
$gauge-w: 300px;
$tick-lg: 30px;
$tick-sm: 20px;
.gauge { border: 2px solid color(a); border-radius: 6px; height: $gauge-h; overflow: hidden; position: relative; width: $gauge-w; &:before, &:after { content: ''; left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } &:before { background-image: make_ticks(5, 0.5); height: $tick-sm; } &:after { background-image: make_ticks(25, 0.5); height: $tick-lg; } .fill { background-color: color(b); height: $gauge-h; }
}
body { min-height: 100vh; padding: 2rem;
}
* { &, &:before, &:after { box-sizing: border-box; &, &:focus, &:active, &:focus:active { outline: none; } }
}
SCSS Tick Marks Function - Script Codes
SCSS Tick Marks Function - Script Codes
Home Page Home
Developer Brandon Kennedy
Username brandonkennedy
Uploaded September 18, 2022
Rating 3.5
Size 3,630 Kb
Views 34,408
Do you need developer help for SCSS Tick Marks Function?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brandon Kennedy (brandonkennedy) Script Codes
Name
Button disabled and loading states
Browser Detection
CSS Only Banner Rotation
Slug loader
BG Images WITHOUT Defining Them In CSS
Compare Some Different Grid Systems
Digital Static Search Box
Space ship fun
Scrolling helix
And yet another box shadow loader
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!