==============================
Import statements
==============================

@import url("fineprint.css") print;
@import url("bluish.css") speech;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen;

---

(stylesheet
  (import_statement (call_expression (function_name) (arguments (string_value))) (keyword_query))
  (import_statement (call_expression (function_name) (arguments (string_value))) (keyword_query))
  (import_statement (string_value))
  (import_statement (call_expression (function_name) (arguments (string_value))))
  (import_statement (string_value) (keyword_query)))

==============================
Namespace statements
==============================

/* Default namespace */
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/* Prefixed namespace */
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";

---

(stylesheet
  (comment)
  (namespace_statement (call_expression (function_name) (arguments (plain_value))))
  (namespace_statement (string_value))
  (namespace_statement (call_expression (function_name) (arguments (plain_value))))
  (namespace_statement (namespace_name) (call_expression (function_name) (arguments (plain_value))))
  (comment)
  (namespace_statement (namespace_name) (call_expression (function_name) (arguments (plain_value))))
  (namespace_statement (namespace_name) (string_value)))

==============================
Keyframes statements
==============================

@keyframes important1 {
  from { margin-top: 50px; }
  50%  { margin-top: 150px !important; } /* ignored */
  to   { margin-top: 100px; }
}

---

(stylesheet
  (keyframes_statement (keyframes_name) (keyframe_block_list
    (keyframe_block (from) (block (declaration (property_name) (integer_value (unit)))))
    (keyframe_block (integer_value (unit)) (block (declaration (property_name) (integer_value (unit)) (important))))
    (comment)
    (keyframe_block (to) (block (declaration (property_name) (integer_value (unit))))))))

==============================
Media statements
==============================

@media screen and (min-width: 30em) and (orientation: landscape) {}
@media (min-height: 680px), screen and (orientation: portrait) {}
@media not all and (monochrome) {}
@media only screen {}

---

(stylesheet
  (media_statement
    (binary_query
      (binary_query
        (keyword_query)
        (feature_query (feature_name) (integer_value (unit))))
      (feature_query (feature_name) (plain_value)))
    (block))
  (media_statement
    (feature_query (feature_name) (integer_value (unit)))
    (binary_query (keyword_query) (feature_query (feature_name) (plain_value)))
    (block))
  (media_statement
    (binary_query (unary_query (keyword_query)) (parenthesized_query (keyword_query)))
    (block))
  (media_statement (unary_query (keyword_query)) (block)))

==============================
Supports statements
==============================

@supports (animation-name: test) {
  div { animation-name: test; }
}
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}
@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {}
@supports not selector(:matches(a, b)) {}

---

(stylesheet
  (supports_statement
    (feature_query (feature_name) (plain_value))
    (block
      (rule_set (selectors (tag_name)) (block
        (declaration (property_name) (plain_value))))))
  (supports_statement
    (binary_query
      (feature_query (feature_name) (plain_value))
      (feature_query (feature_name) (plain_value)))
    (block))
  (supports_statement
    (unary_query (parenthesized_query (binary_query
      (feature_query (feature_name) (plain_value))
      (feature_query (feature_name) (plain_value)))))
    (block))
  (supports_statement
    (unary_query (selector_query (pseudo_class_selector
      (class_name)
      (arguments (tag_name) (tag_name)))))
    (block)))

==============================
Charset statements
==============================

@charset "utf-8";

---

(stylesheet
  (charset_statement (string_value)))

==============================
Other at-statements
==============================

@font-face {
  font-family: "Open Sans";
  src: url("/a") format("woff2"), url("/b/c") format("woff");
}

---

(stylesheet
  (at_rule
    (at_keyword)
    (block
      (declaration (property_name) (string_value))
      (declaration (property_name)
        (call_expression (function_name) (arguments (string_value)))
        (call_expression (function_name) (arguments (string_value)))
        (call_expression (function_name) (arguments (string_value)))
        (call_expression (function_name) (arguments (string_value)))))))

==============================
Single-line comments
==============================

// https://awardwinningfjords.com/2010/04/09/example-scss-sassy-css-file.html

html {
  background: url(https://google.com);
}

---

(stylesheet
  (single_line_comment)
  (rule_set
    (selectors (tag_name))
    (block
      (declaration (property_name) (call_expression (function_name) (arguments (plain_value)))))))

==============================
Use statements
==============================

@use 'custom.css';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

---

(stylesheet
  (use_statement (string_value))
  (rule_set
    (selectors (class_selector (class_name)))
    (block
      (declaration (property_name) (variable_value))
      (declaration (property_name) (plain_value)))))

==============================
Forward statements
==============================

@forward 'custom.css';

---

(stylesheet
  (forward_statement (string_value)))

==============================
Include statements
==============================

.foo {
  @include bar;
  @include transform(50px, $float: left);
}

---

(stylesheet
  (rule_set
    (selectors (class_selector (class_name)))
    (block
      (include_statement (identifier))
      (include_statement (identifier)
        (arguments
          (argument (argument_value (integer_value (unit))))
          (argument (argument_name) (argument_value (plain_value))))))))

==============================
Extend statements
==============================

.foo {
  @extend red;
  .bar {
    @extend blue;
    @extend .green;
  }
}

---

(stylesheet
  (rule_set
    (selectors (class_selector (class_name)))
    (block
      (extend_statement (plain_value))
      (rule_set 
        (selectors (class_selector (class_name)))
        (block (extend_statement (plain_value)) 
          (extend_statement (class_selector (class_name)))))))) 

==============================
Apply statements
==============================

@apply fill-red-50 border-black col-span-1;

---

(stylesheet
  (apply_statement (plain_value) (plain_value) (plain_value)))

=================================
Operators
=================================

article[role="main"] {
  width: 600px / 960px * 100%;
}

---

(stylesheet
  (rule_set
    (selectors (attribute_selector (tag_name) (attribute_name) (string_value)))
    (block
      (declaration (property_name)
        (binary_expression
          (binary_expression (integer_value (unit)) (integer_value (unit))) (integer_value (unit)))))))

=================================
Interpolation
=================================

.icon-#{$name} {
  position: absolute;
  #{$top-or-bottom}: 0;
}

---

(stylesheet
  (rule_set
    (selectors (class_selector (class_name)))
    (block
      (declaration (property_name) (plain_value))
      (declaration (property_name) (integer_value)))))

=================================
If statements
=================================

@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: $size / 2;
  }
}

---

(stylesheet
  (mixin_statement
    (name)
    (parameters
      (parameter (variable_name))
      (parameter (variable_name) (default_value (plain_value))))
    (block
      (declaration (property_name) (variable_value))
      (declaration (property_name) (variable_value))
      (if_statement
        (if_clause
          (condition (variable_value))
          (block
            (declaration (property_name) (binary_expression (variable_value) (integer_value)))))))))

=================================
Else statements
=================================

@mixin theme-colors($light-theme: true) {
  @if $light-theme {
    color: $light-text;
  } @else {
    color: $dark-text;
  }
}

---

(stylesheet
  (mixin_statement
    (name)
    (parameters
      (parameter (variable_name) (default_value (plain_value))))
    (block
      (if_statement
        (if_clause
          (condition (variable_value))
          (block (declaration (property_name) (variable_value))))
        (else_clause
          (block (declaration (property_name) (variable_value))))))))

=================================
Else if statements
=================================

@mixin triangle($direction) {
  @if $direction == up {
    border-bottom-color: $color;
  } @else if $direction == right {
    border-left-color: $color;
  } @else if $direction == down {
    border-top-color: $color;
  } @else {
    border-right-color: $color;
  }
}

---

(stylesheet
  (mixin_statement
  (name)
  (parameters
    (parameter (variable_name)))
  (block
    (if_statement
      (if_clause
        (condition (binary_expression (variable_value) (plain_value)))
        (block (declaration (property_name) (variable_value))))
      (else_if_clause
        (condition (binary_expression (variable_value) (plain_value)))
        (block (declaration (property_name) (variable_value))))
      (else_if_clause
        (condition (binary_expression (variable_value) (plain_value)))
        (block (declaration (property_name) (variable_value))))
      (else_clause
        (block (declaration (property_name) (variable_value))))))))

=================================
Each statements
=================================

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
  }
}

---

(stylesheet
  (each_statement
    (value)
    (variable_value)
    (block
      (rule_set
        (selectors (class_selector (class_name)))
        (block (declaration (property_name) (variable_value)))))))

=================================
For statements
=================================

@for $i from 1 through 3 {
  background-color: lighten($base-color, $i * 5%);
}

---

(stylesheet
  (for_statement
    (variable)
    (from (integer_value))
    (through (integer_value))
    (block
      (declaration
        (property_name)
        (call_expression
          (function_name)
          (arguments (variable_value)
          (binary_expression (variable_value) (integer_value (unit)))))))))

=================================
While statements
=================================

@while $i < 3 {
  background-color: lighten($base-color, $i * 5%);
  $i: $i + 1;
}

---

(stylesheet
  (while_statement
    (binary_expression (variable_value) (integer_value))
    (block
      (declaration
        (property_name)
        (call_expression
          (function_name)
          (arguments (variable_value) (binary_expression (variable_value) (integer_value (unit))))))
      (declaration (variable_name) (binary_expression (variable_value) (integer_value))))))

=================================
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;
}

---

(stylesheet
  (function_statement
    (name)
    (parameters
      (parameter (variable_name))
      (parameter (variable_name)))
    (block
      (declaration (variable_name) (integer_value))
      (for_statement
        (variable)
        (from (integer_value))
        (through (variable_value))
        (block
          (declaration (variable_name) (binary_expression (variable_value) (variable_value)))))
      (return_statement (variable_value))))
  (rule_set
    (selectors (class_selector (class_name)))
    (block
      (declaration (property_name) (plain_value))
      (declaration
        (property_name)
          (binary_expression
            (call_expression (function_name) (arguments (integer_value) (integer_value)))
            (integer_value (unit)))))))

=================================
Logging statements
=================================

@mixin foo {
  @debug "debug";
  @warn "warn";
  @error "error";
}

---

(stylesheet
  (mixin_statement
    (name)
    (block
      (debug_statement (string_value))
      (warn_statement (string_value))
      (error_statement (string_value)))))
