Responsive Aspect-Ratio SCSS Mixin

Developer
Jakob-e
Size
8,503 Kb
Views
64,768
  1. Responsive Aspect-Ratio SCSS Mixin Previews
  2. Responsive Aspect-Ratio SCSS Mixin HTML Codes
  3. Responsive Aspect-Ratio SCSS Mixin CSS Codes
  4. Responsive Aspect-Ratio SCSS Mixin JS Codes

How do I make an responsive aspect-ratio scss mixin?

Mixin to lock the aspect ratio of an element – or make it fit to content if it exceeds the boundaries of the aspect ratio.. What is a responsive aspect-ratio scss mixin? How do you make a responsive aspect-ratio scss mixin? This script and codes were developed by Jakob-e on 04 July 2022, Monday.

Responsive Aspect-Ratio SCSS Mixin Previews
IQ Test

Responsive Aspect-Ratio SCSS Mixin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Aspect-Ratio SCSS Mixin</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel='stylesheet prefetch' href='css/bnnmjd.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <article> <h1>Responsive Aspect-Ratio SCSS Mixin </h2> <p>Mixin to lock the <strong>aspect ratio</strong> of an element – or make it <strong>fit to content</strong> if it exceeds the boundaries of the aspect ratio.</p> <p><strong>Note!</strong> the ratio is produced using the :before and :after pseudo-elements – why it won't work on empty tags like &lt;img /&gt;, &lt;input /&gt; etc.</p> <div class="example-1"><p>1:1</p></div> <div class="example-2"><p>16:9</p></div> <div class="example-3"><p>9:16</p></div> <div class="example-4"><p>4:3</p></div> <div class="example-5"><p>4:3</p> <p>Fit to content <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="note"><em>Resize window</em></div> <section> <h2>Use examples</h2>
<div data-ace-mode="scss">// Syntax:
// @include aspect-ratio($ratio or $width, $height);
.class { @include aspect-ratio(); } // No arguments defaults to a 1:1 ratio
.class { @include aspect-ratio(16, 9); } // Width and height
.class { @include aspect-ratio(1.777778); } // Ratio (calculated width/height)
.class { @include aspect-ratio(4px, 3px); } // Comparable units
.class { @include aspect-ratio($ratio: 1.2); } // Keywords
</div> </section> <section> <h2>The mixin</h2>
<div data-ace-mode="scss">@mixin aspect-ratio($arglist... /*$ratio or $width, $height*/){ $map : keywords($arglist); $height: map-get($map, height) or nth-or-null($arglist, 2); $width: map-get($map, width) or nth-or-null($arglist, 1); $ratio: map-get($map, ratio) or if($width and $height, $width/$height, nth-or-null($arglist, 1)) or 1; $padding: 1/$ratio * 100%; &:before { content: ''; float:left; padding-bottom: $padding; margin-right:-100%;} &:after { content: ''; display:table; clear: both; }
}
// Helper function
// Return null rather than throwing an error if index is outside list range.
@function nth-or-null($list, $index) { @return if(length($list) >= $index, nth($list, $index), null);
}
</div>
<footer data-related-pens="WvrJwN"></footer>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js'></script>
<script src='http://codepen.io/jakob-e/pen/MwKXbV.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive Aspect-Ratio SCSS Mixin - Script Codes CSS Codes

@mixin aspect-ratio($arglist... /*$width/$ratio, $height*/){ $map : keywords($arglist); $height: map-get($map, height) or nth-or-null($arglist, 2); $width: map-get($map, width) or nth-or-null($arglist, 1); $ratio: map-get($map, ratio) or if($width and $height, $width/$height, nth-or-null($arglist, 1)) or 1; $padding: 1/$ratio * 100%; &:before { content: ''; float:left; padding-bottom: $padding; margin-right:-100%; } &:after { content: ''; display:table; clear: both; }
}
// Helper function
// Return null rather than throwing an error if index is outside list range.
@function nth-or-null($list, $index) { @return if(length($list) >= $index, nth($list, $index), null);
}
$logo-color : maroon;
$body-color : whitesmoke;
$h1-color : maroon;
$h2-color : maroon;
$h3-color : maroon;
$text-color : #282828;
$link-color : maroon;
html { box-sizing: box-model; }
*, *:before, *:after { box-sizing: inherit; }
header,main,nav,article,section,figure,figcaption,code{ display:block;position: relative; }
@include google-font{ @include google-font(Lato, 300 400 700); @include google-font(Lato, 300 400 700, italic); @include google-font('Playfair Display', $text: '“”‘’"\''); @include google-font('Lateef');
}
p { font: 400 16px/1.3 'Lato', sans-serif; color: $text-color; }
h1 { font: 300 36px/1.3 'Lato', sans-serif; color: $h1-color; }
h2 { font: 300 24px/1.3 'Lato', sans-serif; color: $h2-color; }
[class*="example"] {font: 400 14px/1.3 'Lato', sans-serif; color: white; }
a {color: $link-color; text-decoration: none; &:hover { text-decoration: underline;
}}
strong { font: inherit; font-weight: 700; }
em { font: inherit; font-style: italic; }
p { max-width: 600px; }
blockquote { padding:0; margin:20px 0; &:before { content: '“'; font-family: 'Playfair Display'; font-size:16px; } &:after { content: '”'; font-family: 'Playfair Display'; font-size:16px; }
}
[data-related-pens] { background: $logo-color; }
body { background: $body-color;
}
article { margin:-20px auto 40px; max-width: 900px; border-radius: 7px; padding: 20px 40px 0; background: white; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
[class*="example"]{ float:left; margin: 1%; width:23%; p { padding:0 4%; color:white; text-align:center; line-height:250%; }
}
.example-1 { @include aspect-ratio(); background: darken($logo-color,10%);
}
.example-2 { @include aspect-ratio(16,9); background: darken($logo-color,5%);
}
.example-3 { @include aspect-ratio(9/16); background: $logo-color;
}
.example-4 { @include aspect-ratio($ratio: 4/3); background: lighten($logo-color,5%);
}
.example-5 { @include aspect-ratio($ratio: 4/3); background: lighten($logo-color,10%); p + p { line-height:1.3; opacity:.3; } &:before { width:100%; margin-right:-100%; background:rgba(black,.3); }
}
section { clear:left;}
.note { color:#999; margin: 60px 0;}

Responsive Aspect-Ratio SCSS Mixin - Script Codes JS Codes

//
// Editor: //cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js
var theme='ace/theme/tomorrow';
var mode='ace/mode/scss';
var editors = document.querySelectorAll('[data-ace-mode]');
console.log( editors.length );
for(var i=0,l=editors.length;i<l;++i){ var editor= ace.edit(editors[i]); if(editors[i].getAttribute('data-ace-theme')){ editor.setTheme('ace/theme/'+editors[i].getAttribute('data-ace-theme')); } else { editor.setTheme(theme); } if(editors[i].getAttribute('data-ace-mode')){ editor.getSession().setMode('ace/mode/'+editors[i].getAttribute('data-ace-mode')); } else { editor.getSession().setMode(mode); } editor.renderer.setShowGutter(false); editor.setShowPrintMargin(false); editor.setShowPrintMargin(false); editor.setDisplayIndentGuides(false); editor.setOptions({ maxLines: Infinity, //readOnly: false, highlightActiveLine: false, highlightGutterLine: false });
}
Responsive Aspect-Ratio SCSS Mixin - Script Codes
Responsive Aspect-Ratio SCSS Mixin - Script Codes
Home Page Home
Developer Jakob-e
Username jakob-e
Uploaded July 04, 2022
Rating 4.5
Size 8,503 Kb
Views 64,768
Do you need developer help for Responsive Aspect-Ratio SCSS Mixin?

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!

Jakob-e (jakob-e) Script Codes
Name
Encode SVG SCSS
The 100
Slide to Navigation
SCSS Unit Conversion
Video wallpaper and css filters
Maintain aspect ratio or fit to content
SVG Path Circle
Navigation highlighting using waypoints.js
Baseline, Scale and Element Queries
Profile Top
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!