使用VSCODE 编写 html 页面

【工业界招聘要求要会用Sass或者Less】【Sass也提供另一种语法类似CSS来编写，Scss】

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

【定义变量】

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

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

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

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

【嵌套定义】很容易看出层级关系

$highlight-color: lightgreen;

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

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

【可复用代码】

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

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

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

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

compass compile 以后的样式文件在 stylesheets目录下。

compass 是sass的框架，貌似太臃肿，一般需求sass就够了，可以用来学习sass。

【由于是页面开发】我们只需要静态服务器就可以了，蟒蛇最简单cd到项目根目录 python -m SimpleHTTPServer 9999

【如果用Node】操作是这样，cd到项目根目录 npm init ，然后 npm i --save express 最后 app.use(express.static('public'))

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

学会使用 vscode 自带 Emmet 表达式

section>h2+p*3

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

> 子级别节点

+ 兄弟节点

* 重复次数

【具体场景】长度为10的列表，列表中每个元素都是一个类为item的div，每一个div中，有一个h2元素，然后有一个图片，图片文件分别为image-1.jpg到image-10.jpg。

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

=》解读

一、.item会就是带class的div 。

二、至于 img 里面src模板【 $ 】奇妙之处在于随着迭代从1~10 （哈哈偏移量不是从0开始）

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

使用VSCODE 编写 html 页面

猜你喜欢