@ (less and sass) [less and sass]

[TOC]

Less and sass

Concept of Less:

Less is a CSS preprocessing language, which extends the CSS language, adding variables, mixins, functions and other features, making the CSS easier to maintain and expand.Copy the code

Less can run on Node or in a browser.

Usage:

Here directly use VSCode editing tool, inside the plug-in easy-less, create a.less file, will automatically convert to.css fileCopy the code

Based on the Node

Language features

variable

We use the @ symbol to define variables and then use them in CSS code, for example:

@color:red;

body {
	background:@color;
}
Copy the code

Sometimes, we need to use the same color, the number of times the data, so we can define variables to make the use of smoother. This is a very common way to do it. But we can not only define a variable value, but also use it in other places, such as selectors, paths, and so on:

Selector:

// @myselector: banner; @{mySelector} {font-weight: bold; line-height: 40px; margin: 0 auto; }Copy the code

URL:

// Variables
@images: ".. /img";

// Usage
body {
  color: # 444;
  background: url("@{images}/white-sand.png");
}
Copy the code

hybrid

Blending is a way of introducing (” blending “) a set of attributes from one rule set to another. So let’s say we have a pattern that looks like this

.a, #b {
  color: red;
}
Copy the code

If we want to use this style elsewhere, we can use blending:

.mixin-class {
  .a;
}
.mixin-id {
  #b();
}
Copy the code

You can use either the class name or the ID name. Also, you can call a mixed set with or without parentheses.

However, in the above example, the styles of elements with the names. A and #b will also change. If you don’t want to do this, you can add parentheses after the two mixed sets. Such as:

.a(){
	color: red;
}
Copy the code

Append to the mix set of calls! Important keyword, can make mixed set inside all attributes are inherited! Important:

Such as:

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg; color: @color; } .unimportant { .foo(); } .important { .foo() ! important; }Copy the code

The result is:

.unimportant {
  background: #f5f5f5;
  color: # 900;
}
.important {
  background: #f5f5f5 ! important;
  color: # 900! important;
}
Copy the code

Mixing with parameters

Mixed sets can also accept arguments, which can be passed when called: for example:

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
Copy the code

Call:

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}
Copy the code

Of course, the above call requires passing arguments (hence the parentheses). If you don't want to pass arguments, you can give the mixed set a default argument (variable: argument) for example:

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
Copy the code

This way, the call does not need to pass arguments, so no parentheses are needed:

#header {
  .border-radius;
}
Copy the code

Perhaps you need to pass multiple arguments:

.mixin(@color; @padding; @margin: 2) {
  color: @color;
  padding: @padding; 
  margin: @margin @margin @margin @margin;
}
Copy the code

Arguments can be separated by semicolons (; they do not have to be passed in the same order. Values with special meaning can be passed directly, for example:

#box {.mixin(@padding:10px; red;) }Copy the code

A default value attribute can be used without passing parameters

There may be times when you encounter situations like this:

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: # 000) {
  -webkit-box-shadow: @x @y @blur @color;
     -moz-box-shadow: @x @y @blur @color;
          box-shadow: @x @y @blur @color;
}
Copy the code

If this is the case every time, the following attribute is too many repetitions, so at this point, you might want to use **@arguments**, and then use this:

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: # 000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
Copy the code

You can also use mixing as a function, returning variables from mixins

All variables defined in a mixin are visible and can be used in the calling scope (unless the calling scope defines a variable of the same name).

Example:

.mixin() {
  @width:  100%;
  @height: 200px;
}

.caller {
  .mixin(a);width:  @width;
  height: @height;
}
Copy the code

Output:

.caller {
  width:  100%;
  height: 200px;
}
Copy the code

Nested rules

If we had a paragraph like this:

#header {
	color:red;
}
#header a {
	border: 1px solid lime;
}
#border a:hover {
	color: yellow;
}
Copy the code

So when using less, we can write:

#header {
	color:red;

    a {
        border: 1px solid lime;

        &:hover {
        	color:yellow; }}}Copy the code

See that ampersand up there? This symbol represents all parent selectors (not just the nearest parent). It can also be used to change the order of selectors, for example:

.header {
  .menu {
    border-radius: 5px;
    .no-borderradius & {
      background-image: url('images/button-background.png'); }}}Copy the code

Output:

.header .menu {
  border-radius: 5px;
}
.no-borderradius .header .menu {
  background-image: url('images/button-background.png');
}
Copy the code

operation

Any number, color, or variable can be manipulated.

@h:100px;
#box {
	width:100px + 20px;
	height:@h - 20px;
}
Copy the code

In the example above, we can see that the width and height values are used. The other thing I want to mention here is that only one of the numbers I’m going to calculate has units.

Import the style

Import less in any other style, just like CSS, using import ‘filename’. Such as:

@import "library"; // library.less
@import "typo.css";
Copy the code

For less, the extension is optional

other

Sometimes what you write can be translated, for example:

color:rgb(222.222.111);
width:calc(100% - 100px);
Copy the code

All of the above will be evaluated and compiled by less. If you don’t want them compiled, use ~, for example:

color: ~'RGB (222222111).;
width: ~'calc(100% - 100px)';
Copy the code

Preceded by a ~, followed by quotes

Less functions in here don’t do, because can’t use, if you want to know, to check the website www.css88.com/doc/less/fu…

Sass

The concept of Sass

Sass is an auxiliary tool to enhance CSS. It adds advanced functions such as variables, nested rules, mixins, inline imports and so on on the basis of CSS syntax. These extensions make CSS more powerful and elegant. Using Sass and Sass's style libraries, such as Compass, can help you better organize and manage style files and develop projects more efficiently.Copy the code

The characteristics of Sass

Fully compatible with CSS3. Add variables, nesting, mixins and other functions to CSS. Use functions to calculate color and property values. Advanced functions such as control directives Customize the output formatCopy the code

Syntax format of Sass

Sass has two syntax formats.

The first is SCSS (Sassy CSS) -- the format used in the examples in this article -- which only extends the CSS3 syntax, which is common to all CSS3 syntax in SCSS, while adding Sass features. SCSS also supports most CSS hacks and vendor-specific syntax, as well as the early IE filter syntax. This format uses.scss as the extension name. The other and earliest Sass syntax format, known as the indent format (Indented Sass), is often shortened to "Sass" and is a simplified format. It uses indentation instead of curly braces to indicate that properties belong to a selector, and "newline" instead of a semicolon to separate properties, which many find easier to read and faster to write than SCSS. The indentation format can also use all the functions of Sass, but some places take a different way of expression than SCSS, see the indented syntax Reference for details. This format uses.sass as the extension name.Copy the code

We’re going to use the.SCSS format

The use of Sass

Here we still use VScode’s own compilation tools to learn Sass code

Sass syntax

Nested rules

Sass’s nesting rules are similar to Less’s, allowing one set of CSS styles to be nested within another, with the inner style having its outer selector as a parent selector, for example:

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: # 000000;
}
Copy the code

Compile as follows:

#main p {
  color: #00ff00;
  width: 97%; 
}
#main p .redbox {
  background-color: #ff0000;
  color: # 000000;
}
Copy the code

The parent selector

Consistent with Less, we use & to indicate all children before an element, for example:

#main {color: black; a { font-weight: bold; &:hover { color: red; }}}Copy the code

Compile as follows:

#main {
  color: black; 
}
#main a {
  font-weight: bold; 
}
#main a:hover {
  color: red;
}
Copy the code

Attributes are nested

Some CSS properties follow the same namespace (namespace). For example, font-family, font-size, and font-weight all use font as the namespace of the property. To facilitate the management of such attributes, and to avoid duplicate input, Sass allows attributes to be nested in namespaces, such as:

.funky { font: { family: fantasy; size: 30em; weight: bold; }}Copy the code

Compile as follows:

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}
Copy the code

A namespace can also contain its own attribute values. You can set the style after the font, for example:

.funky { font: 20px/24px { family: fantasy; weight: bold; }}Copy the code

Compile as follows:

.funky {
  font: 20px/24px;
    font-family: fantasy;
    font-weight: bold;
}
Copy the code

SassScript

The variable $

Sass has a variable, but it is different from Less. Sass uses the dollar character $, which is used in the same way as Less, but there are some differences:

1. Variables support block-level scope. Variables defined within nested rules can only be used within nested rules (local variables), and variables not defined within nested rules can be used anywhere (global variables). Converting local variables to global variables can be added! Global declaration:

#main {
  $width: 5em ! global; width:$width;
}

#sidebar {
  width: $width;
}
Copy the code

The $width can be called anywhere except for the parent.

The data type

SassScript supports several main data types:

1. Numbers: 1, 2, 13, 10px
2. String, quoted and unquoted strings, “foo”, ‘bar’, baz
3. Color, blue, # 04a3F9, RGBA (255,0, 0.5)
4. Boolean, true, false
5. A null value, null
6. Array (list), delimited by Spaces or commas, 1.5em 1em 0 2em, Helvetica, Arial, sans-serif
7. Maps, the equivalent of JavaScript object, (key1: value1, key2: value2)

operation

All data types support equality == or! =, in addition, each data type also has its own supported operations.

Digital operation

SassScript supports addition, subtraction, multiplication, division, and integer operations (+, -, *, /, %), as well as relational operations (>, <, >=, <=, ==, =). Only three cases/boxes are considered division operations:

1 if the value, or part of the value, is the return value of a variable or function 2 if the value is wrapped in parentheses 3 if the value is part of an arithmetic expressionCopy the code

Such as:

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5) /2px;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}
Copy the code

Compile as follows:

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
}
Copy the code

If you need to use variables, and you want to make sure that/does not do division and is compiled completely into your CSS file, just wrap the variables with #{} interpolation statements.

p {
  $font-size: 12px;
  $line-height: 30px;
  font: # {$font-size#} / {$line-height};
}
Copy the code

Compile as follows:

p {
  font: 12px/30px;
}
Copy the code

Color calculation

The calculation of the color values is performed in segments, that is, the red, green, and blue values are computed separately:

p {
  color: # 010203 + # 040506;
}
Copy the code

Calculate 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09 and compile to

p {
  color: # 050709;
}
Copy the code

It doesn’t mean much. I won’t say too much

String operation

+ can be used to concatenate strings

p {
  cursor: e + -resize;
}
Copy the code

Compiled into

p {
  cursor: e-resize;
}
Copy the code

Note that if a quoted string (to the left of +) concatenates an unquoted string, the result of the operation is quoted, whereas an unquoted string (to the left of +) concatenates a quoted string, the result of the operation is unquoted.

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}
Copy the code

Compiled into

p:before {
  content: "Foo Bar";
  font-family: sans-serif;
}
Copy the code

When an expression is used with other values, use a space as a concatenation:

p {
  margin: 3px + 4px auto;
}
Copy the code

Compiled into

p {
  margin: 7px auto;
}
Copy the code

Use #{} interpolation statements to add dynamic values to quoted text strings:

p:before {
  content: "I ate #{5 + 10} pies!";
}
Copy the code

Compiled into

p:before {
  content: "I ate 15 pies!";
}
Copy the code

An empty value is treated as inserting an empty string:

$value: null;
p:before {
  content: "I ate #{$value} pies!";
}
Copy the code

Compiled into

p:before {
  content: "I ate pies!";
}
Copy the code

parentheses

Use parentheses to elevate the order of operations

The interpolation statement# {}

We can use variables in selector or attribute names by #{} interpolation statements:

$name: foo;
$attr: border;
p. # {$name#} {{$attr} -color: blue;
}
Copy the code

Compiled into

p.foo {
  border-color: blue;
}
Copy the code

#{} interpolation statements can also insert SassScript into attribute values. In most cases, this may not be as convenient as using variables, but using #{} can avoid Sass running operational expressions and compile CSS directly.

p {
  $font-size: 12px;
  $line-height: 30px;
  font: # {$font-size#} / {$line-height};
}
Copy the code

Compiled into

p {
  font: 12px/30px;
}
Copy the code

Variable definitions! default

Can be added at the end of a variable! Default gives a fail! Default declares that the assigned variable is assigned. If the variable has already been assigned, it will not be reassigned, but if the variable has not been assigned, it will be assigned a new value.content: “Second content?” ! default; $new_content: “First time reference” ! default;

#main {
  content: $content;
  new-content: $new_content;
}
Copy the code

Compiled into

#main {
  content: "First content";
  new-content: "First time reference";
}
Copy the code

Variables that are null are treated as not being! The default value.

$content: null;
$content: "Non-null content"! default;#main {
  content: $content;
}
Copy the code

Compiled into

#main {
  content: "Non-null content";
}
Copy the code

@-RulesWith the instruction

@import

This is almost the same as Less, can be imported SCSS and SASS format files. If the extension name is this, you can omit it. The following types will not compile:

The file extension is.css; The file name starts with http://; The filename is url(); @import Contains media queries.Copy the code

Such as:

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
Copy the code

Compiled into

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
Copy the code

In most cases, @import is usually used at the outermost layer of the file (outside of the nesting rules). In fact, @import can also be nested within CSS styles or @media, which has the same effect as normal usage, except that the imported styles can only appear in the nested layer.

Suppose the example.scss file contains the following styles:

.example {
  color: red;
}
Copy the code

Then import it into the #main style

#main{@import "example";
}
Copy the code

Will be compiled to

#main .example {
  color: red;
}
Copy the code

@media

The @media directive in Sass is used the same way as in CSS, with the added feature of allowing it to be nested within CSS rules. If @Media is nested within CSS rules, at compile time, @Media will be compiled to the outermost layer of the file, containing the nested parent selector. This feature makes @Media easier to use without having to reuse selectors and disrupt the CSS writing process.

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px; }}Copy the code

Compiled into

.sidebar { width: 300px; } @media screen and (orientation: landscape) { .sidebar { width: 500px; }}Copy the code

@media queries can be nested with each other. Sass automatically adds and when compiling

@media screen { .sidebar { @media (orientation: landscape) { width: 500px; }}}Copy the code

Compiled into

@media screen and (orientation: landscape) { .sidebar { width: 500px; }}Copy the code

@media can even use SassScript (such as variables, functions, and operators) instead of condition names or values:

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {.sidebar { width: 500px; }}Copy the code

Compiled into

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {. Sidebar {width: 500px; }}Copy the code

@extend

It’s common when designing a web page that one element uses exactly the same style as another, but adds an extra style. You typically define two classes for elements in HTML, one generic style and one special style. Suppose you wanted to design a normal error style and a severe error style, it would look like this:

<div class="error seriousError">
  Oh no! You've been hacked!
</div>
Copy the code

The style is as follows

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}
Copy the code

The trouble is that you must always remember to refer to.error styles when using.seriouserror, which brings with it a lot of invariants: increased maintenance overhead, bugs, or non-semantic styles for HTML. You can avoid this by using @extend to tell Sass to inherit all styles from one selector to the other.

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError{@extend .error;
  border-width: 3px;
}
Copy the code

The compiled:

.error..seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}
Copy the code

SeriousError, border-width: 3px; seriousError, border-width: 3px; SeriousError is styled separately so that.seriouserror is not used where.seriouserror is used.

Extend extends a repeated style (.error) to a special style (.seriouserror) that needs to include the style. Consider the following example:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError{@extend .error;
  border-width: 3px;
}
Copy the code

Compile as follows:

.error..seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.error.intrusion..intrusion.seriousError {
  background-image: url("/image/hacked.png");
}

.seriousError {
  border-width: 3px;
}
Copy the code

Of course, there are many advanced methods of use, such as extension, multiple extension, and further extension: extension: Class selectors are not the only ones that can be extended. Sass allows extending any selector defined for a single element, such as.special. Cool, a:hover, or a.user[href^=”http://”]

.hoverlink{@extend a:hover;
}
a:hover {
  text-decoration: underline;
}
Copy the code

with

.hoverlink{@extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}
Copy the code

They can be compiled. Multiple extensions, where the same selector can be extended to multiple selectors and the properties it contains will be inherited from all extended selectors:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError{@extend .error;
  @extend .attention;
  border-width: 3px;
}
Copy the code

Extension: After one selector is extended to a second, you can extend the second selector to a third

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError{@extend .error;
  border-width: 3px;
}
.criticalError{@extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}
Copy the code

@extend-Only

Sometimes you need to define a set of styles not for an element but only through the @extend directive, especially when making Sass style libraries in the hope that Sass will ignore styles that are not needed.

Instead, Sass has introduced placeholder selectors that look a lot like normal ID or class selectors, except for # or. It’s replaced by %. They can be used like class or ID selectors, which are not compiled into CSS files when used alone.

// This ruleset won't be rendered on its own.
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
Copy the code

Placeholder selectors need to be used by extension directives, just like class or ID selectors. After extension, the placeholder selectors themselves are not compiled.

.notice{@extend %extreme;
}
Copy the code

Compiled into

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
Copy the code

! optionalThe statement

If @extend fails, an error message will be received, for example, a.important {@exten. notice}. If there is no. Notice selector, an error will be reported. A new selector is generated. Notice if you want @extend not to generate a new selector, you can pass! The optional statement does this, for example:

a.important { @extend .notice ! optional; }Copy the code

@at-root

Make the element output as root, for example:

.parent {
  @at-root {
    .child1{... }.child2{... }}.step-child{... }}Copy the code

Output:

.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }
Copy the code

Mixing instructions

Define mixed instruction@mixin

Mixin directives are used to add names and styles after @mixin, such as a large-text mixin defined by the following code:

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
Copy the code

Blending also needs to include selectors and attributes, and can even reference the parent selector with & :

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px}}Copy the code

Reference Blend style@include

Use the @include directive to refer to the blended style in the form of the blended name followed by the desired parameters (optional) :

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
Copy the code

Compiled into

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; 
}
Copy the code

You can also reference mixed styles in the outermost layer, without defining attributes directly, and without using a parent selector.

@mixin silly-links {
  a {
    color: blue;
    background-color: red; }} @include silly-links;
Copy the code

Compiled into

a {
  color: blue;
  background-color: red;
}
Copy the code

parameter

Parameter is used to set variables for styles in mixed instructions, and assign values to. When defining mixed instructions, write parameters in parentheses, separated by commas, in the format of variables. When quoting an instruction, write the values in parentheses in the order of the arguments:

The use of parameters is almost zero with less

@mixin sexy-border($color.$width) {
  border: {
    color: $color;
    width: $width;
    style: dashed; }}p{@include sexy-border(blue, 1in); }
Copy the code

Compiled into

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
}
Copy the code

Parameters of the variable

Sometimes, it is not clear how many arguments are required for a mixed instruction, such as a mixed instruction on box-shadow that does not determine how many ‘shadows’ will be used. In this case, you can use parameter variables… The declaration (written at the end of the argument) tells Sass to treat these arguments as a list of values:

@mixin box-shadow($shadows...). { -moz-box-shadow:$shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
Copy the code

Compiled into

.shadowed {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
Copy the code

Parameter variables can also be used to refer to mixed instructions (@include), as usual, by referring to the values in a list of values as arguments:

@mixin colors($text.$background.$border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...). ; }Copy the code

Compiled into

.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}
Copy the code

The output format

The default CSS output format of Sass is beautiful and clearly reflects the document structure. Sass also provides a variety of output formats to meet other requirements.

Sass provides four output formats, which can be set by the :style option option or by using the –style option on the command line.

:nested

The Nested style is the default output format of Sass and clearly reflects the structural relationship between CSS and HTML. Selectors and properties occupy a single line with the same amount of indentation as in Sass files, and the amount of indentation for each line reflects the number of layers within the nested rules. When reading large CSS files, this style makes it easy to analyze the main structure of the file.

#main {
  color: #fff;
  background-color: # 000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }
Copy the code

:expanded

Expanded output is more like a handwritten style, with the selector, properties, and so on all on one line, the properties indent according to the selector, and the selector does not indent at all.

#main {
  color: #fff;
  background-color: # 000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}
Copy the code

:compact

The Compact output takes up less space than the previous two. Each CSS rule takes only one line and contains all the attributes under it. Nested selectors output with no empty lines, while non-nested selectors output blank lines as delimiters.

#main { color: #fff; background-color: # 000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
Copy the code

:compressed

Compressed output deletes all meaningless Spaces, blank lines, and comments, and tries to compress the file volume to the minimum. At the same time, it will make other adjustments, such as automatically replacing the color expression that takes up the least space.

#main{color:#fff;background-color:# 000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
Copy the code