/*
* css extensions
*/
div {
color: #00ff00;
// nested rules
#inner.element {
color: #000000;
}
// parent selector
&:hover {
text-decoration: underline;
}
body.firefox & {
font-weight: normal;
}
&__element, // compound selector
&--modifier {
border: 1px;
}
// nested properties
font: {
family: fantasy;
size: 30em;
weight: bold;
}
font: 20px/24px fantasy {
weight: bold;
}
}
/*
* variables, data types
*/
// assignment
$number: 5em;
$double-quoted-string: "foo";
$single-quoted-string: 'bar';
$not-quoted-string: baz;
$true: true;
$false: false;
$null: null;
$parens-spaces-list: (left top);
$parens-commas-list: (1px, 2px, 3px, 4px);
$no-parens-spaces-list: 1px 2px 3px 4px;
$no-parens-commas-list: arial, some-other-arial, sans-serif;
$trailing-comma: (1 2 3,); // a comma-separated list containing a space-separated list
$bracketed-list: [5rem 6rem 7rem]; // comma or space separated
$map: (medium: 640, 'large': 960, "x-large": 1280, (xx-large,): 1600); // must have parentheses, be comma separated
$color: #fe57a1;
$function-reference: get-function($function-name);
// assign if not already assigned to
$var: 1 !default;
#main {
// global variable defined in block
$width: 5em !global;
// list of parent selectors
$selectors: &;
// property value
width: $width;
}
// media feature test
@import "foo" ($orientation: $landscape);
@media ($orientation-landscape) {
width: 700px;
}
// font feature value
@font-feature-values Font One {
@styleset {
nice-style: $value;
}
}
// @supports test
@supports ($animation-name: $test) {
body {
animation-name: test;
}
}
@supports ($animation-name-test) {
body {
animation-name: test;
}
}
// @at-root query
@at-root ($type: $value) {
.top-level {
background: pink;
}
}
@at-root ($query) {
.top-level {
background: pink;
}
}
/*
* operations
*/
body {
// arithmetic operators
width: (1px + (2em - 3rem)) * (4 / 5vh) % 6cm;
// plain css
font: 10px/8px;
font: (italic bold 10px/8px);
font: #{$font-size}/#{$line-height};
// division
width: $width/2;
width: round(1.5)/2;
width: (500px/2);
width: 5px + 8px/2px;
// minus sign
animation-name: a-1; // identifier
margin: (5px - 3px) 5px-3px 3-2 (1 -$var); // subtraction
margin: 1 -3em; // negative number
margin: -$var -(1); // unary negation
// string concatenation
content: "Foo " + Bar; // "Foo Bar"
font-family: sans- + "serif"; // sans-serif
}
// string concatenation in string-only context
@keyframes ('foo' + bar) {}
@keyframes (foo + "bar") {}
// comparison operators, logical operators
$a: (1 < 2 and 1 > 2) or (1 <= 2) and 1 >= 2;
$b: not (1 == 2) and 1 != 2;
/*
* interpolation
*/
// selector
#{'#id'},
#i#{'d'},
#{'.whole-class'},
.part-#{'class'}-fragment,
#{'div'},
d#{'i'}v,
[#{'attr'}=#{'value'}],
[#{'attr="value"'}],
#{'[attr="value"]'},
#{'::selection'},
::se#{'lect'}ion,
#{':hover'},
:ho#{'v'}er,
#{':lang(fr)'},
:la#{'ng(f'}r),
:lang(#{'fr'}),
:nth-child(#{'2n+1'}),
:not(#{'div'}),
#{'%placeholder'},
%pla#{'ceho'}lder {
// property name
#{'font'}: serif;
background-#{'image'}: none;
border-#{'bottom'}-width: 0;
// property value
font-size: #{$font-size};
font-family: #{'arial, sans'}-serif;
width: #{5 * (3 - 1)}px;
// function name
background: #{'url'}('image.png');
background: u#{'r'}l('image.png');
// !important (exclamation mark needs to be inside)
width: 0 #{'!important'};
width: 0 #{'!import'}ant;
// inside strings
content: "#{$var}";
content: '#{$var}';
// inside comments
/* multi-line: #{$yes} */
// single line: #{$no}
}
// media type, feature test
@import "foo" #{'screen'} and (#{'orientation'}: #{'landscape'});
@media #{'screen'} and (#{'orientation: landscape'}) {
width: 700px;
}
// font name, font feature custom name, font feature value
@font-feature-values #{'Font One'} {
@styleset { // interpolation not accepted here?
#{'nice-style'}: #{12};
}
}
// inside @import url()
@import url("http://fonts.googleapis.com/css?family=#{$family}");
// @keyframes name, selector
@keyframes #{'myanim'} {
#{'from'} { width: 0; }
#{'to'} { width: 100%; }
}
// @namespace name
@namespace #{'svg'} url('http://www.w3.org/2000/svg');
// @page custom name, pseudo-page
@page #{'toc'}, #{':first'} {
margin: 0;
@left-top { // interpolation not accepted here?
content: '';
}
}
// @supports test
@supports (#{'animation-name'}: #{'test'}) {
body {
animation-name: test;
}
}
@supports (#{'animation-name: test'}) {
body {
animation-name: test;
}
}
// @at-root query
@at-root (#{'without'}: #{'media'}) {
.top-level {
background: pink;
}
}
@at-root (#{'without: media'}) {
.top-level {
background: pink;
}
}
/*
* functions
*/
body {
// single line comments not parsed inside url()
background: url(http://example.com/styles.css);
// keyword arguments
color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}
/*
* at-rules
*/
// @import
@import "rounded-corners", "text-shadow"; // multiple files
#main { // nested @import
@import "example"; // but not inside mixins or control directives
}
// nested @media
@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}
// @extend
#main {
@extend #hello;
// no error if not found
@extend .from[the="other-side"] !optional;
// placeholder selector
@extend div%placeholder;
}
// @at-root
#main {
@at-root .child {
color: red;
}
}
@media screen {
@supports (font-variant-alternates: styleset(nice-style)) {
@at-root (without: media supports) { // with query
.absolutely-top-level {
background: pink;
}
}
}
}
// @if/@else if/@else, @debug/@warn/@error
@if $num-errors == 0 {
@debug "$num-errors is 0";
} @else if $num-errors > 0 {
@warn "oops there are #{$num-errors} errors";
} @else {
@error "negative errors?!?";
}
// @for
@for $i from 1 through 3 {
.item-#{$i} {
width: 2em * $i;
}
}
// @each
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}
// @while
$i: 6;
@while $i > 0 {
.item-#{$i} {
width: 2em * $i;
}
$i: $i - 2;
}
// @mixin
@mixin large-text {
font-size: 128px;
}
@mixin sexy-border($color, $width: 1in) { // with arguments, default value
border: {
color: $color;
width: $width;
}
}
@mixin box-shadow($shadows...) { // variable arguments
box-shadow: $shadows;
}
@mixin apply-to-ie6-only { // accepts content block
* html {
@content;
}
}
// @include
.page-title {
@include large-text;
}
p {
@include sexy-border(blue); // with arguments
}
div {
@include sexy-border($color: blue, $width: 10cm); // keyword arguments
}
.primary {
@include box-shadow($shadows...); // expand list into arguments
}
@include apply-to-ie6-only { // passing content block
display: block;
#main {
background: black;
}
}
// @function
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar {
width: grid-width(5);
}
/*
* test cases
*/
.declarations-or-selectors {
// declarations
display:block;
font-family:arial;
font: {
family: fantasy;
weight: bold;
}
font: fantasy {
size: 20px;
style: italic;
}
#{$property}:block;
#{$property}: {
color: red;
}
color:#000;
width:#{$width};
// selectors
input:focus {
opacity: 0.5;
}
div:nth-child(2n+1) {
background-color: gray;
}
div:-moz-full-screen {
display: block;
}
a:#{$state} {
color: blue;
}
#{$selector}:focus {
color: blue;
}
}
// from file.css
/*
* general
*/
/* whitespace */
#main
{
color:aqua;
float: left!important;
margin : 0 ;
width
:
100%
!
important
;
}
/* case insensitivity */
Body {
FONT: 12Px/16pX iTaLiC sans-SERIF;
}
/*
* selectors
*/
/* simple selectors */
#testID, /* id */
.someclass, /* class */
div, /* type */
*, /* universal */
[lang|="zh"] { /* attribute */
color: black;
}
/* combinators */
header + main, /* adjacent sibling */
li ~ li, /* general sibling */
ul > li, /* child */
ul ul { /* descendant */
color: blue;
}
/* pseudo-elements */
:after,
::after,
::placeholder,
::selection {
color: green;
}
/* pseudo-classes */
:hover,
:required,
:lang(fr),
:not(div#sidebar.fancy),
:nth-child(n+1),
:nth-last-child(-2n - 30),
:nth-of-type(5),
:nth-last-of-type(even) {
color: yellow;
}
/* pseudo-classes with invalid arguments */
:not(div:before), /* pseudo-element */
:not(input::placeholder), /* pseudo-element */
:not(p:not(:lang(en))), /* nested :not */
:nth-child(1.2n), /* non-integer */
:nth-child(.5), /* non-integer */
:nth-child(n+-1) { /* number sign */
color: red;
}
/* namespace qualified */
a, /* type in default namespace */
svg|a, /* type in specified namespace */
|a, /* type in no namespace */
*|a, /* type in all namespaces (including no namespace) */
svg|*, /* universal */
svg|[fill] { /* attribute */
color: white;
}
/*
* basic data types
*/
#main {
/* angle */
transform: rotate(+33.333e+3deg);
/* color */
color: #f00;
color: #f00f; /* #rgba */
color: #ff0000;
color: #ff0000ff; /* #rrggbbaa */
color: red;
color: lightgoldenrodyellow;
color: rebeccapurple;
color: currentColor;
/* freqency (not currently used for any property) */
content: 44.1kHz;
/* integer */
z-index: +255;
z-index: -1;
/* length */
width: 10px;
width: 10.5rem;
width: -10e-2vw;
/* number */
opacity: .5;
opacity: 0.3333;
opacity: 1;
opacity: 2e-34;
/* percentage */
width: 100%;
/* string */
content: "double quoted";
content: 'single quoted';
/* time */
transition-duration: .4s;
transition-duration: 400ms;
/* unicode range */
unicode-range: U+0025-00FF;
unicode-range: U+4??; /* wildcard range */
}
/* ratio */
@media (min-aspect-ratio: 16/9) {}
/* resolution */
@media (min-resolution: +2.54dpcm) {}
/*
* identifiers
*/
/* leading hyphens */
#-here.-there,
#-- .--everywhere { /* two hyphens: https://stackoverflow.com/a/30822662 */
color: blue;
}
/* non-ASCII */
#español,
#你好,
.❤♫ {
color: green;
}
/* invalid identifiers */
#1id, /* starts with digit */
.-2class { /* starts with hyphen digit */
color: maroon;
}
/*
* escaping
*/
/* selectors */
#\..\+\ space\@\>, /* special character escape */
#\E9 dition .\0000E9dition .motion_\e9motion, /* Unicode character escape */
.\e33 div, /* trailing space terminates Unicode character escape */
.\e33 div, /* extra space to denote separate tokens */
.\31 23 { /* escape leading digit of identifier */
/* property value */
content: "\E9 dition \
\"\0000E9dition\" \
\e9motion";
/* function name */
background: \u\72\l(image.png);
}
/*
* functions
*/
#main {
/* url */
background: url("image.svg");
/* function argument keywords */
background-image: linear-gradient(to left top, #fff, blue);
grid-template-columns: repeat(2, minmax(max-content, 300px) 1fr) 100px;
}
/*
* style properties
*/
#main {
/* svg */
fill: url(#pattern);
text-rendering: optimizeLegibility;
/* css3 */
font-variant-east-asian: jis04;
size: letter;
transition-timing-function: ease-in;
/* animatable */
transition-property: height, font-size, visibility;
}
/*
* modifiers
*/
body {
background: pink !important;
}
/*
* media queries
*/
@media screen, (orientation: portrait) {}
@media not (print and (min-monochrome: 16) and (color)) {}
@media only screen {} @media not print {}
/*
* at-rules
*/
/* @font-face */
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue"),
local("HelveticaNeue"),
url(MgOpenModerna.ttf);
}
/* @font-feature-values */
@font-feature-values Font One {
@styleset {
nice-style: 12;
}
}
.nice-look {
font-variant-alternates: styleset(nice-style);
}
/* @import */
@import URL("fineprint.css");
@import 'custom.css';
@import url('landscape.css') screen and (orientation: landscape), print;
/* @keyframes */
@keyframes myanim {
from { opacity: 0.0; }
50% { opacity: 0.5; }
to { opacity: 1.0; }
}
/* @media */
@media all {
body {
background: gray;
}
@media screen, (orientation: portrait) {
body {
background: grey;
}
}
}
/* @namespace */
@namespace "http://www.w3.org/1999/xhtml";
@namespace svg url(http://www.w3.org/2000/svg);
/* @page */
@page {
bleed: 1cm;
}
@page toc, :blank {
margin: 2cm;
marks: crop cross;
}
@page index:left {
size: A4;
@top-right {
content: "Page " counter(page);
}
}
/* @supports */
@supports (animation-name: test) {
@keyframes 'my-complicated-animation' {
0% { width: 0; }
100% { width: 100%; }
}
}
/*
* vendor-specific extensions
*/
/* pseudo-elements */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
/* pseudo-classes */
#page:-moz-full-screen,
#page:-ms-fullscreen,
#page:-webkit-full-screen {
background: silver;
}
/* functions */
.footer {
background-image: -webkit-linear-gradient(to left top, #fff, blue);
}
/* style properties */
#sidebar {
-ms-overflow-style: -ms-autohiding-scrollbar;
}
@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {
body {
text-align: justify;
}
}
/* at-rules */
@-webkit-keyframes myanim {
from { opacity: 0.0; }
50% { opacity: 0.5; }
to { opacity: 1.0; }
}