// Sets the height of an element

height : auto;
height : length;
height : initial;
height : inherit;

// Sets the width of an element

width : auto;
width : value;
width : initial;
width : inherit;

// Sets the color of text

color : color;
color : initial;
color : inherit;

// Specifies how a certain HTML element should be displayed

display : inline;
display : block;
display : contents;
display : flex;
display : grid;
display : inline-block;
display : inline-flex;
display : inline-grid;
display : inline-table;
display : list-item;
display : run-in;
display : table;
display : table-caption;
display : table-column-group
display : table-header-group;
display : table-footer-group;
display : table-row-group;
display : table-cell;
display : table-column;
display : table-row;
display : none;
display : initial;
display : inherit;

// Specifies whether or not a box should float

float : none;
float : left;
float : right;
float : initial;
float : inherit;

// Sets the stack order of a positioned element

z-index : auto;
z-index : number;
z-index : initial;
z-index : inherit;

// Defines effects (e.g. blurring or color shifting) on an element before the element is displayed

filter : none;
filter : blur();
filter : brightness() 
filter : contrast();
filter : drop-shadow();
filter : grayscale();
filter : hue-rotate();
filter : invert();
filter : opacity();
filter : saturate();
filter : sepia();
filter : url();

// Specifies the mouse cursor to be displayed when pointing over an element

cursor : alias;
cursor : all-scroll;
cursor : auto;
cursor : cell;
cursor : context-menu;
cursor : col-resize;
cursor : copy;
cursor : crosshair;
cursor : default;
cursor : e-resize;
cursor : ew-resize;
cursor : grab;
cursor : grabbing;
cursor : help;
cursor : move;
cursor : n-resize;
cursor : ne-resize;
cursor : nesw-resize;
cursor : ns-resize;
cursor : nw-resize;
cursor : nwse-resize;
cursor : no-drop;
cursor : none;
cursor : not-allowed;
cursor : pointer;
cursor : progress;
cursor : row-resize;
cursor : s-resize;
cursor : se-resize;
cursor : sw-resize;
cursor : text;
cursor : url(myBall.cur),auto;
cursor : w-resize;
cursor : wait;
cursor : zoom-in;
cursor : zoom-out;
cursor : alias;
cursor : all-scroll;
cursor : auto;
cursor : cell;
cursor : context-menu;
cursor : col-resize;
cursor : copy;
cursor : crosshair;
cursor : default;
cursor : e-resize;
cursor : ew-resize;
cursor : grab;
cursor : grabbing;
cursor : help;
cursor : move;
cursor : n-resize;
cursor : ne-resize;
cursor : nesw-resize;
cursor : ns-resize;
cursor : nw-resize
cursor : nwse-resize;
cursor : no-drop;
cursor : none;
cursor : not-allowed;
cursor : pointer;
cursor : progress;
cursor : row-resize;
cursor : s-resize;
cursor : se-resize
cursor : sw-resize;
cursor : text;
cursor : url(myBall.cur),auto;
cursor : w-resize;
cursor : wait;
cursor : zoom-in;
cursor : zoom-out;
cursor : initial;
cursor : inherit;

// Sets the opacity level for an element

opacity : number;
opacity : initial;
opacity : inherit;

// Sets the order of the flexible item, relative to the rest

order : number;
order : initial;
order : inherit;

// Defines whether or not an element reacts to pointer events

pointer-events : auto;
pointer-events : none;

// Specifies the type of positioning method used for an element (static, relative, absolute or fixed)

position : static;
position : absolute;
position : fixed;
position : relative;
position : sticky;
position : initial;
position : inherit;

// Specifies how white-space inside an element is handled

white-space : normal;
white-space : nowrap;
white-space : pre;
white-space : pre-line;
white-space : pre-wrap;
white-space : initial;
white-space : inherit;

// A shorthand property for all the animation-* properties

animation : name duration timing-function delay iteration-count direction fill-mode play-state;

// Specifies a name for the @keyframes animation

animation-name : keyframename;
animation-name : none;
animation-name : initial;
animation-name : inherit;

// Specifies how long an animation should take to complete one cycle

animation-duration : time;
animation-duration : initial;
animation-duration : inherit;

// Specifies a delay for the start of an animation

animation-delay : time;
animation-delay : initial;
animation-delay : inherit;

// Specifies whether an animation should be played forwards, backwards or in alternate cycles

animation-direction : normal;
animation-direction : reverse;
animation-direction : alternate;
animation-direction : alternate-reverse;
animation-direction : initial;
animation-direction : inherit;

// Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)

animation-fill-mode : none;
animation-fill-mode : forwards;
animation-fill-mode : backwards;
animation-fill-mode : both;
animation-fill-mode : initial;
animation-fill-mode : inherit;

// Specifies whether the animation is running or paused

animation-play-state : paused;
animation-play-state : running;
animation-play-state : initial;
animation-play-state : inherit;

// Specifies the number of times an animation should be played

animation-iteration-count : number;
animation-iteration-count : infinite;
animation-iteration-count : initial;
animation-iteration-count : inherit;

// Specifies the speed curve of an animation

animation-timing-function : linear;
animation-timing-function : ease;
animation-timing-function : ease-in
animation-timing-function : ease-out;
animation-timing-function : ease-in-out;
animation-timing-function : step-start;
animation-timing-function : step-end;
animation-timing-function : steps(int,start;
animation-timing-function : end);
animation-timing-function : cubic-bezier(n,n,n,n);
animation-timing-function : initial;
animation-timing-function : inherit;

// A shorthand property for all the background-* properties
background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment

background : bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial;
background : inherit;

// Sets whether a background image scrolls with the rest of the page, or is fixed

background-attachment : scroll;
background-attachment : fixed;
background-attachment : local;
background-attachment : initial;
background-attachment : inherit;

// Specifies the blending mode of each background layer (color/image)

background-blend-mode : normal;
background-blend-mode : multiply;
background-blend-mode : screen;
background-blend-mode : overlay;
background-blend-mode : darken;
background-blend-mode : lighten;
background-blend-mode : color-dodge;
background-blend-mode : saturation;
background-blend-mode : color;
background-blend-mode : luminosity;

// Defines how far the background (color or image) should extend within an element

background-clip : border-box;
background-clip : padding-box;
background-clip : content-box;
background-clip : initial;
background-clip : inherit;

// Specifies the background color of an element

background-color : color;
background-color : transparent;
background-color : initial;
background-color : inherit;

// Specifies one or more background images for an element

background-image : url;
background-image : none;
background-image : initial;
background-image : inherit;

// Specifies the origin position of a background image

background-origin : padding-box;
background-origin : border-box;
background-origin : content-box;
background-origin : initial;
background-origin : inherit;

// Specifies the position of a background image

background-position : left top;
background-position : left center;
background-position : left bottom;
background-position : right top;
background-position : right center;
background-position : right bottom;
background-position : center top;
background-position : center center;
background-position : center bottom;
background-position : x% y%;
background-position : xpos ypos;
background-position : initial;
background-position : inherit;

// Sets if/how a background image will be repeated

background-repeat : repeat;
background-repeat : repeat-x;
background-repeat : repeat-y;
background-repeat : no-repeat;
background-repeat : initial;
background-repeat : inherit;

// Specifies the size of the background images

background-size : auto;
background-size : length;
background-size : cover;
background-size : contain;
background-size : initial;
background-size : inherit;

// A shorthand property 
border-width
border-style
border-color

border : border-width border-style border-color;
border : initial;
border : inherit;

// Sets the color of the four borders

border-color : color;
border-color : transparent;
border-color : initial;
border-color : inherit;

// all_color
// top_color left_right_color
// top_bottom_color left_right_color bottom_color
// top_color bottom_color left_color right_color

// Sets the style of the four borders

border-style : none;
border-style : hidden;
border-style : dotted
border-style : dashed;
border-style : solid;
border-style : double;
border-style : groove;
border-style : ridge;
border-style : inset;
border-style : outset;
border-style : initial;
border-style : inherit;

// top right bottom left
// top right bottom
// top_bottom left_right
// all_border

// Sets the width of the four borders

border-width : medium;
border-width : thin;
border-width : thick;
border-width : length;
border-width : initial;
border-width : inherit;

// thin medium thick 10px
top border is thin
right border is medium
bottom border is thick
left border is 10px

// thin medium thick
top border is thin
right and left borders are medium
bottom border is thick

// thin medium
top and bottom borders are thin
right and left borders are medium

// thin
all four borders are thin

// A shorthand property for the four border-*-radius properties

border-radius : 1-4 length;
border-radius : % / 1-4 length;
border-radius : %;
border-radius : initial;
border-radius : inherit;

// top-left top-right bottom-right bottom-left
// top-left top-right bottom-right
// top-left_and_bottom-right top-right_bottom-left
// all_corner

// Sets the distance between the borders of adjacent cells
- one value, horizontal and vertical spacing
- two values, horizontal spacing and the vertical spacing

border-spacing : length;
border-spacing : initial;
border-spacing : inherit;

// Sets whether table borders should collapse into a single border or be separated

border-collapse : separate;
border-collapse : collapse;
border-collapse : initial;
border-collapse : inherit;

// A shorthand property 
border-top-width
border-top-style 
border-top-color

border-top : border-width border-style border-color;
border-top : initial;
border-top : inherit;

// Sets the color of the top border

border-top-color : color;
border-top-color : transparent;
border-top-color : initial;
border-top-color : inherit;

// Sets the style of the top border

border-top-style : none;
border-top-style : hidden;
border-top-style : dotted
border-top-style : dashed;
border-top-style : solid;
border-top-style : double;
border-top-style : groove;
border-top-style : ridge;
border-top-style : inset;
border-top-style : outset;
border-top-style : initial;
border-top-style : inherit;

// Sets the width of the top border

border-top-width : medium;
border-top-width : thin;
border-top-width : thick;
border-top-width : length;
border-top-width : initial;
border-top-width : inherit;

// Defines the radius of the border of the top-left corner

border-top-left-radius : length;
border-top-left-radius : % [length;
border-top-left-radius : %];
border-top-left-radius : initial;
border-top-left-radius : inherit;

// Defines the radius of the border of the top-right corner

border-top-right-radius : length;
border-top-right-radius : % [length;
border-top-right-radius : %];
border-top-right-radius : initial;
border-top-right-radius : inherit;

// A shorthand property 
border-bottom-width
border-bottom-style 
border-bottom-color

border-bottom : border-width border-style border-color;
border-bottom : initial;
border-bottom : inherit;

// Sets the color of the bottom border

border-bottom-color : color;
border-bottom-color : transparent;
border-bottom-color : initial;
border-bottom-color : inherit;

// Sets the style of the bottom border

border-bottom-style : none;
border-bottom-style : hidden;
border-bottom-style : dotted
border-bottom-style : dashed;
border-bottom-style : solid;
border-bottom-style : double;
border-bottom-style : groove;
border-bottom-style : ridge;
border-bottom-style : inset;
border-bottom-style : outset;
border-bottom-style : initial;
border-bottom-style : inherit;

// Sets the width of the bottom border

border-bottom-width : medium;
border-bottom-width : thin;
border-bottom-width : thick;
border-bottom-width : length;
border-bottom-width : initial;
border-bottom-width : inherit;

// Defines the radius of the border of the bottom-left corner

border-bottom-left-radius : length;
border-bottom-left-radius : % [length;
border-bottom-left-radius : %];
border-bottom-left-radius : initial;
border-bottom-left-radius : inherit;

// Defines the radius of the border of the bottom-right corner

border-bottom-right-radius : length;
border-bottom-right-radius : % [length;
border-bottom-right-radius : %];
border-bottom-right-radius : initial;
border-bottom-right-radius : inherit;

// A shorthand property 
border-left-width
border-left-style 
border-left-color

border-left : border-width border-style border-color;
border-left : initial;
border-left : inherit;

// Sets the color of the left border

border-left-color : color;
border-left-color : transparent;
border-left-color : initial;
border-left-color : inherit;

// Sets the style of the left border

border-left-style : none;
border-left-style : hidden;
border-left-style : dotted
border-left-style : dashed;
border-left-style : solid;
border-left-style : double;
border-left-style : groove;
border-left-style : ridge;
border-left-style : inset;
border-left-style : outset;
border-left-style : initial;
border-left-style : inherit;

// Sets the width of the left border

border-left-width : medium;
border-left-width : thin;
border-left-width : thick;
border-left-width : length;
border-left-width : initial;
border-left-width : inherit;

// A shorthand property 
border-right-width
border-right-style 
border-right-color

border-right : border-width border-style border-color;
border-right : initial;
border-right : inherit;

// Sets the color of the right border

border-right-color : color;
border-right-color : transparent;
border-right-color : initial;
border-right-color : inherit;

// Sets the style of the right border

border-right-style : none;
border-right-style : hidden;
border-right-style : dotted
border-right-style : dashed;
border-right-style : solid;
border-right-style : double;
border-right-style : groove;
border-right-style : ridge;
border-right-style : inset;
border-right-style : outset;
border-right-style : initial;
border-right-style : inherit;

// Sets the width of the right border

border-right-width : medium;
border-right-width : thin;
border-right-width : thick;
border-right-width : length;
border-right-width : initial;
border-right-width : inherit;

// A shorthand property for all the border-image-* properties
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

border-image : source slice width outset repeat;
border-image : initial;
border-image : inherit

// Specifies the amount by which the border image area extends beyond the border box

border-image-outset : length;
border-image-outset : number;
border-image-outset : initial;
border-image-outset : inherit;

// Specifies whether the border image should be repeated, rounded or stretched

border-image-repeat : stretch;
border-image-repeat : repeat;
border-image-repeat : round;
border-image-repeat : initial;
border-image-repeat : inherit;

// Specifies how to slice the border image

border-image-slice : number;
border-image-slice : %;
border-image-slice : fill;
border-image-slice : initial;
border-image-slice : inherit;

// Specifies the path to the image to be used as a border

border-image-source : none;
border-image-source : image;
border-image-source : initial;
border-image-source : inherit;

// Specifies the width of the border image

border-image-width : number;
border-image-width : %;
border-image-width : auto;
border-image-width : initial;
border-image-width : inherit;

// Specifies the top position of a positioned element

top : auto;
top : length;
top : initial;
top : inherit;

// Sets the elements position, from the bottom of its parent element

bottom : auto;
bottom : length;
bottom : initial;
bottom : inherit;

// Specifies the left position of a positioned element

left : auto;
left : length;
left : initial;
left : inherit;

// Specifies the right position of a positioned element

right : auto;
right : length;
right : initial;
right : inherit;

// Sets all the margin properties in one declaration

margin : length;
margin : auto;
margin : initial;
margin : inherit;

// top right bottom left
// top right_left bottom
// top_bottom right_left
// top_bottom_right_left

// Sets the bottom margin of an element

margin-bottom : length;
margin-bottom : auto;
margin-bottom : initial;
margin-bottom : inherit;

// Sets the left margin of an element

margin-left : length;
margin-left : auto;
margin-left : initial;
margin-left : inherit;

// Sets the right margin of an element

margin-right : length;
margin-right : auto;
margin-right : initial;
margin-right : inherit;

// Sets the top margin of an element

margin-top : length;
margin-top : auto;
margin-top : initial;
margin-top : inherit;

// A shorthand property for all the padding-* properties
padding-top
padding-right
padding-bottom
padding-left

// top right bottom left
// top right_left bottom
// top_bottom right_left
// top_bottom_right_left

// Sets the bottom padding of an element

padding-bottom : length;
padding-bottom : initial;
padding-bottom : inherit;

// Sets the left padding of an element

padding-left : length;
padding-left : initial;
padding-left : inherit;

// Sets the right padding of an element

padding-right : length;
padding-right : initial;
padding-right : inherit;

// Sets the top padding of an element

padding-top : length;
padding-top : initial;
padding-top : inherit;

// A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
flex-grow
flex-shrink
flex-basis

flex : flex-grow flex-shrink flex-basis;
flex : auto;
flex : initial;
flex : inherit;

// Specifies the initial length of a flexible item

flex-basis : number;
flex-basis : auto;
flex-basis : initial;
flex-basis : inherit;

// Specifies the direction of the flexible items

flex-direction : row;
flex-direction : row-reverse;
flex-direction : column;
flex-direction : column-reverse;
flex-direction : initial;
flex-direction : inherit;

// A shorthand property for the flex-direction and the flex-wrap properties
flex-direction
flex-wrap

flex-flow : flex-direction flex-wrap;
flex-flow : initial;
flex-flow : inherit;

// Specifies how much the item will grow relative to the rest

flex-grow : number;
flex-grow : initial;
flex-grow : inherit;

// Specifies how the item will shrink relative to the rest

flex-shrink : number;
flex-shrink : initial;
flex-shrink : inherit;

// Specifies whether the flexible items should wrap or not

flex-wrap : nowrap;
flex-wrap : wrap;
flex-wrap : wrap-reverse;
flex-wrap : initial;
flex-wrap : inherit;

// Specifies the alignment between the lines inside a flexible container when the items do not use all available space

align-content : stretch;
align-content : center;
align-content : flex-start;
align-content : flex-end;
align-content : space-between;
align-content : space-around;
align-content : initial;
align-content : inherit;

// Specifies the alignment for items inside a flexible container

align-items : stretch;
align-items : center;
align-items : flex-start;
align-items : flex-end;
align-items : baseline;
align-items : initial;
align-items : inherit;

// Specifies the alignment for selected items inside a flexible container

align-self : auto;
align-self : stretch;
align-self : center;
align-self : flex-start;
align-self : flex-end;
align-self : baseline;
align-self : initial;
align-self : inherit;

// Specifies the alignment between the items inside a flexible container when the items do not use all available space

justify-content : flex-start;
justify-content : flex-end;
justify-content : center;
justify-content : space-between;
justify-content : space-around;
justify-content : initial;
justify-content : inherit;

// defines the default justify-self for all items of the box

justify-items : stretch;
justify-items : center;
justify-items : flex-start;
justify-items : flex-end;
justify-items : baseline;
justify-items : initial;
justify-items : inherit;

// justify-self property sets the way a box is justified inside its alignment container along the appropriate axis

justify-self : auto;
justify-self : stretch;
justify-self : center;
justify-self : flex-start;
justify-self : flex-end;
justify-self : baseline;
justify-self : initial;
justify-self : inherit;

// align content along both the block and inline directions at once 
// the align-content and justify-content

place-content : center start;
place-content : start center;
place-content : end left;
place-content : flex-start center;
place-content : flex-end center;
place-content : baseline center;
place-content : first baseline space-evenly;
place-content : last baseline right;
place-content : space-between space-evenly;
place-content : space-around space-evenly;
place-content : space-evenly stretch;
place-content : stretch space-evenly;
place-content : inherit;
place-content : initial;
place-content : unset;
  

// align items along both the block and inline directions at once
// align-items and justify-items

place-items : auto center;
place-items : normal start;
place-items : center normal;
place-items : start auto;
place-items : end normal;
place-items : self-start auto;
place-items : self-end normal;
place-items : flex-start auto;
place-items : flex-end normal
place-items : left auto;
place-items : right normal;
place-items : baseline normal;
place-items : first baseline auto;
place-items : last baseline normal;
place-items : stretch auto;
place-items : inherit;
place-items : initial;
place-items : unset;
  

// align an individual item in both the block and inline directions at once
// align-self and justify-self

place-self : auto center;
place-self : normal start;
place-self : center normal;
place-self : start auto;
place-self : end normal;
place-self : self-start auto;
place-self : self-end normal;
place-self : flex-start auto;
place-self : flex-end normal
place-self : left auto;
place-self : right normal;
place-self : baseline normal;
place-self : first baseline auto;
place-self : last baseline normal;
place-self : stretch auto;
place-self : inherit;
place-self : initial;
place-self : unset;
  

// A shorthand property
grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow

grid : none;
grid : grid-template-rows / grid-template-columns;
grid : grid-template-areas;
grid : grid-template-rows / [grid-auto-flow] grid-auto-columns;
grid : [grid-auto-flow] grid-auto-rows / grid-template-columns;
grid : initial;
grid : inherit;

// A shorthand property
grid-template-rows
grid-template-columns
grid-template-areas

grid-template : none;
grid-template : grid-template-rows / grid-template-columns;
grid-template : grid-template-areas;
grid-template : initial;
grid-template : inherit;

// Specifies the size of the columns, and how many columns in a grid layout

grid-template-columns : none;
grid-template-columns : auto;
grid-template-columns : max-content;
grid-template-columns : min-content;
grid-template-columns : length;
grid-template-columns : initial;
grid-template-columns : inherit;

// Specifies the size of the rows in a grid layout

grid-template-rows : none;
grid-template-rows : auto;
grid-template-rows : max-content;
grid-template-rows : min-content;
grid-template-rows : length;
grid-template-rows : initial;
grid-template-rows : inherit;

// A shorthand property for the grid-row-gap and grid-column-gap properties

grid-gap : grid-row-gap grid-column-gap;

// Specifies the size of the gap between columns

grid-column-gap : length;

// Specifies the size of the gap between rows

grid-row-gap : length;

// Specifies a default column size

grid-auto-columns : auto;
grid-auto-columns : max-content;
grid-auto-columns : min-content;
grid-auto-columns : length;

// Specifies a default row size

grid-auto-rows : auto;
grid-auto-rows : max-content;
grid-auto-rows : min-content;
grid-auto-rows : length;

// Specifies how auto-placed items are inserted in the grid

grid-auto-flow : row;
grid-auto-flow : column;
grid-auto-flow : dense;
grid-auto-flow : row dense;
grid-auto-flow : column dense;

// Specifies how to display columns and rows, using named grid items

grid-template-areas : none;
grid-template-areas : itemnames;

// Either specifies a name for the grid item, or this property is a shorthand property 
grid-row-start
grid-column-start
grid-row-end
grid-column-end

grid-area : grid-row-start / grid-column-start / grid-row-end / grid-column-end ;
grid-area : itemname;

// A shorthand property
grid-column-start
grid-column-end

grid-column : grid-column-start / grid-column-end;

// Specifies where to start the grid item

grid-column-start : auto;
grid-column-start : span n;
grid-column-start : column-line;

// Specifies where to end the grid item

grid-column-end : auto;
grid-column-end : span n;
grid-column-end : column-line;

// A shorthand property for the grid-row-start and the grid-row-end properties

grid-row : grid-row-start / grid-row-end;

// Specifies where to start the grid item

grid-row-start : auto;
grid-row-start : row-line;

// Specifies where to end the grid item

grid-row-end : auto;
grid-row-end : row-line;
grid-row-end : span n;

// Sets the behavior of the background and border of an element at page-break, or, for in-line elements, at line-break.

box-decoration-break : slice;
box-decoration-break : clone;
box-decoration-break : initial;
box-decoration-break : inherit;
box-decoration-break : unset;

// Attaches one or more shadows to an element

box-shadow : none;
box-shadow : h-offset v-offset blur spread color ;
box-shadow : inset;
box-shadow : initial;
box-shadow : inherit;

// Defines how the width and height of an element are calculated
// should they include padding and borders, or not

box-sizing : content-box;
box-sizing : border-box;
box-sizing : initial;
box-sizing : inherit;

// Specifies whether or not a page-, column-, or region-break should occur after the specified element

break-after : auto;
break-after : all;
break-after : always;
break-after : avoid;
break-after : avoid-column;
break-after : avoid-page;
break-after : avoid-region
break-after : column;
break-after : left;
break-after : page;
break-after : recto;
break-after : region;
break-after : right;
break-after : verso;
break-after : initial;
break-after : inherit;

// Specifies whether or not a page-, column-, or region-break should occur before the specified element

break-before : auto;
break-before : all;
break-before : always;
break-before : avoid;
break-before : avoid-column;
break-before : avoid-page;
break-before : avoid-region
break-before : column;
break-before : left;
break-before : page;
break-before : recto;
break-before : region;
break-before : right;
break-before : verso;
break-before : initial;
break-before : inherit;

// Specifies whether or not a page-, column-, or region-break should occur inside the specified element

break-inside : auto;
break-inside : all;
break-inside : always;
break-inside : avoid;
break-inside : avoid-column;
break-inside : avoid-page;
break-inside : avoid-region
break-inside : column;
break-inside : left;
break-inside : page;
break-inside : recto;
break-inside : region;
break-inside : right;
break-inside : verso;
break-inside : initial;
break-inside : inherit;

// Specifies the number of columns an element should be divided into

column-count : number;
column-count : auto;
column-count : initial;
column-count : inherit;

// Specifies how to fill columns, balanced or not

column-fill : balance;
column-fill : auto;
column-fill : initial;
column-fill : inherit;

// Specifies the gap between the columns

column-gap : length;
column-gap : normal;
column-gap : initial;
column-gap : inherit;

// A shorthand property for all the column-rule-* properties
column-rule-width
column-rule-style (required)
column-rule-color

column-rule : column-rule-width column-rule-style column-rule-color;
column-rule : initial;
column-rule : inherit;

// Specifies the color of the rule between columns

column-rule-color : color;
column-rule-color : initial;
column-rule-color : inherit;

// Specifies the style of the rule between columns

column-rule-style : none;
column-rule-style : hidden;
column-rule-style : dotted
column-rule-style : dashed;
column-rule-style : solid;
column-rule-style : double;
column-rule-style : groove;
column-rule-style : ridge;
column-rule-style : inset;
column-rule-style : outset;
column-rule-style : initial;
column-rule-style : inherit;

// Specifies the width of the rule between columns

column-rule-width : medium;
column-rule-width : thin;
column-rule-width : thick;
column-rule-width : length;
column-rule-width : initial;
column-rule-width : inherit;

// Specifies how many columns an element should span across

column-span : none;
column-span : all;
column-span : initial;
column-span : inherit;

// Specifies the column width

column-width : auto;
column-width : length;
column-width : initial;
column-width : inherit;

// A shorthand property
column-width
column-count

columns : auto;
columns : column-width column-count;
columns : initial;
columns : inherit;

// A shorthand property 
font-style
font-variant
font-weight
font-size/line-height
font-family

font : font-style font-variant font-weight font-size/line-height font-family;
font : caption;
font : icon;
font : menu;
font : message-box;
font : small-caption;
font : status-bar;
font : initial;
font : inherit;

// Specifies the font family for text

font-family : family-name;
font-family : generic-family;
font-family : initial;
font-family : inherit;

// Specifies the font size of text

font-size : medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;

// Specifies the font style for text

font-style : normal;
font-style : italic;
font-style : oblique;
font-style : initial;
font-style : inherit;

// Specifies the weight of a font

// Allows control over advanced typographic features in OpenType fonts

font-feature-settings : normal;
font-feature-settings : feature-value;

// Controls the usage of the kerning information (how letters are spaced)

font-kerning : auto;
font-kerning : normal;
font-kerning : none;

// Preserves the readability of text when font fallback 

font-size-adjust : number;
font-size-adjust : none;
font-size-adjust : initial;
font-size-adjust : inherit;

no chrome support
no safari support

// Selects a normal, condensed, or expanded face from a font family

font-stretch : ultra-condensed;
font-stretch : extra-condensed
font-stretch : condensed;
font-stretch : semi-condensed;
font-stretch : normal;
font-stretch : semi-expanded;
font-stretch : expanded;
font-stretch : extra-expanded;
font-stretch : ultra-expanded;
font-stretch : initial;
font-stretch : inherit;

// Specifies whether or not a text should be displayed in a small-caps font

font-variant : normal;
font-variant : small-caps;
font-variant : initial;
font-variant : inherit;

// Controls the usage of alternate glyphs for capital letters

font-variant-caps : normal;
font-variant-caps : small-caps;
font-variant-caps : all-small-caps;
font-variant-caps : petite-caps;
font-variant-caps : all-petite-caps;
font-variant-caps : unicase;
font-variant-caps : titling-caps;
font-variant-caps : initial;
font-variant-caps : inherit;
font-variant-caps : unset;

// Sets all the properties for a list in one declaration
list-style-type
list-style-position
list-style-image

list-style : list-style-type list-style-position list-style-image;
list-style : initial;
list-style : inherit;

// Specifies an image as the list-item marker

list-style-image : none;
list-style-image : url;
list-style-image : initial;
list-style-image : inherit;

// Specifies the position of the list-item markers (bullet points)

list-style-position : inside;
list-style-position : outside;
list-style-position : initial;
list-style-position : inherit;

// Specifies the type of list-item marker

list-style-type : disc;
list-style-type : armenian;
list-style-type : circle;
list-style-type : cjk-ideographic;
list-style-type : decimal;
list-style-type : decimal;-leading-zero
list-style-type : georgian;
list-style-type : hebrew;
list-style-type : hiragana;
list-style-type : hiragana-iroha;
list-style-type : katakana;
list-style-type : katakana-iroha;
list-style-type : lower-alpha;
list-style-type : lower-greek;
list-style-type : lower-latin
list-style-type : lower-roman;
list-style-type : none;
list-style-type : square;
list-style-type : upper-alpha;
list-style-type : upper-greek;
list-style-type : upper-latin;
list-style-type : upper-roman;
list-style-type : initial;
list-style-type : inherit;

// Sets the maximum height of an element

max-height : none;
max-height : length;
max-height : initial;
max-height : inherit;

// Sets the maximum width of an element

max-width : none;
max-width : length;
max-width : initial;
max-width : inherit;

// Sets the minimum height of an element

min-height : length;
min-height : initial;
min-height : inherit;

// Sets the minimum width of an element

min-width : length;
min-width : initial;
min-width : inherit;

// A shorthand transition-property
outline-width
outline-style (required)
outline-color

outline : outline-width outline-style outline-color;
outline : initial;
outline : inherit;

// Sets the color of an outline

outline-color : invert;
outline-color : color;
outline-color : initial;
outline-color : inherit;

// Offsets an outline, and draws it beyond the border edge

outline-offset : length;
outline-offset : initial;
outline-offset : inherit;

// Sets the style of an outline

outline-style : none;
outline-style : hidden;
outline-style : dotted
outline-style : dashed;
outline-style : solid;
outline-style : double;
outline-style : groove;
outline-style : ridge;
outline-style : inset;
outline-style : outset;
outline-style : initial;
outline-style : inherit;

// Sets the width of an outline

outline-width : medium;
outline-width : thin;
outline-width : thick;
outline-width : length;
outline-width : initial;
outline-width : inherit;

// Specifies what happens if content overflows an element's box

overflow : visible;
overflow : hidden;
overflow : scroll;
overflow : auto;
overflow : initial;
overflow : inherit;

// Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area

overflow-x : visible;
overflow-x : hidden;
overflow-x : scroll;
overflow-x : auto;
overflow-x : initial;
overflow-x : inherit;

// Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area

overflow-y : visible;
overflow-y : hidden;
overflow-y : scroll;
overflow-y : auto;
overflow-y : initial;
overflow-y : inherit;

// Sets the page-break behavior after an element

page-break-after : auto;
page-break-after : always;
page-break-after : avoid;
page-break-after : left;
page-break-after : right;
page-break-after : initial;
page-break-after : inherit;

// Sets the page-break behavior before an element

page-break-before : auto;
page-break-before : always;
page-break-before : avoid;
page-break-before : left;
page-break-before : right;
page-break-before : initial;
page-break-before : inherit;

// Sets the page-break behavior inside an element

page-break-inside : auto;
page-break-inside : avoid;
page-break-inside : initial;
page-break-inside : inherit;

// Gives a 3D-positioned element some perspective

perspective : length;
perspective : none;

// Defines at which position the user is looking at the 3D-positioned element

perspective-origin : x-axis y-axis;
perspective-origin : initial;
perspective-origin : inherit;

// Specifies the horizontal alignment of text

text-align : left;
text-align : right;
text-align : center;
text-align : justify;
text-align : initial;
text-align : inherit;

// Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify"

text-align-last : auto;
text-align-last : left;
text-align-last : right;
text-align-last : center;
text-align-last : justify;
text-align-last : start;
text-align-last : end;
text-align-last : initial;
text-align-last : inherit;

// Specifies the decoration added to text
text-decoration-line (required)
text-decoration-color
text-decoration-style

text-decoration : text-decoration-line text-decoration-color text-decoration-style;
text-decoration : initial;
text-decoration : inherit;

// Specifies the color of the text-decoration

text-decoration-color : color;
text-decoration-color : initial;
text-decoration-color : inherit;

// Specifies the type of line in a text-decoration

text-decoration-line : none;
text-decoration-line : underline;
text-decoration-line : overline;
text-decoration-line : line-through;
text-decoration-line : initial;
text-decoration-line : inherit;

// Specifies the style of the line in a text decoration

text-decoration-style : solid;
text-decoration-style : double;
text-decoration-style : dotted;
text-decoration-style : dashed;
text-decoration-style : wavy;
text-decoration-style : initial;
text-decoration-style : inherit;

// Specifies the indentation of the first line in a text-block

text-indent : length;
text-indent : initial;
text-indent : inherit;

// Specifies the justification method used when text-align is "justify"

text-justify : auto;
text-justify : inter-word;
text-justify : inter-character;
text-justify : none;
text-justify : initial;
text-justify : inherit;

// Specifies what should happen when text overflows the containing element

text-overflow : clip;
text-overflow : ellipsis;
text-overflow : string;
text-overflow : initial;
text-overflow : inherit;

required for text-overflow:
white-space = nowrap
overflow = hidden

// Adds shadow to text

text-shadow : h-shadow v-shadow blur-radius color;
text-shadow : none;
text-shadow : initial;
text-shadow : inherit;

// Controls the capitalization of text

text-transform : none;
text-transform : capitalize;
text-transform : uppercase;
text-transform : lowercase;
text-transform : initial;
text-transform : inherit;

// Applies a 2D or 3D transformation to an element

transform : none;
transform : transform-functions;
transform : initial;
transform : inherit;

transform : none;
transform : matrix(n,n,n,n,n,n);
transform : matrix3d;
transform : (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n);
transform : translate(x,y);
transform : translate3d(x,y,z);
transform : translateX;(x)
transform : translateY(y);
transform : translateZ(z);
transform : scale(x,y);
transform : scale3d(x,y,z);
transform : scaleX(x);
transform : scaleY(y);
transform : scaleZ(z);
transform : rotate(angle);
transform : rotate3d(x,y,z,angle)
transform : rotateX(angle);
transform : rotateY(angle);
transform : rotateZ(angle);
transform : skew(x-angle,y-angle);
transform : skewX(angle);
transform : skewY(angle);
transform : perspective(n);
transform : initial;
transform : inherit;

// Allows you to change the position on transformed elements

transform-origin : x-axis y-axis z-axis;
transform-origin : initial;
transform-origin : inherit;

// Specifies how nested elements are rendered in 3D space

transform-style : flat;
transform-style : preserve-3d;
transform-style : initial;
transform-style : inherit;

// A shorthand property for all the transition-* properties
transition-property
transition-duration
transition-timing-function
transition-delay

transition : property duration timing-function delay;
transition : initial;
transition : inherit;

// Specifies when the transition effect will start

transition-delay : time;
transition-delay : initial;
transition-delay : inherit;

// Specifies how many seconds or milliseconds a transition effect takes to complete

transition-duration : time;
transition-duration : initial;
transition-duration : inherit;

// Specifies the name of the CSS property the transition effect is for

transition-property : none;
transition-property : all;
transition-property : property;
transition-property : initial;
transition-property : inherit;

// Specifies the speed curve of the transition effect

transition-timing-function : linear;
transition-timing-function : ease;
transition-timing-function : ease-in
transition-timing-function : ease-out;
transition-timing-function : ease-in-out;
transition-timing-function : step-start;
transition-timing-function : step-end;
transition-timing-function : steps(int,start;
transition-timing-function : end);
transition-timing-function : cubic-bezier(n,n,n,n);
transition-timing-function : initial;
transition-timing-function : inherit;

// Specifies how words should break when reaching the end of a line

word-break : normal;
word-break : break-all;
word-break : keep-all;
word-break : break-word;
word-break : initial;
word-break : inherit;

// Increases or decreases the space between words in a text

word-spacing : normal;
word-spacing : length;
word-spacing : initial;
word-spacing : inherit;

// Allows long, unbreakable words to be broken and wrap to the next line

word-wrap : normal;
word-wrap : break-word;
word-wrap : initial;
word-wrap : inherit;

// Specifies whether lines of text are laid out horizontally or vertically

writing-mode : horizontal-tb;
writing-mode : vertical-rl;
writing-mode : vertical-lr;

// Specifies the text direction/writing direction

direction : ltr;
direction : rtl;
direction : initial;
direction : inherit;

// Increases or decreases the space between characters in a text

letter-spacing : normal;
letter-spacing : length;
letter-spacing : initial;
letter-spacing : inherit;

// Sets the line height

line-height : normal;
line-height : number;
line-height : length;
line-height : initial;
line-height : inherit;

// Specifies whether or not an element is visible

visibility : visible;
visibility : hidden;
visibility : collapse;
visibility : initial;
visibility : inherit;

// Defines whether or not the back face of an element should be visible when facing the user

backface-visibility : visible;
backface-visibility : hidden;
backface-visibility : initial;
backface-visibility : inherit;

// Increases or decreases the value of one or more CSS counters

counter-increment : none;
counter-increment : id;
counter-increment : initial;
counter-increment : inherit;

// Creates or resets one or more CSS counters

counter-reset : none;
counter-reset : name number;
counter-reset : initial;
counter-reset : inherit;

// Specifies how the contents of a replaced element should be fitted to the box established by its used height and width

object-fit : fill;
object-fit : contain;
object-fit : cover;
object-fit : scale-down;
object-fit : none;
object-fit : initial;
object-fit : inherit;

// Specifies the alignment of the replaced element inside its box

object-position : position;
object-position : initial;
object-position : inherit;

// Resets all properties (except unicode-bidi and direction)

all : initial;
all : inherit;
all : unset;

// Specifies the placement of a table caption

caption-side : top;
caption-side : bottom;
caption-side : initial;
caption-side : inherit;

// Specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable

caret-color : auto;
caret-color : color;
caret-color : initial;
caret-color : inherit;

// Specifies on which sides of an element floating elements are not allowed to float

clear : none;
clear : left;
clear : right;
clear : both;
clear : initial;
clear : inherit;

// Clips an absolutely positioned element

clip : auto;
clip : shape;
clip : initial;
clip : inherit;

// Used with the  : before and  : after pseudo-elements, to insert generated content

content : normal;
content : none;
content : counter
content : attr;
content : string;
content : open-quote;
content : close-quote;
content : no-open-quote;
content : no-close-quote;
content : url;
content : initial;
content : inherit;

// allows limiting of the contents of a block container to the specified number of lines

.xx {
  display : -webkit-box;
  -webkit-line-clamp : 3;
  -webkit-box-orient : vertical;  
  overflow : hidden;
}

-webkit-line-clamp : none;

-webkit-line-clamp : 3;
-webkit-line-clamp : 10;

-webkit-line-clamp : inherit;
-webkit-line-clamp : initial;
-webkit-line-clamp : unset;

// Specifies whether or not to display borders and background on empty cells in a table

empty-cells : show;
empty-cells : hide;
empty-cells : initial;
empty-cells : inherit;

// Specifies whether a punctuation character may be placed outside the line box

hanging-punctuation : none;
hanging-punctuation : first;
hanging-punctuation : last;
hanging-punctuation : allow-end;
hanging-punctuation : force-end;
hanging-punctuation : initial;
hanging-punctuation : inherit;

no chrome support

// Sets how to split words to improve the layout of paragraphs

hyphens : none;
hyphens : manual;
hyphens : auto;
hyphens : initial;
hyphens : inherit;

// Defines whether an element must create a new stacking content

isolation : auto;
isolation : isolate;
isolation : initial;
isolation : inherit;

// Specifies how an element's content should blend with its direct parent background

mix-blend-mode : normal;
mix-blend-mode : multiply;
mix-blend-mode : screen;
mix-blend-mode : overlay;
mix-blend-mode : darken
mix-blend-mode : lighten;
mix-blend-mode : color-dodge;
mix-blend-mode : color-burn;
mix-blend-mode : difference;
mix-blend-mode : exclusion;
mix-blend-mode : hue;
mix-blend-mode : saturation;
mix-blend-mode : color;
mix-blend-mode : luminosity;

// Sets the type of quotation marks for embedded quotations

quotes : none;
quotes : string;
quotes : initial;
quotes : inherit;

// Defines if (and how) an element is resizable by the user

resize : none;
resize : both;
resize : horizontal;
resize : vertical;
resize : initial;
resize : inherit;

// Specifies whether to smoothly animate the scroll position in a scrollable box, instead of a straight jump

scroll-behavior : auto;
scroll-behavior : smooth;
scroll-behavior : initial;
scroll-behavior : inherit;

// Specifies the width of a tab character

tab-size : number;
tab-size : length;
tab-size : initial;
tab-size : inherit;

// Defines the algorithm used to lay out table cells, rows, and columns

table-layout : auto;
table-layout : fixed;
table-layout : initial;
table-layout : inherit;

// Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document

unicode-bidi : normal;
unicode-bidi : embed;
unicode-bidi : bidi-override;
unicode-bidi : initial;
unicode-bidi : inherit;

// Specifies whether the text of an element can be selected

user-select : auto;
user-select : none;
user-select : text;
user-select : all;

// Sets the vertical alignment of an element

vertical-align : baseline;
vertical-align : length
vertical-align : sub;
vertical-align : super;
vertical-align : top;
vertical-align : text-top;
vertical-align : middle;
vertical-align : bottom;
vertical-align : text-bottom;
vertical-align : initial;
vertical-align : inherit;

// Allows you to import a style sheet into another style sheet

@import url|string list-of-mediaqueries;

@import "navigation.css";

// Import ONLY if the media is maximum 768 pixels:
@import "mobstyle.css" screen and (max-width = 768px);

// Import ONLY if the media is print
@import "printstyle.css" print;

// Specifies the animation code
// !important; wont work inside

@keyframes animationname {keyframes-selector {css-styles;}}

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

@keyframes mymove {
  0%   {top: 0px; background: red; width: 100px;}
  100% {top: 200px; background: yellow; width: 300px;}
}

// Sets the style rules for different media types/devices/sizes

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

not
// The not keyword reverts the meaning of an entire media query.

only
// The only keyword prevents older browsers that do not support media queries with 
// media features from applying the specified styles. It has no effect on modern browsers.

and
//The and keyword combines a media feature with a media type or other media features.

They are all optional. However, if using not or only, must also specify a media type.


Media Types
// all
// print
// screen
// speech

Media Features
// any-hover
// any-pointer
// aspect-ratio
// color
// color-gamut
// color-index
// grid
// height
// hover
// inverted-colors
// light-level
// max-aspect-ratio
// max-color
// max-color-index
// max-height
// max-monochrome
// max-resolution
// max-width
// min-aspect-ratio
// min-color
// min-color-index
// min-height
// min-monochrome
// min-resolution
// min-width
// monochrome
// orientation
// overflow-block
// overflow-inline
// pointer
// resolution
// scan
// scripting
// update
// width

// A rule that allows websites to download and use fonts other than the "web-safe" fonts

@font-face {
  font-properties
}

@font-face {
  font-family : name;

  src : URL;
  
  font-stretch : normal;
  font-stretch : condensed;
  font-stretch : ultra-condensed;
  font-stretch : extra-condensed;
  font-stretch : semi-condensed;
  font-stretch : expanded;
  font-stretch : semi-expanded;
  font-stretch : extra-expanded;
  font-stretch : ultra-expanded;
  
  
  font-style : normal;
  font-style : italic;
  font-style : oblique;
  

  font-weight : normal;
  font-weight : bold
  font-weight : 100;
  font-weight : 200;
  font-weight : 300;
  font-weight : 400;
  font-weight : 500;
  font-weight : 600;
  font-weight : 700;
  font-weight : 800;
  font-weight : 900;
  
  unicode-range : unicode-range;
}

// Specifies the character encoding used in the style sheet
// The @charset rule specifies the character encoding used in the style sheet.
// The @charset rule must be the first element in the style sheet and not be preceded by any character.

@charset "charset";

// Selecting all elements

* {
  // code
}

// Selecting html element

:root {
  // code
}
                

// Selecting all elements with class

<div class="xx">
</div>

.xx {
  // code
}

// Selecting using class

<div id="xx">
</div>

#xx {
  // code
}

// Selecting elements directly

p {
  // code
}

div {
  // code
}

span {
  // code
}

// Selecting multiple elements

<div class="xx yy"></div>

.xx , 
.yy {
  // code
}

// Selecting element using multiple attribute

<div class="xx yy"></div>

.xx.yy {
  // code
}

// Selecting element inside element

<div class="xx">
<div class="yy"></div>
</div>

.xx .yy {
  // code
}

// Selecting elements by matching parent selector

// this will be selected
<div class="xx">
<div class="yy"></div></div>

// this will not be selected
<span class="xx">
<div class="yy"></div></span>

div > .yy {
  // code
}

// Selecting immediate next sibling

<div class="xx"></div>
<div class="yy">This will be selected</div>


.xx + .yy {
  // code
}

// Selecting all next siblings

<span class="yy">This will not selected</span>
<div class="xx"></div>
<span class="yy">This will be selected</span>
<span>This will not be selected</span>
<span class="yy">This will be selected</span>


.xx ~ .yy {
  // code
}

// Selecting using attribute name

<div name="xx"></div>

[name] {
  // code
}

// Selecting using attribute name and value

<div name="xx"></div>

[name=xx] {
  // code
}
                

// Selecting using attribute name and any part of the value
// Value should be separated by space if multiple

<div name="xx yy zz"></div>
<div name="yy"></div>

[name~=yy] {
  // code
}

// Selecting using attribute name and begining part of the value
// Value should be either single string or separated by -

<div name="xx"></div>
<div name="xx-yy"></div>

[name|=xx] {
  // code
}

// Selecting using attribute name and begining part of the value
// Value can be single string or multiple, it checks only the begining

<div name="xx yy"></div>
<div name="xx_yy"></div>

[name^=xx] {
  // code
}
                  

// Selecting using attribute name and ending part of the value
// Value can be single string or multiple, it checks only the ending

<div name="xx yy"></div>
<div name="xx_yy"></div>

[name$=yy] {
  // code
}
                  

// Selecting using attribute name and any part of the value
// Value can be single string or multiple, it checks only the value

<div name="yy"></div>
<div name="xx yy"></div>
<div name="xx_yy_zz"></div>

[name*=zz] {
  // code
}
                  

// Selecting checked radio or checkbox input element

<input type="radio" class="xx">
<input type="checkbox" class="xx">

.xx:checked {
  // code
}

// Selecting disabled input elements

<input class="xx" disabled>
<input type="radio" class="xx" disabled>
<input type="checkbox" class="xx" disabled>

.xx:disabled {
 // code
}
                

// Selecting enabled input elements

<input class="xx">
<input type="radio" class="xx">
<input type="checkbox" class="xx" disabled>

.xx:enabled {
 // code
}
                

// Selecting input element within min and max range

<input type="number" min="0" max="10" value="5">

input:in-range {
  // code
}

// Selecting input element exceeding min and max range

<input type="number" min="0" max="10" value="20">

input:out-of-range {
  // code
}
                  

// Selecting default checked radio or checkbox
// Also for option and button

<input type="radio" class="xx" checked>
<input type="radio" class="xx">
<input type="checkbox" class="xx" checked>
<input type="checkbox" class="xx">

.xx:default {
 // code
}
                

// Selecting indeterminate radio, checkbox or progress element
// When it is in default state without any data

<input type="checkbox" class="xx">

.xx:indeterminate {
  // code
}

// Selecting valid input element
// When inline validation is valid

<input type="email" class="xx">

input:valid {
  // code
}
                

// Selecting invalid input element
// When inline validation is invalid

<input type="email" class="xx" value="invalid_email">

input:invalid {
  // code
}

                

// Selecting all input elements which are not required by validation

// This is selected
<input>

// This is not selected
<input required>

input:optional {
  // code
}

// Selecting all input elements which are read only

// This is not selected
<input>

// This is selected
<input readonly>

input:read-only {
  // code
}
                  

// Selecting all input elements which are read and write

// This is selected
<input>

// This is not selected
<input readonly>

input:read-write {
  // code
}
                  

// Selecting all input elements which are required by validation

// This is not selected
<input>

// This is selected
<input required>

input:required {
  // code
}
                  

// Selecting input element placeholder

<input placeholder="some text">

input::placeholder {
  // code
}

/* Edge */
input::-webkit-input-placeholder { 
  // code
}

/* Internet Explorer 10-11 */
input:-ms-input-placeholder {
  // code
}

// To insert something after all the content inside the selected element

<div></div>

div::after {
  // code
}

// To insert something before all the content inside the selected element

<div></div>

div::before {
  // code
}

// Selecting the active element
// Element become active when click pressed
// and leave active state when click leaved

<div></div>

div:active {
// code
}

// Selecting the focus element
// Focusable element becomes focus when clicked
// and leave when clicked outside the focusable element

<div></div>

div:focus {
// code
}

// Selecting the element on hover
// Element becomes hovering state when the mouse is over
// and leaves when the mouse out

<div></div>

div:focus {
// code
}
    

// Selecting element without content and empty space

<div class="xx"></div>

.xx:empty {
  // code
 }

// Selecting unvisited anchor element

<a href="#">

a:link {
  // code
}

// Selecting visited anchor element

<a href="#">

a:link {
  // code
}
                

// Selecting the first child of the selected element

<div class="xx">
<div>This is selected</div>
<div>This is not selected</div>
</div>

.xx:first-child {
  // code
}

// Selecting every first element inside selected element

<div class="xx">
  <div class="yy">This is selected</div>
  <div class="yy">This is not selected</div>
  <div>
    <div class="yy">This is selected</div>
    <div class="yy">This is not selected</div>
  </div>
</div>

.xx .yy:first-of-type {
  // code
}

// Selecting the last child of the selected element

<div class="xx">
<div>This is not selected</div>
<div>This is selected</div>
</div>

.xx:last-child {
  // code
}
                  

// Selecting every last element inside selected element

<div class="xx">
<div class="yy">This is not selected</div>
<div class="yy">This is selected</div>
  <div>
  <div class="yy">This is not selected</div>
  <div class="yy">This is selected</div>
  </div>
</div>

.xx .yy:last-of-type {
  // code
}

// Selecting child element using custom selector from top

<div class="xx">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>


.xx span:nth-child(1) {
  // code
}

.xx span:nth-child(odd) {
  // code
}

.xx span:nth-child(even) {
  // code
}

.xx span:nth-child(3n+0) {
  // code
}

// Selecting child element using custom selector from top
// Selecting every first element inside selected element

<div class="xx">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
    <div class="xx">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
  </div>
</div>


.xx span:nth-last-of-type(1) {
  // code
}

.xx span:nth-last-of-type(odd) {
  // code
}

.xx span:nth-last-of-type(even) {
  // code
}

.xx span:nth-last-of-type(3n+0) {
  // code
}
                  

// Selecting child element using custom selector from bottom

<div class="xx">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>


.xx span:nth-last-child(1) {
  // code
}

.xx span:nth-last-child(odd) {
  // code
}

.xx span:nth-last-child(even) {
  // code
}

.xx span:nth-last-child(3n+0) {
  // code
}
                  

// Selecting child element using custom selector from bottom
// Selecting every last element inside selected element

<div class="xx">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
    <div class="xx">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
  </div>
</div>


.xx span:nth-last-of-type(1) {
  // code
}

.xx span:nth-last-of-type(odd) {
  // code
}

.xx span:nth-last-of-type(even) {
  // code
}

.xx span:nth-last-of-type(3n+0) {
  // code
}
                  

// Selecting all elements other than the Selector

<span class="xx">This is not selected</span>
<div class="yy">This is selected</div>
<span class="xx">This is not selected</span>

span:not(.xx) {
  // code
}

// Selecting every element inside selected element

<div>
  <span>This is selected</span>

  <div>
   <span>This is selected</span>
  </div>
</div>

<div>
<span>This is not selected</span>
<span>This is not selected</span>
</div>

span:only-of-type {
  // code
}

// Selecting element if it the only child

<div>
  <span>This is selected</span>

  <div>
    <span>This is not selected</span>
  </div>
</div>

<div>
  <span>This is not selected</span>
  <span>This is not selected</span>
</div>

span:only-child {
  // code
}
                  

// Selecting the text which are selected

<span>Some text which can be styled on seletion</span>

span::selection {
  // code
}
                  

// Selecting target element which are link by anchor target with #xx

<a href="#xx"></a>
<div id="xx"></div>

:target {
  // code
}
                  

// Selecting the first letter of the text content

<div class="xx">
Fallinfo
</div>

.xx:first-letter {
  // code
}

// Only F is selected
// All text decorating property can be used inside

// Selecting the first line of the text content

<div class="xx">
Fallinfo
</br>
Some content
</div>

.xx:first-letter {
  // code
}

// Only Fallinfo is selected
// All text decorating property can be used inside
                

// Selecting element only if it is in fullscreen

/* Standard */
:fullscreen {
  background-color: yellow;
}

/* Safari */
:-webkit-full-screen {
  background-color: yellow;
}

/* IE11 */
:-ms-fullscreen {
  background-color: yellow;
}
                

// Selecting element with lang attribute and value

<div lang="xx"></div>
<div lang="xx-yy"></div>

div:lang(xx) {
  // code
}
                

// Inserts the value of a custom property

var(name, fallback_value);


:root {
  --theme : red;  
}

.xx {
  background-color: var(--theme,blue);
}

// Getting element attribute value

attr(attribute-name);

<div class="xx" name="some text"></div>

.xx:after {
  content: attr(name);
}

// Allows to perform calculations to determine CSS property values

calc(expression);

.xx {
  width: calc(100% - 100px);
}

// Defines a Cubic Bezier curve
// Used with transition

cubic-bezier(x1,y1,x2,y2);

.xx {
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
                

// Defines colors using the Hue-Saturation-Lightness model (HSL)

hsl(hue, saturation, lightness);

.xx {
  background-color:hsl(120,100%,50%);
}
.xx {
  background-color:hsl(120,100%,75%);
}
.xx {
  background-color:hsl(120,100%,25%);
}
.xx {
  background-color:hsl(120,60%,70%);
}
.xx {
  background-color:hsl(290,100%,50%);
}
.xx {
  background-color:hsl(290,60%,70%);
}

// Defines colors using the Hue-Saturation-Lightness-Alpha model (HSLA)

hsla(hue, saturation, lightness, alpha);

.xx {
  background-color:hsla(120,100%,50%,0.3);
}
.xx {
  background-color:hsla(120,100%,75%,0.3);
}
.xx {
  background-color:hsla(120,100%,25%,0.3);
}
.xx {
  background-color:hsla(120,60%,70%,0.3);
}
.xx {
  background-color:hsla(290,100%,50%,0.3);
}
.xx {
  background-color:hsla(290,60%,70%,0.3);
}

// Defines colors using the Red-Green-Blue model (RGB)

rgb(red, green, blue);

.xx {
  background-color:rgb(255,0,0);
} 
.xx {
  background-color:rgb(0,255,0);
} 
.xx {
  background-color:rgb(0,0,255);
} 

// Defines colors using the Red-Green-Blue-Alpha model (RGBA)

rgba(red, green, blue, alpha);

.xx {
  background-color:rgba(255,0,0,0.3);
}
.xx {
  background-color:rgba(0,255,0,0.3);
}
.xx {
  background-color:rgba(0,0,255,0.3);
}

// Sets a linear gradient as the background image.

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

.xx {
  background-image: linear-gradient(red, yellow, blue);
}

// Sets a radial gradient as the background image. 

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

.xx {
  background-image: radial-gradient(red, green, blue);
}

// Repeats a linear gradient

background-image: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

.xx {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

// Repeats a radial gradient

background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color);

.xx {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

// Used in grid
// Repeated fragment of the track list

/* values */
  repeat(4, 1fr)
  repeat(4, [col-start] 250px [col-end])
  repeat(4, [col-start] 60% [col-end])
  repeat(4, [col-start] 1fr [col-end])
  repeat(4, [col-start] min-content [col-end])
  repeat(4, [col-start] max-content [col-end])
  repeat(4, [col-start] auto [col-end])
  repeat(4, [col-start] minmax(100px, 1fr) [col-end])
  repeat(4, [col-start] fit-content(200px) [col-end])
  repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
  repeat(4, [col-start] min-content [col-middle] max-content [col-end])
  
  /* values */
  repeat(auto-fill, 250px)
  repeat(auto-fit, 250px)
  repeat(auto-fill, [col-start] 250px [col-end])
  repeat(auto-fit, [col-start] 250px [col-end])
  repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
  repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])
  
  /* values */
  repeat(4, 250px)
  repeat(4, [col-start] 250px [col-end])
  repeat(4, [col-start] 60% [col-end])
  repeat(4, [col-start] minmax(100px, 1fr) [col-end])
  repeat(4, [col-start] fit-content(200px) [col-end])
  repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])

// Used in grid
// Defines a size range greater than or equal to min and less than or equal to max

/* values */
  minmax(200px, 1fr)
  minmax(400px, 50%)
  minmax(30%, 300px)
  minmax(100px, max-content)
  minmax(min-content, 400px)
  minmax(max-content, auto)
  minmax(auto, 300px)
  minmax(min-content, auto)
  
  /* values */
  minmax(200px, 1fr)
  minmax(30%, 300px)
  minmax(400px, 50%)
  minmax(50%, min-content)
  minmax(300px, max-content)
  minmax(200px, auto)
  
  /* values */
  minmax(400px, 50%)
  minmax(30%, 300px)
  minmax(min-content, 200px)
  minmax(max-content, 200px)
  minmax(auto, 300px)

// Using variables to define css value

$theme: red;

.xx {
  background-color: $theme;
}

.yy {
  // This will not affect .xx
  $theme: green;
  background-color: $theme;
}

.zz {
  // This will affect .xx and .yy
  $theme: yellow !global;
  background-color: $theme;
}
                

// Nested rules

.xx {
  .xx_1 {
    // code
  }
  .xx_2 {
    // code
    .xx_2_1 {
      // code
    }
  }
}

**************************************

// Nested properties

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}
text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

**************************************

// Selecting parent element

.xx {
  &:hover {
    // code
  }
  &.yy {
    // code
  }
}
                

// Using operators directly +, -, *, /, and %

.xx {
  width: 600px / 960px * 100%;
  // width: 62.5%;
}

                

// If condition

>> sass_1.scss
$item : 10;

.xx {
    @if $item == '10' {
       color : red;
    }
    @else if $item == '20' {
       color : green;
    }
    @else {
       color : blue;
    }   
}


>> css_1.css
.xx {
  color: red;
}
                

// For loops

>> sass_1.scss
@for $item from 1 through 3 {
  .xx-#{$item} { 
      width: 20px * $i; 
  }
}

>> css_1.css
.xx-1 {
  width: 20px;
}
.xx-2 {
  width: 40px;
}
.xx-3 {
  width: 60px;
}

**************************************

// Each loops Type 1

>> sass_1.scss
$menu: one two;

@each $item in $menu {
  .xx-#{$item} {
    background: url('images/#{$item}.jpg');
  }
}

>> css_1.css
.xx-one {
  background: url("images/one.jpg");
}
.xx-two {
  background: url("images/two.jpg");
}

**************************************

// Each loops Type 2

>> sass_1.scss
$menu: (one, 'one.jpg'), (two, 'two.jpg');

@each $item, $val in $menu {
  .xx-#{$item} {
    background: url(val);
  }
}

>> css_1.css
.xx-one {
  background: url('one.jpg');
}
.xx-two {
  background: url('two.jpg');
}

**************************************

// While loops

>> sass_1.scss
$item: 3;
@while $item > 0 {
  .xx-#{$item} { 
      width: 2em * $item; 
  }
  $item: $item - 1;
}

>> css_1.css
.xx-3 {
  width: 6em;
}
.xx-2 {
  width: 4em;
}
.xx-1 {
  width: 2em;
}

// Adds quotes to string, and returns the result.
quote(string)

Example:
quote(Hello world!)
Result: "Hello world!"



// Returns the index of the first occurrence of the substring within string.
str-index(string, substring)

Example:
str-index("Hello world!", "H")
Result: 1



// Returns string with insert inserted at the specified index position.
str-insert(string, insert, index)

Example:
str-insert("Hello world!", " wonderful", 6)
Result: "Hello wonderful world!"



// Returns the length of string (in characters).
str-length(string)

Example:
str-length("Hello world!")
Result: 12



// Extracts characters from string; start at start and end at end, and returns the slice.
str-slice(string, start, end)

Example:
str-slice("Hello world!", 2, 5)
Result: "ello"



// Returns a copy of string converted to lower case.
to-lower-case(string)

Example:
to-lower-case("Hello World!")
Result: "hello world!"



// Returns a copy of string converted to upper case.
to-upper-case(string)

Example:
to-upper-case("Hello World!")
Result: "HELLO WORLD!"



// Returns a unique randomly generated unquoted string (guaranteed to be unique within the current sass session).
unique-id()

Example:
unique-id()
Result: tyghefnsv



// Removes quotes around string (if any), and returns the result.
unquote(string)

Example:
unquote("Hello world!")
Result: Hello world!
                

// Returns the absolute value of number.
abs(number)

Example:
abs(15)
Result: 15
abs(-15)
Result: 15



// Rounds number up to the nearest integer.
ceil(number)

Example:
ceil(15.20)
Result: 16



// Returns whether num1 and num2 are comparable.
comparable(num1, num2)

Example:
comparable(15px, 10px)
Result: true
comparable(20mm, 1cm)
Result: true
comparable(35px, 2em)
Result: false



// Rounds number down to the nearest integer.
floor(number)

Example:
floor(15.80)
Result: 15



// Returns the highest value of several numbers.
max(number...)

Example:
max(5, 7, 9, 0, -3, -7)
Result: 9



// Returns the lowest value of several numbers.
min(number...)

Example:
min(5, 7, 9, 0, -3, -7)
Result: -7



// Converts number to a percentage (multiplies the number with 100).
percentage(number)

Example:
percentage(1.2)
Result: 120



// Returns a random number between 0 and 1.
random()

Example:
random()
Result: 0.45673



// Returns a random integer between 1 and number.
random(number)

Example:
random(6)
Result: 4



// Rounds number to the nearest integer.
round(number)

Example:
round(15.20)
Result: 15
round(15.80)
Result: 16
                

// Adds a single value to the end of the list. separator can be auto, comma, or space. auto is default.
append(list, value, [separator])

Example:
append((a b c), d)
Result: a b c d
append((a b c), (d), comma)
Result: a, b, c, d



// Returns the index position for the value in list.
index(list, value)

Example:
index(a b c, b)
Result: 2
index(a b c, f)
Result: null



// Checks whether the list has square brackets.
is-bracketed(list)

Example:
is-bracketed([a b c])
Result: true
is-bracketed(a b c)
Result: false



// Appends list2 to the end of list1. separator can be auto, comma, or space. auto is default (will use the separator in the first list). bracketed can be auto, true, or false. auto is default.
join(list1, list2, [separator, bracketed])

Example:
join(a b c, d e f)
Result: a b c d e f
join((a b c), (d e f), comma)
Result: a, b, c, d, e, f
join(a b c, d e f, $bracketed: true)
Result: [a b c d e f]



// Returns the length of the list.
length(list)

Example:
length(a b c)
Result: 3



// Returns the list separator used, as a string. Can be either space or comma.
list-separator(list)

Example:
list-separator(a b c)
Result: "space"
list-separator(a, b, c)
Result: "comma"



// Returns the nth element in the list.
nth(list, n)

Example:
nth(a b c, 3)
Result: c



// Sets the nth list element to the value specified.
set-nth(list, n, value)

Example:
set-nth(a b c, 2, x)
Result: a x c



// Combines lists into a single multidimensional list.
zip(lists)

Example:
zip(1px 2px 3px, solid dashed dotted, red green blue)
Result: 1px solid red, 2px dashed green, 3px dotted blue
                

// Map

>> sass_1.scss
$sizes: ("small": 12px, "normal": 18px, "large": 24px);

>> css_1.css
.xx {
  font-size : map-get($sizes, "small");
}

**************************************

// Returns the value for the specified key in the map.
map-get(map, key)

Example:
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-get($font-sizes, "small")
Result: 12px



// Checks whether map has the specified key. Returns true or false.
map-has-key(map, key)

Example:
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-has-key($font-sizes, "big")
Result: false



// Returns a list of all keys in map.
map-keys(map)

Example:
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-keys($font-sizes)
Result: "small", "normal, "large"



// Returns a list of all values in map.
map-values(map)

Example:
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-values($font-sizes)
Result: 12px, 18px, 24px



// Appends map2 to the end of map1.
map-merge(map1, map2)

Example:
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
$font-sizes2: ("x-large": 30px, "xx-large": 36px)
map-merge($font-sizes, $font-sizes2)
Result: "small": 12px, "normal": 18px, "large": 24px, "x-large": 30px, "xx-large": 36px



// Removes the specified keys from map.
map-remove(map, keys...)

Example:
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-remove($font-sizes, "small")
Result: ("normal": 18px, "large": 24px)
map-remove($font-sizes, "small", "large")
Result: ("normal": 18px)
                

// Checks whether the super selector matches all the elements that sub matches.
is-superselector(super, sub)

Example:
is-superselector("div", "div.myInput")
Result: true
is-superselector("div.myInput", "div")
Result: false
is-superselector("div", "div")
Result: true



// Appends the second (and third/fourth etc.) selector to the first selector.
selector-append(selectors)

Example:
selector-append("div", ".myInput")
Result: div.myInput
selector-append(".warning", "__a")
Result: .warning__a



//  
selector-extend(selector, extendee, extender)



// Returns a new selector containing a nested list of CSS selectors based on the list provided.
selector-nest(selectors)

Example:
selector-nest("ul", "li")
Result: ul li
selector-nest(".warning", "alert", "div")
Result: .warning div, alert div



// Returns a list of strings contained in selector using the same format as the parent selector.
selector-parse(selector)

Example:
selector-parse("h1 .myInput .warning")
Result: ('h1' '.myInput' '.warning')



// Returns a new selector with the selectors specified in replacement in place of selectors specified in original.
selector-replace(selector, original, replacement)

Example:
selector-replace("p.warning", "p", "div")
Result: div.warning



// Returns a new selector that matches only elements matched by both selector1 and selector2.
selector-unify(selector1, selector2)

Example:
selector-unify("myInput", ".disabled")
Result: myInput.disabled
selector-unify("p", "h1")
Result: null



// Returns a list of the individual selectors in selectors.
simple-selectors(selectors)

Example:
simple-selectors("div.myInput")
Result: div, .myInput
simple-selectors("div.myInput:before")
Result: div, .myInput, :before
                

// Sass Set Color Functions

// rendered as blue because the blue parameter is set to its highest value (255) and the others are set to 0
rgb(red, green, blue)
Example:
rgb(0, 0, 255); 



// rendered as blue with opacity
rgba(red, green, blue, alpha)	
Example:
rgba(0, 0, 255, 0.3); 



hsl(hue, saturation, lightness)
Example:
hsl(120, 100%, 50%); // green
hsl(120, 100%, 75%); // light green
hsl(120, 100%, 25%); // dark green
hsl(120, 60%, 70%); // pastel green



hsla(hue, saturation, lightness, alpha)
Example:
hsl(120, 100%, 50%, 0.3); // green with opacity
hsl(120, 100%, 75%, 0.3); // light green with opacity



grayscale(color)
Example:
grayscale(#7fffd4);
Result: #c6c6c6



complement(color)
Example:
complement(#7fffd4);
Result: #ff7faa



invert(color, weight)
Example:
invert(white);
Result: black

**************************************

// Sass Get Color Functions

// Returns the red value of color as a number between 0 and 255.
red(color)

Example:
red(#7fffd4);
Result: 127
red(red);
Result: 255



// Returns the green value of color as a number between 0 and 255.
green(color)

Example:
green(#7fffd4);
Result: 255
green(blue);
Result: 0



// Returns the blue value of color as a number between 0 and 255.
blue(color)

Example:
blue(#7fffd4);
Result: 212
blue(blue);
Result: 255



// Returns the hue of color as a number between 0deg and 255deg.
hue(color)

Example:
hue(#7fffd4);
Result: 160deg



// Returns the HSL saturation of color as a number between 0% and 100%.
saturation(color)

Example:
saturation(#7fffd4);
Result: 100%



// Returns the HSL lightness of color as a number between 0% and 100%.
lightness(color)

Example:
lightness(#7fffd4);
Result: 74.9%



// Returns the alpha channel of color as a number between 0 and 1.
alpha(color)

Example:
alpha(#7fffd4);
Result: 1



// Returns the alpha channel of color as a number between 0 and 1.
opacity(color)

Example:
opacity(rgba(127, 255, 212, 0.5));
Result: 0.5

**************************************

// Sass Manipulate Color Functions

// Adjusts the color's hue with a degree from -360deg to 360deg.
adjust-hue(color, degrees)

Example:
adjust-hue(#7fffd4, 80deg);
Result: #8080ff



// Adjusts one or more parameters by the specified amount. 
// This function adds or subtracts the specified amount to/from the existing color value.
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha)

Example:
adjust-color(#7fffd4, blue: 25);
Result:



// Sets one or more parameters of a color to new values.
change-color(color, red, green, blue, hue, saturation, lightness, alpha)

Example:
change-color(#7fffd4, red: 255);
Result: #ffffd4




// Creates a new color of color with the given alpha channel.
rgba(color, alpha)

Example:
rgba(#7fffd4, 30%);
Result: rgba(127, 255, 212, 0.3)



// Creates a color that is a mix of color1 and color2.
// The weight parameter must be between 0% and 100%.
// A larger weight means that more of color1 should be used. 
// A smaller weight means that more of color2 should be used. Default is 50%.
mix(color1, color2, weight)



// Creates a lighter color of color with an amount between 0% and 100%.
// The amount parameter increases the HSL lightness by that percent.
lighten(color, amount)



// Creates a darker color of color with an amount between 0% and 100%.
// The amount parameter decreases the HSL lightness by that percent.
darken(color, amount)



// Creates a more saturated color of color with an amount between 0% and 100%.
// The amount parameter increases the HSL saturation by that percent.
saturate(color, amount)



// Creates a less saturated color of color with an amount between 0% and 100%.
// The amount parameter decreases the HSL saturation by that percent.
desaturate(color, amount)



// Creates a more opaque color of color with an amount between 0 and 1.
// The amount parameter increases the alpha channel by that amount.
opacify(color, amount)



// Creates a more opaque color of color with an amount between 0 and 1.
// The amount parameter increases the alpha channel by that amount.
fade-in(color, amount)



// Creates a more transparent color of color with an amount between 0 and 1.
// The amount parameter decreases the alpha channel by that amount.
transparentize(color, amount)



// Creates a more transparent color of color with an amount between 0 and 1.
// The amount parameter decreases the alpha channel by that amount.
fade-out(color, amount)

                

// Calls a function with arguments, and returns the result.
call(function, arguments...)



// Checks whether the current mixin was passed a @content block.
content-exists()



// Checks whether feature is supported by the current Sass implementation.
feature-exists(feature)

Example:
feature-exists("at-error");
Result: true



// Checks whether the specified function exists.
function-exists(functionname)

Example:
function-exists("nonsense")
Result: false



// Returns the specified function. If css is true, it returns a plain CSS function instead.
get-function(functionname, css: false)



// Checks whether the specified global variable exists.
global-variable-exists(variablename)

Example:
variable-exists(a)
Result: true



// Returns a string representation of value.
inspect(value)



// Checks whether the specified mixin exists.
mixin-exists(mixinname)

Example:
mixin-exists("important-text")
Result: true



// Returns the type of value. Can be number, string, color, list, map, bool, null, function, arglist.
type-of(value)

Example:
type-of(15px)
Result: number
type-of(#ff0000)
Result: color



// Returns the unit associated with a number.
unit(number)

Example:
unit(15px)
Result: px



// Checks whether the specified number has a unit associated with it.
unitless(number)

Example:
unitless(15px)
Result: false
unitless(15)
Result: true



// Checks whether the specified variable exists in the current scope.
variable-exists(variablename)

Example:
variable-exists(b)
Result: true
                

// Importing other saas files
@import "filename";

>> sass_1.scss
.xx {
  // code
}

>> sass_2.scss
@import "sass_1";
.yy {
  // code
}

**************************************

// Partial import for variables and mixins
// _ before filename must

>> _sass_1.scss
$theme : red;

>> sass_2.scss
@import "sass_1";
.yy {
  background-color : $theme;
}

                

// writing resusable block of code

@mixin some-name() {
  transform: rotate(30deg;
}
.xx { 
  @include some-name); 
}

@mixin some-name-2 {
  @include some-name;
}

**************************************

// Passing values to mixin

@mixin some-name($val) {
  transform: $val;
}
.xx { 
  @include some-name(rotate(30deg)); 
}

**************************************

// Passing values to mixin with default values

@mixin some-name($val : scale(1.1)) {
  transform: $val;
}
.xx { 
  @include some-name(rotate(30deg)); 
}

                

// adding current selector to another Selector

.xx {
  // code
}

.yy {
  @extend .xx;
  // .yy class will be added to .xx
}