Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="no-js">
  <ul class="c-cards c-cards--rounded">
  <li class="c-cards__card"></li>
  <li class="c-cards__card"></li>
  <li class="c-cards__card"></li>
 </ul>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

// `.qux` was added to make it clear that `&` is a list of lists of strings
.foo.bar, .qux{
  $selector: &;
  selector: $selector; // => ((foo.bar,), (.qux,))
  type-of-selector: type-of($selector); // => list
  
  $first-selector: nth($selector, 1);
  first-selector: $first-selector; // => (foo.bar,)
  first-selector_type: type-of($first-selector); // => list
  
  $map: (
   $first-selector: "baz",
   foo: (
    bar: "qux"
   ),
   ("foo",): (
    bar: "waldo"
   ),
   nth($first-selector, 1): "garply" // => ".foo.bar": garply
  );
  
  
  $keys: map-keys($map);
  keys: $keys; // => ((.foo.bar .qux,), foo, .foo.bar)
  
  key-1: nth($keys, 1); // => (.foo.bar, .qux)
  key-1_type: type-of(nth($keys, 1)); // => list
  
  key-2: nth($keys, 2); // => "foo"
  key-2_type: type-of(nth($keys, 2)); // => string
  
  key-3: nth($keys, 3); // => ".foo.bar"
  key-3_type: type-of(nth($keys, 3)); // => string
  
  // getting the value of `$first-selector` in map
  get-test_selector: map-get($map, $first-selector); // => "baz"
  
  // getting the value of key that is a list
  get-test_list: inspect(map-get($map, ("foo",))); // => (bar: waldo)
  
  // getting a the value of a key when it contains a `.` in the name
  get-test_string-with-dot: map-get($map, ".foo.bar"); // => "garply"
}

// Both cases can still use dot/bracket notation with out any special functions being added
// test-1: $map[nth(&, 1)]; // => "baz"
// test-2: $map[".foo.bar"]

SassMeister-output.css

.foo.bar, .qux {
  selector: .foo.bar, .qux;
  type-of-selector: list;
  first-selector: .foo.bar;
  first-selector_type: list;
  keys: .foo.bar, foo, "foo", .foo.bar;
  key-1: .foo.bar;
  key-1_type: list;
  key-2: foo;
  key-2_type: string;
  key-3: "foo";
  key-3_type: list;
  get-test_selector: "baz";
  get-test_list: (bar: "waldo");
  get-test_string-with-dot: "garply";
}

SassMeister-rendered.html

<div class="no-js">
  <ul class="c-cards c-cards--rounded">
  <li class="c-cards__card"></li>
  <li class="c-cards__card"></li>
  <li class="c-cards__card"></li>
 </ul>
</div>