Use VSCODE to write html pages

[Industrial recruitment requires the ability to use Sass or Less] [Sass also provides another syntax similar to CSS to write, Scss ]

……………………………………………………………………………………………………………………………………………………………………

【Define variables】

$body-color: #efefef;
$text-color: #4f4f4f;

body {
    background-color: $body-color;
    color: $text-color;
}

a:hover {
    background-color: $text-color;
    color: $body-color;
}

………………………………………………………………………………………………………………

[Nested Definition] It is easy to see the hierarchical relationship

$highlight-color: lightgreen;

.hero {
    h1 {
        font-size: 4em;
    }

    p {
        color: white;
        a {
            color: $highlight-color;
        }
    }
}

【Reusable code】

@mixin radius($radius: 5px) {
    border-radius: $radius;
}

.hero {
    @include radius(10px);
}

.gallery {
    p {
        background-color: $body-color;
        @include radius(5px);
    }
}

………………………………………………………………………………………………………………………………………………

The style files after compass compile are in the stylesheets directory.

compass is the framework of sass, which seems to be too bloated. Generally, sass is enough and can be used to learn sass.

[Because it is a page development] We only need a static server. The easiest way for python is to cd to the project root directory python -m SimpleHTTPServer 9999

[If you use Node] the operation is like this, cd to the project root directory npm init, then npm i --save express and finally app.use(express.static('public'))

……………………………………………………………………………………………………………………………………………………………………………………………………

Learn to use vscode's own Emmet expressions

section>h2+p*3

<section>
    <h2></h2>
    <p></p>
    <p></p>
    <p></p>
</section>

> Child level node

+ sibling node

* repeat times

[Specific scene] A list with a length of 10. Each element in the list is a div with a class of . In itemeach div, there is an h2 element, and then there is an image. The image files are image-1.jpgto image-10.jpg.

ul>li*10>.item>h2+img[src="image-$.jpg"]

= "Interpretation

First, .item will be a div with a class.

2. As for the src template [ $ ] in img, the magic is that with the iteration from 1 to 10 (haha, the offset does not start from 0)

………………………………………………………………………………………………6

Use VSCODE to write html pages

Guess you like