A simple list of CSS frame sass

Sass end of file has more stringent formatting requirements, scss files closer to native CSS

Like sass files.

CSS code copy content to clipboard

#main

Color: #fff

&-sidebar

BORDER:1PX Solid

Equal to the SCSS

CSS code copy content to clipboard

#main {

Color:black;

&-sidebar {border:1px solid;}

}

After compilation for

The & that represents the parent element can only appear on the head, otherwise it will not be resolved.

Nested properties

CSS code copy content to clipboard

. Funky {

Font: {

Family:fantasy;

Size:30em;

Weight:bold;

}

}

Compiled to

CSS code copy content to clipboard

. Funky {

Font-family:fantasy;

Font-size:30em;

Font-weight:bold; }

This is very useful in some complex CSS3 properties, such as animate

string interpolation

Use #{} as selector variable

CSS code copy content to clipboard

$name: foo;

$attr: Border;

p.#{$name} {

#{$attr}-color:blue;

}

p {

$font-size:12px;

$line-height:30px;

Font: #{$font-size}/#{$line-height};

}

The second example is 12 except 30 if you don't use a literal number.

Operator

CSS code copy content to clipboard

p {

width:1in + 8pt;

}

Units are automatically converted if they can be converted

Compile as:

CSS code copy content to clipboard

p {

width:1.111in; }

p {

font:10px/8px; Plain CSS, no division

$width: 1000px;

Width: $width/2; Uses A variable, does division

Width:round (1.5)/2; Uses a function, does division

Height: (500PX/2); Uses parentheses, does division

margin-left:5px + 8px/2px; Uses +, does division

}

Direct literal, variable use, function, bracket, precedence

Above compiled to

CSS code copy content to clipboard

p {

font:10px/8px;

width:500px;

height:250px;

margin-left:9px;

}

Color:

CSS code copy content to clipboard

p {

Color: #010203 + #040506;//Add RBG three-bit add

Color: #010203 * 2;//multiplication

Color:rgba (255, 0, 0, 0.75) + rgba (0, 255, 0, 0.75);//overlay with alpha channel

Color:opacify ($translucent-red, 0.3);//control transparent function, enhance non-transparent

Background-color:transparentize ($translucent-red, 0.25); Control transparent functions, enhance transparency

}

Default variable:

CSS code copy content to clipboard

$content: "The";

$content: "Second content"!default;

$new _content: "Reference"!DEFAULT;

#main {

Content: $content;

New-content: $new _content;

}

!default such as assignment before the variable is assigned, not assigned, assigned