mirror of https://github.com/Wilfred/difftastic/
527 lines
12 KiB
Plaintext
527 lines
12 KiB
Plaintext
==============================
|
|
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)))))
|