vue 项目界面绘制 ---- stylus

stylus

• 兼容 less 的大部分语法
• <link rel="stylesheet" href="stylus/index.css">
• less 语法 省略 {}
• 缩进 分割语法块
• 分号 , 冒号 可以省略
• 变量使用方式： 不识别 @height: 40px，而是 $height=40px
• 父级引用器： &
• 混合 mixins.styl ：
• less:

.line-height(@h){

height: @h

line-height: @h

}

---------------------------------------------------

@import "mixins.styl"

• stylus:

line-height(h){

height h

line-height h

}

---------------------------------------------------

@import "mixins.styl"

line-height(41px)

• a

---------------------------------------------------------------------------------

npm install -g stylus

文件后缀： index.styl 

stylus 自动编译

File - settings - Tools - file Watchers

点击 +

选择 stylus ，直接 ok 应用

---------------------------------------------------------------------------------

iconfont

选择目标 ---- 添加入库 ---- 购物车添加进项目 ---- 下载到本地

UI会直接给 .eot .svg .ttf .woff .woff2 ---- 查看说明书使用 demo_index.html

将 iconfont.css 放到 项目的 css 文件夹中，引入 css 后直接使用就好 <link >

• 使用方式一 ---- unicode 只支持单色 引用 兼容到 ie6

<i class="iconfont">&#xe61f;</i>

• 使用方式二 ---- font-class 引用兼容到 ie8

<i class="iconfont">&#xe61f;</i>

• 使用方式三 ---- 引入 js/iconfont.js ---- 引入通用 css 代码 

<svg class="icon" aria-hidden="true"></svg>

自制字体图标 https://icomoon.io

选择 svg 生成字体GrnerateSVG&More

修改

下载

保存 font 文件，引入 css 文件

• 使用方式一 类引用： <i class="icon-search"></i>
• 使用方式二 Unicode 引用： <i class="icon-">&#xe61f;</i>

---------------------------------------------------------------------------------

<header>

版芯固定 1190px / 1226px，两翼自适应

浮动不会超越上一个块级元素

padding 和 border 实现 导航距离分割线

vue 项目界面绘制 ---- stylus

原文：https://www.cnblogs.com/tianxiaxuange/p/10363973.html