自动化构建初体验

1、通过sass增强css的编程性

（1）在开发时添加构建环节

（2）在开发环节编写css样式

（3）通过工具将sass构建为css

2、具体操作

（1）创建项目目录

（2）yarn init初始化package.json

（3）新建index.html

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web App</title>
    <link rel="stylesheet" href="scss/main.scss">
</head>

<body>

</body>

</html>

（4）新建scss/main.scss文件

main.scss

$body-bg:#f8f9fb;
$body-color:#333;
body{
    margin: 0 auto;
    padding: 20px;
    max-width: 800px;
    background-color: $body-color;
    color: $body-color;
}

（5）sass不能在浏览器环境中直接使用，在开发阶段需要使用工具将scss转为css

yarn add sass --dev  // 此为开发依赖

// 执行后node-modules下会出现.bin文件夹，bin下有sass命令文件

（6）在命令行中通过路径找到命令

.\node_modules\.bin\sass  //打印帮助信息

（7）命令使用方法（将scss转为css）

.\node_modules\.bin\sass scss/main.scss css/style.css

// scss/main.css 为输入路径
// css/style.css 为输出路径

 

posted on 2021-02-23 11:50  phantom_yy  阅读(37)  评论(0)    收藏  举报
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3