预处理Sass样式开发重点_sass 站点

https://sass-lang.com/guide

sass官方英文文档进入学习模块：
首先安装sass，如果是node开发环境，npm不多说

npm install -g sass

安装成功后

第一站：监听

• 建立一个index.scss在index目录下
  语法解析：

sass --watch input.scss output.css

效果：

生成的css即为监听出的css文件，map为对原代码进行定位的文件

watching for changes可以进行实时监听，保存scss后，会自动进行css的输出

通过目录方式监听：

sass --watch app/sass:public/stylesheets

例子如下：
目录结构：

此方法即可满足监听多个scss文件编译为css文件

创建一个package.json

npm init -y

生成默认的package.json

{
  "name": "sass",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

可以将刚刚的脚本方法存放在start中：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200421132017523.png?x-oss-proces

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

s=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70)
这里遇到一个问题，即使用其他的名称会报错，必须使用：

where <command> is one of:
    access, adduser, audit, bin, bugs, c, cache, ci, cit,
    clean-install, clean-install-test, completion, config,
    create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
    edit, explore, get, help, help-search, hook, i, init,
    install, install-ci-test, install-test, it, link, list, ln,
    login, logout, ls, org, outdated, owner, pack, ping, prefix,
    profile, prune, publish, rb, rebuild, repo, restart, root,
    run, run-script, s, se, search, set, shrinkwrap, star,
    stars, start, stop, t, team, test, token, tst, un,
    uninstall, unpublish, unstar, up, update, v, version, view,
    whoami

第二站：嵌套

scss的嵌套：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

↓转化为css

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

&也可以代表嵌套外层

xxx &形式
则内嵌套外

第三站：自定义变量

自定义primary-color

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

↓转化为css

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

第四站：部分文件

您可以创建部分Sass文件，其中包含一些CSS片段 ，您可以将其包含在其他Sass文件中。这是模块化CSS并帮助使事情易于维护的好方法。部分文件是一个Sass文件，名称前带有一个下划线。您可以将其命名为_partial.scss。下划线让Sass知道该文件只是部分文件，不应将其生成为CSS文件。

Sass partials are used with the @use rule.
例如：@use ‘base’;

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。