npm、sass

一、npm

1.1、什么是npm

简单总结，npm就是前端开发广泛使用的包管理工具。

1.2、npm能干什么

它可以让我们把可复用的框架代码发布到一个地方，可以供大家一起使用。

1.3、npm的安装

npm是依赖node.js的,node.js的安装去http://nodejs.cn/download/,也可以参考我的上一篇博客

1.4、npm的更新

npm install npm@latest -g
//g  全局安装（下面会讲到）
//npm@latest 更新到最新版本

二、package.json文件

2.1、什么是package.json文件

● 是一个包说明文件(项目描述文件)，用来管理包（项目）；
● json格式的文件；
● 位于当前项目的根目录下。

2.2、作用是什么

● 描述项目依赖了哪些包；
● 允许我们使用“语义版本规则”，指明项目依赖的版本；
● 更容易更与他人共享。

2.3、怎么创建

npm init    //创建一个package.json文件
npm init --yes  //一键创建package.json文件

示意图：

2.4、package.json的内容

{ 
	"name": "y", //项目名
	"version": "1.0.0", //版本号
	"description：":"",// 描述信息
	"main": "index.js",// 入口文件
	"scripts": { }, // 支持的脚本，默认是一个空的test
	"author": "",// 作者信息
	"license": "ISC",//默认是MIT
	"keywords": [],//关键字
	"dependencies":"",//项目依赖的模块 
}

2.5、指定依赖的包

我们需要在package.json文件中指定项目依赖的包，别人拿到项目的时候，可以使用npm install直接下载依赖的这些包。

dependencies， 在生产环境中需要用到的依赖
devDependencies， 在开发、测试环境中用到的依赖

• 安装包命令

//安装时，将信息写入package.json中的dependencies中
npm install --save 
//安装时，将信息写入package.json中的devDependencies中
npm install --save-dev 

• 删除包命令

// 只删除，如果有依赖，依然保存
npm uninstall 包名 
// 删除的同时把依赖信息给删除了
npm uninstall --save 包名 

2.6、全局安装

2.6.1、什么是全局安装

把包安装在全局位置，一般在 \Users\用户名\AppData\Roaming\ 目录下。

npm install xxx -g   //g 全局安装

npm root -g   //查看全局安装目录

三、sass

3.1、什么是sass

SASS（Syntactically Awesome Stylesheet）是一个CSS预处理器，有助于减少CSS的重复，节省时间。它是更稳定和强大的CSS扩展语言。

3.2、sass后缀名的区别

• .sass

$font-stack: Helvetica, sans-serif //定义变量 
$primary-color: #333 //定义变量 
body
	font: 100% $font-stack 
	color: $primary-color

• .scss

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

◆文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名；
◆语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号和分号，而 SCSS 的语法书写和 CSS 语法书写方式非常类似。

3.3、下载sass

npm install -g sass  //全局下载

3.4、sass的使用

• 步骤一

首先要建立2个文件夹，文件夹名称任意，再输入以下命令监听

sass --watch sass:css  //（sass:css为文件夹名）

• 步骤二

在.scss 文件写入内容，另外一个css文件夹就会自动出现一个css文件，在写代码时命令窗口不能关闭，写入scss文件中的样式自动添加到css文件里。

实例：

//在.scss文件里的代码
$a:#fff; 
$b:#000; 
body {
	color: $a; 
	background: $b; 
	width: 500px; 
	height: 100px; 
}

自动转为

// .css里面的代码
body { 
	color: #fff; 
	background: #000; 
	width: 500px; 
	height: 100px; 
}
/*# 
sourceMappingURL=a.css.map 
*/

3.5、sass的变量和注释

Sass 使用$定义变量
// 单行注释 不会出现在css文件里
/* */ 多行注释 会出现在css文件里

// 定义变量
	$bgcolor:blue;
	$width:200px;
	$height:200px;
	$fontsize:40px;

//  这是单行注释，不会到css文件里
/*
    这是多行注释，会去到css文件里
*/

注意：Sass变量的作用域,只能在当前的层级上有效果

3.6、sass 嵌套

Sass 嵌套 CSS 选择器类似于 HTML 的嵌套

• 元素嵌套

//.scss文件    &代表父级元素
ul{
    width: $width;
    &>li{
      height: $height;  
    }
}

//.css文件
ul {
  width: 200px;
}
ul > li {
  height: 200px;
}

• 属性嵌套

//.scss文件    &代表父级元素
.father {
  color: red;
  &-item {
    color: orange;
  }
}

//.css文件
.father {
  color: red;
}
.father .father-item {
  color: orange;
}

3.7、sass插值

3.7.1、什么是插值

插值就是可以在特定的区域插入一段表达式或者插入一个变量，以此来实现内容动态变换的需求。sass 中使用 #{}实现插值。

//.scss文件  用$name代替color这个属性
$name:color;

p{
    background-#{$name}: pink;
    border-#{$name}: red;
}

//.css文件
p{
	background-color: pink;
    border-color: red;
}

3.8、sass函数

@function 函数名 定义函数

// 无参函数   return关键字也用@return
@function a() { 
	@return 100px;
}

// 有默认值的参数 
@function a($arg: 100px) {
 	@return $arg; 
 }

// 无默认值的参数 
@function b($arg) { 
	@return $arg; 
}

3.9、sass 继承

继承，也叫代码重用，在 sass 中支持对样式进行继承
@extend 来继承样式

//.scss文件
.a {
	width: 10px; 
}
.b {
	@extend .a;   //.b继承了.a里的样式
	height: 10px; 
	color: red; 
}

转化为.css文件

.a, .b { 
	width: 10px; 
}
.b {
	height: 10px; 
	color: red; 
}

3.10、sass 混合指令

混合指令可以定义在样式表中重复使用的样式，这可以避免过多重复的样式，

//@mixin  定义
//@include  引用

// 定义不接收参数的混合指令 
@mixin border { 
	border: {
		width: 1px; 
		color: #cccccc; 
		style: solid; 
	} 
}

//使用
.box { 
	// 引用混合指令 
	@include border; 
}

//显示效果 
.box { 
	border-width: 1px; 
	border-color: #cccccc; 
	border-style: solid; 
}

// 定义接收参数的混合指令 
@mixin font($size: 12px, $weight: 100px) { 
	font: { 
		family: "Myfont"; 
		weight: $weight; 
		size: $size; 
	} 
}

//使用： 
.item { 
	// 引用混合指令并传参 
	@include font(20px, 500px); 
}

//显示效果
.item { 
	font-family: "Myfont"; 
	font-weight: 500px; 
	font-size: 20px; 
}

3.11、循环和判断

3.11.1、循环语句

//两种循环方式
//$i表示变量，start表示起始值，end表示结束值，
//through表示包括end这个数，而to则不包括end这个数。
@for $i from <start> through <end> 
@for $i from <start> to <end>

@for $i from 1 through 3{ 
	.item-#{$i}{ 
		color:green; 
	} 
}

3.11.2、判断语句

p {
	@if 1 + 1 == 2 { border: 1px solid; } 
	@if 5 < 3 { border: 2px dotted; } 
	@if null { border: 3px double; } 
}

p {border: 1px solid; }

3.12、导入

sass中的@import可以导入 .css文件和.scss文件

// _a.scss 文件
. item { 
	width: 100px;
	height: 200px; 
}

// style.scss 文件
.box {
	@import '_a.scss'; //导入_a.scss
}

整理了几条博客，也许你用的上：

npm修改默认缓存路径
windows下安装sass依赖环境ruby
vscode无法使用命令解决
sass中文文档