Generated by SassMeister.com.

input.scss

$queries: (
	default: 'all',
	sm: '>xsmall',
	md: '>small',
	lg: '>medium',
	xl: '>large',
);

@mixin responsive-classes($classname) {
	@each $breakpointname, $query in $queries {
		@media($query) {
			$prefix: #{if($breakpointname == 'default', '', $breakpointname + '\\\:')};
			.#{$prefix + $classname} {
				@content;
			}
		}
	}
}

@for $i from 2 through 6 {
	@for $j from 1 through $i - 1 {
    	@include responsive-classes(w-#{$j}\/#{$i}) {
    		inline-size: #{$j / $i * 100%};
    	}
	}
}

output.css

@media (all) {
  .w-1\/2 {
    inline-size: 50%;
  }
}
@media (>xsmall) {
  .sm\:w-1\/2 {
    inline-size: 50%;
  }
}
@media (>small) {
  .md\:w-1\/2 {
    inline-size: 50%;
  }
}
@media (>medium) {
  .lg\:w-1\/2 {
    inline-size: 50%;
  }
}
@media (>large) {
  .xl\:w-1\/2 {
    inline-size: 50%;
  }
}
@media (all) {
  .w-1\/3 {
    inline-size: 33.3333333333%;
  }
}
@media (>xsmall) {
  .sm\:w-1\/3 {
    inline-size: 33.3333333333%;
  }
}
@media (>small) {
  .md\:w-1\/3 {
    inline-size: 33.3333333333%;
  }
}
@media (>medium) {
  .lg\:w-1\/3 {
    inline-size: 33.3333333333%;
  }
}
@media (>large) {
  .xl\:w-1\/3 {
    inline-size: 33.3333333333%;
  }
}
@media (all) {
  .w-2\/3 {
    inline-size: 66.6666666667%;
  }
}
@media (>xsmall) {
  .sm\:w-2\/3 {
    inline-size: 66.6666666667%;
  }
}
@media (>small) {
  .md\:w-2\/3 {
    inline-size: 66.6666666667%;
  }
}
@media (>medium) {
  .lg\:w-2\/3 {
    inline-size: 66.6666666667%;
  }
}
@media (>large) {
  .xl\:w-2\/3 {
    inline-size: 66.6666666667%;
  }
}
@media (all) {
  .w-1\/4 {
    inline-size: 25%;
  }
}
@media (>xsmall) {
  .sm\:w-1\/4 {
    inline-size: 25%;
  }
}
@media (>small) {
  .md\:w-1\/4 {
    inline-size: 25%;
  }
}
@media (>medium) {
  .lg\:w-1\/4 {
    inline-size: 25%;
  }
}
@media (>large) {
  .xl\:w-1\/4 {
    inline-size: 25%;
  }
}
@media (all) {
  .w-2\/4 {
    inline-size: 50%;
  }
}
@media (>xsmall) {
  .sm\:w-2\/4 {
    inline-size: 50%;
  }
}
@media (>small) {
  .md\:w-2\/4 {
    inline-size: 50%;
  }
}
@media (>medium) {
  .lg\:w-2\/4 {
    inline-size: 50%;
  }
}
@media (>large) {
  .xl\:w-2\/4 {
    inline-size: 50%;
  }
}
@media (all) {
  .w-3\/4 {
    inline-size: 75%;
  }
}
@media (>xsmall) {
  .sm\:w-3\/4 {
    inline-size: 75%;
  }
}
@media (>small) {
  .md\:w-3\/4 {
    inline-size: 75%;
  }
}
@media (>medium) {
  .lg\:w-3\/4 {
    inline-size: 75%;
  }
}
@media (>large) {
  .xl\:w-3\/4 {
    inline-size: 75%;
  }
}
@media (all) {
  .w-1\/5 {
    inline-size: 20%;
  }
}
@media (>xsmall) {
  .sm\:w-1\/5 {
    inline-size: 20%;
  }
}
@media (>small) {
  .md\:w-1\/5 {
    inline-size: 20%;
  }
}
@media (>medium) {
  .lg\:w-1\/5 {
    inline-size: 20%;
  }
}
@media (>large) {
  .xl\:w-1\/5 {
    inline-size: 20%;
  }
}
@media (all) {
  .w-2\/5 {
    inline-size: 40%;
  }
}
@media (>xsmall) {
  .sm\:w-2\/5 {
    inline-size: 40%;
  }
}
@media (>small) {
  .md\:w-2\/5 {
    inline-size: 40%;
  }
}
@media (>medium) {
  .lg\:w-2\/5 {
    inline-size: 40%;
  }
}
@media (>large) {
  .xl\:w-2\/5 {
    inline-size: 40%;
  }
}
@media (all) {
  .w-3\/5 {
    inline-size: 60%;
  }
}
@media (>xsmall) {
  .sm\:w-3\/5 {
    inline-size: 60%;
  }
}
@media (>small) {
  .md\:w-3\/5 {
    inline-size: 60%;
  }
}
@media (>medium) {
  .lg\:w-3\/5 {
    inline-size: 60%;
  }
}
@media (>large) {
  .xl\:w-3\/5 {
    inline-size: 60%;
  }
}
@media (all) {
  .w-4\/5 {
    inline-size: 80%;
  }
}
@media (>xsmall) {
  .sm\:w-4\/5 {
    inline-size: 80%;
  }
}
@media (>small) {
  .md\:w-4\/5 {
    inline-size: 80%;
  }
}
@media (>medium) {
  .lg\:w-4\/5 {
    inline-size: 80%;
  }
}
@media (>large) {
  .xl\:w-4\/5 {
    inline-size: 80%;
  }
}
@media (all) {
  .w-1\/6 {
    inline-size: 16.6666666667%;
  }
}
@media (>xsmall) {
  .sm\:w-1\/6 {
    inline-size: 16.6666666667%;
  }
}
@media (>small) {
  .md\:w-1\/6 {
    inline-size: 16.6666666667%;
  }
}
@media (>medium) {
  .lg\:w-1\/6 {
    inline-size: 16.6666666667%;
  }
}
@media (>large) {
  .xl\:w-1\/6 {
    inline-size: 16.6666666667%;
  }
}
@media (all) {
  .w-2\/6 {
    inline-size: 33.3333333333%;
  }
}
@media (>xsmall) {
  .sm\:w-2\/6 {
    inline-size: 33.3333333333%;
  }
}
@media (>small) {
  .md\:w-2\/6 {
    inline-size: 33.3333333333%;
  }
}
@media (>medium) {
  .lg\:w-2\/6 {
    inline-size: 33.3333333333%;
  }
}
@media (>large) {
  .xl\:w-2\/6 {
    inline-size: 33.3333333333%;
  }
}
@media (all) {
  .w-3\/6 {
    inline-size: 50%;
  }
}
@media (>xsmall) {
  .sm\:w-3\/6 {
    inline-size: 50%;
  }
}
@media (>small) {
  .md\:w-3\/6 {
    inline-size: 50%;
  }
}
@media (>medium) {
  .lg\:w-3\/6 {
    inline-size: 50%;
  }
}
@media (>large) {
  .xl\:w-3\/6 {
    inline-size: 50%;
  }
}
@media (all) {
  .w-4\/6 {
    inline-size: 66.6666666667%;
  }
}
@media (>xsmall) {
  .sm\:w-4\/6 {
    inline-size: 66.6666666667%;
  }
}
@media (>small) {
  .md\:w-4\/6 {
    inline-size: 66.6666666667%;
  }
}
@media (>medium) {
  .lg\:w-4\/6 {
    inline-size: 66.6666666667%;
  }
}
@media (>large) {
  .xl\:w-4\/6 {
    inline-size: 66.6666666667%;
  }
}
@media (all) {
  .w-5\/6 {
    inline-size: 83.3333333333%;
  }
}
@media (>xsmall) {
  .sm\:w-5\/6 {
    inline-size: 83.3333333333%;
  }
}
@media (>small) {
  .md\:w-5\/6 {
    inline-size: 83.3333333333%;
  }
}
@media (>medium) {
  .lg\:w-5\/6 {
    inline-size: 83.3333333333%;
  }
}
@media (>large) {
  .xl\:w-5\/6 {
    inline-size: 83.3333333333%;
  }
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}