Skip to content

Instantly share code, notes, and snippets.

@adarsh0d

adarsh0d/input.scss

Created August 31, 2021 11:39
Show Gist options
  • Save adarsh0d/ac91d5de87766ab7729f0e3bad2a2b96 to your computer and use it in GitHub Desktop.
Save adarsh0d/ac91d5de87766ab7729f0e3bad2a2b96 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
input.scss
//Modules
@use "sass:map";
//variables
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
//nesting
#content{
font-size: 12px;
&, a{
color: #333;
}
}
.enlarge {
font-size: 14px;
transition: {
property: font-size;
duration: 4s;
delay: 0.5s;
}
&:hover { font-size: 36px; }
}
//Hidden properties
$rounded-corners: false;
.button {
border: 1px solid black;
border-radius: if($rounded-corners, 5px, null);
}
//Default
$page-color: #333;
$page-color: #666 !default;
$section-color: #999 !default;
body {
color: $page-color;
}
.section {
color: $section-color;
}
//Mixing
@mixin theme($theme: DarkGray) {
background: $theme;
box-shadow: 0 0 1px rgba($theme, .25);
color: #fff;
}
.info {
@include theme;
}
.alert {
@include theme($theme: DarkRed);
}
.success {
@include theme($theme: DarkGreen);
}
//extends
.serious-error{
@extend .alert;
font-weight: bold;
}
//Mathematics
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}
//Interpolation
$class-name: wrapper;
$attribute-name: font;
div.#{$class-name}{
#{$attribute-name}-size: 12px;
}
//Control Directives
$type: small;
p {
@if $type == large {
font-size: 24px;
} @else if $type == medium{
font-size: 18px;
} @else {
font-size: 16px;
}
}
//Looping
//@for
@for $i from 1 through 3 {
.for-#{$i} {
width: 10px * $i;
}
}
//@each
@each $item in item1, item2{
.#{$item}{
width: 500px;
}
}
//@while
$i: 6;
@while $i > 0 {
.while-#{$i} {
width: 10px * $i;
}
$i: $i - 2;
}
//Maps
$theme-colors: (
"primary": #28a745,
"information": #17a2b8,
"warning": #ffc107,
);
.color-pallet {
// Instead of $theme-color-#{warning}
background-color: map.get($theme-colors, "warning");
}
@each $key, $value in $theme-colors {
.#{$key} {
background-color: $value;
}
}
$font-weights: ("regular": 400, "medium": 500, "bold": 700);
.font-medium {
font-weight: map.get($font-weights, "medium");
}// 500
//Immutable set
$font-weights: map.set($font-weights, "extra-bold", 900);
.font-bold {
font-weight: map.get($font-weights, "extra-bold");
}// 900
//merge
$light-weights: ("lightest": 100, "light": 300);
$heavy-weights: ("medium": 500, "bold": 700);
$light-weights: map.merge($light-weights, $heavy-weights);
.font-medium {
font-weight: map.get($light-weights, "medium");
}
//deep merge
$helvetica-light: (
"weights": (
"lightest": 100,
"light": 300
)
);
$helvetica-heavy: (
"weights": (
"medium": 500,
"bold": 700
)
);
$weights: map.deep-merge($helvetica-light, $helvetica-heavy);
.halvetica {
font-weight: map.get($weights, "bold");
}
//functions
@function pow($base, $exponent) {
$result: 1;
@for $_ from 1 through $exponent {
$result: $result * $base;
}
@return $result;
}
.sidebar {
float: left;
margin-left: pow(4, 3) * 1px;
}
//@error
// @mixin reflexive-position($property, $value) {
// @if $property != left and $property != right {
// @error "Property #{$property} must be either left or right.";
// }
// $left-value: if($property == right, initial, $value);
// $right-value: if($property == right, $value, initial);
// }
// .top {
// @include reflexive-position(top, 12px);
// // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// // Error: Property top must be either left or right.
// }
//List
$sizes: 40px, 50px, 80px;
@each $size in $sizes {
.icon-#{$size} {
font-size: $size;
height: $size;
width: $size;
}
}
Raw
markup.html
<body>
<div class="info">This is info</div>
<div class="alert">This is alert</div>
<div class="success">This is success</div>
<div class="serious-error">This is success</div>
<div class="container">
<article role="main">
This is main article
</article>
<aside role="complimentary">
This is complimentary
</aside>
</div>
<div id="content">
<div class="enlarge">
Zoom this
</div>
<button class="button">
Rounded Button
</button>
</div>
</body>
Raw
output.css
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
#content {
font-size: 12px;
}
#content, #content a {
color: #333;
}
.enlarge {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 0.5s;
}
.enlarge:hover {
font-size: 36px;
}
.button {
border: 1px solid black;
}
body {
color: #333;
}
.section {
color: #999;
}
.info {
background: DarkGray;
box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
color: #fff;
}
.alert, .serious-error {
background: DarkRed;
box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
color: #fff;
}
.success {
background: DarkGreen;
box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
color: #fff;
}
.serious-error {
font-weight: bold;
}
.container {
width: 100%;
}
article[role=main] {
float: left;
width: 62.5%;
}
aside[role=complementary] {
float: right;
width: 31.25%;
}
div.wrapper {
font-size: 12px;
}
p {
font-size: 16px;
}
.for-1 {
width: 10px;
}
.for-2 {
width: 20px;
}
.for-3 {
width: 30px;
}
.item1 {
width: 500px;
}
.item2 {
width: 500px;
}
.while-6 {
width: 60px;
}
.while-4 {
width: 40px;
}
.while-2 {
width: 20px;
}
.color-pallet {
background-color: #ffc107;
}
.primary {
background-color: #28a745;
}
.information {
background-color: #17a2b8;
}
.warning {
background-color: #ffc107;
}
.font-medium {
font-weight: 500;
}
.font-bold {
font-weight: 900;
}
.font-medium {
font-weight: 500;
}
.sidebar {
float: left;
margin-left: 64px;
}
.icon-40px {
font-size: 40px;
height: 40px;
width: 40px;
}
.icon-50px {
font-size: 50px;
height: 50px;
width: 50px;
}
.icon-80px {
font-size: 80px;
height: 80px;
width: 80px;
}
Raw
settings.json
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment