8.14
一、sass
1.简介
css编写时嵌套层级多导致代码编写不方便。sass的出现就是为了解决css的缺点。
sass是世界上最好的css扩展语言。在正常的编写css的基础上，增加了很多变量，函数，循环，判断等类似编程语言的代码模式。极大的提高了编写样式的效率。还有许多的内置函数（如颜色加深，颜色淡化）用于高效的属性设置。使得css也可以用类似脚本的方式进行编写。
sass不能直接被浏览器识别，所以需要进行编译成正常的css文件才能被浏览器使用
2.将sass编译成为CSS
1)、在vs code 中 安装 easy sass
2)、在vs code 中创建一个 xxx.scss 文件 ==（注意这里就是 scss 结尾 不是 sass 结尾）
3)、在xxx.scss 文件中书写 scss代码
4)、保存代码后， 当前的 xxx.scss 文件旁边会自动生成两个文件
xxx.css: 文件内容为编译后的 css 代码
xxx.min.css: 文件内容为编译后并且压缩过的css代码
3.sass的注释
单行注释，但是在编译的时候不保留
多行注释
编译的时候可以保留
压缩的时候不保留
多行注释
编译和压缩的时候都会保留
4.变量
在sass中`$`来定义变量：
```scss
$color:red;
$font_size:12px;
.header{
background-color: $color;
font-size:$font_size*2;
}
```
一般用来定义颜色或者一些常用的像素值
5.嵌套
```scss
后代关系
.wrap{
div{
width:$font_size*10;
}
}
/*子类关系*/
ul{
>li{
padding:12px;
}
}
/*大括号中表示自己*/
.nav{
&:hover{
background-color: $color;
}
li{
&:hover{
color:$color;
}
}
}
群组嵌套按正常写即
属性嵌套
.content{
border: {
style:solid;
color:$color;
width:2px;
}
}
.left{
border:1px solid #000{
left:none;
bottom:{
width:3px;
}
};
}
```
编译结果：
```css
/*后代关系*/
.wrap div {
width: 120px;
}
/*子类关系*/
ul > li {
padding: 12px;
}
/*大括号中表示自己*/
.nav:hover {
background-color: red;
}
.nav li:hover {
color: red;
}
/*群组嵌套按正常写即可*/
/* 属性嵌套 */
.content {
border-style: solid;
border-color: red;
border-width: 2px;
}
.left {
border: 1px solid #000;
border-left: none;
border-bottom-width: 3px;
}
```
二、js
1.JS是什么
JS是一种运行在客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能
浏览器就是一种运行JS脚本语言的客户端，JS的解释器被称为JS引擎，为浏览器的一部分
2.JS的组成
* JavaScript 是由 ECMAScript，DOM 和 BOM 三者组成的。
1. ECMAScript: 定义了JavaScript 的语法规范,描述了语言的基本语法和数据类型
2. DOM (Document Object Model): 文档对象模型
* 有一套成熟的可以操作 ==页面元素的 API==，通过 DOM 可以操作页面中的元素。比如： 增加个 div，减少个 div，给 div 换个位置等
* API:
* `application programming interface` 的简写;
* 翻译：应用程序编程接口；大白话：`别人写好的代码，或者编译好的程序，提供给你使用，就叫作api`
3. BOM (Browser Object Model): 浏览器对象模型
* 有一套成熟的可以操作 ==浏览器的 API==，通过 BOM 可以操作浏览器。比如： 弹出框、浏览器跳转、获取分辨率等
3.JS的三种书写方式
1）、行内式
2）、内部式
alert('hello world')
3）、外部式
4.JS定义变量
什么是变量？
变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据；
为什么要定义变量
使用变量可以方便的获取或者修改内存中的数据
如何定义变量
使用一个 var 的关键字进行定义，后面必须加一个空格，空格后面自定义变量名
var a；
var b;
var c;
5.变量赋值
变量定义之后，初始时没有进行赋值，内部有一个默认存储的值叫 undefined(未定义) 表示内部未赋值，但可以存储数据了
* 变量赋值的方式：通过等号 = 赋值，等号右边的值赋值给左边的变量 ==（等号在 JS 中叫做 赋值号；书写时，等号 = 两侧习惯书写一个空格）==
// 变量定义
var a;
// 变量赋值
a = 1;
// 变量定义并赋值
var b = 2;
