adarsh0d · August 31, 2021 10:42
diff --git a/input.scss b/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: (
  "success": #28a745,
  "info": #17a2b8,
  "warning": #ffc107,
 );

 .color-pallet {
  // Instead of $theme-color-#{warning}
  background-color: map.get($theme-colors, "warning");
 }

 @each $color in $theme-colors{
    .#{$item}{
        width: 500px;
    }
 }
diff --git a/markup.html b/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>
diff --git a/output.css b/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;
 }

 .item1 {
  width: 500px;
 }

 .item2 {
  width: 500px;
 }
diff --git a/settings.json b/settings.json
 {
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
 }
	//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: (
	"success": #28a745,
	"info": #17a2b8,
	"warning": #ffc107,
	);

	.color-pallet {
	// Instead of $theme-color-#{warning}
	background-color: map.get($theme-colors, "warning");
	}

	@each $color in $theme-colors{
	.#{$item}{
	width: 500px;
	}
	}
	<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>
	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;
	}

	.item1 {
	width: 500px;
	}

	.item2 {
	width: 500px;
	}
	{
	"sass": {
	"compiler": "dart-sass/1.32.12",
	"extensions": {},
	"syntax": "SCSS",
	"outputStyle": "expanded"
	},
	"autoprefixer": false
	}