最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

然后我们安装sass，依赖ruby的包管理工具，sass的安装也是非常简单的。直接在命令行中输入：

gem install sass

按回车键确认，等待一段时间的下载安装就会提示你sass安装成功。

检测是否安装成功，在命令行输入：

sass -v

如果有sass的版本号提示，则表明安装成功。

如果要安装beta版本的，可以在命令行中输入

gem install sass --pre

---

• 最近因为墙的比较厉害，如果你没有安装成功，那么请参考下面的淘宝的RubyGems镜像安装sass，如果成功则忽略。

由于国内网络原因（你懂的），导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源，先移除默认的https://rubygems.org源，然后添加淘宝的源https://ruby.taobao.org/，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入sass安装命令gem install sass了.

gem sources --remove https://rubygems.org/

gem sources -a https://ruby.taobao.org/

gem sources -l

如果输出：

*** CURRENT SOURCES ***

https://ruby.taobao.org

则表示镜像替换成功，下一步

gem install sass

按回车键确认，等待一段时间就会提示你sass安装成功。

---

如果你熟悉git命令的话，你还可以从sass的Git repository来安装，git的命令行为

git clone git://github.com/nex3/sass.git

cd sass

rake install

---

升级sass版本的命令行指令是：

gem update sass

·

如果想要安装sass的某一特定版本，命令行指令是：

gem install sass --version=3.3.0

·

如果想要删除sass的某一特定版本，命令行指令是：

gem uninstall sass --version=3.3.0

·

卸载sass,命令行指令是：

gem uninstall sass

·

查看sass版本的命令行指令是：

sass -v

·

查看ruby安装的所有程序包，命令语句是：（这个还挺有用的）

gem list

---

那么到现在，我们的电脑就有了sass环境了，我们下面来进行sass的学习阶段。

---

sass有两种后缀的文件：

一种后缀名为.sass。这种类型的文件不使用大括号和分号；

另一种后缀名为.scss。这种和我们平时写的css文件格式差不多，使用大括号和分号。对于我们写css的人员来说，没有任何障碍，很快上手。所以，我们就使用.scss的文件类型来写sass。

例如：我们写了一个style.scss的文件，然后用sass将其编译成style.css，我们在项目依旧使用的是style.css文件。可能你就会说了，为什么要这么麻烦呢，还不如直接写css。那是因为sass强大的魅力以及用sass来写的话，能给我们带来很大的便捷，不信我们就来试试吧。

---

新建一个文件夹，在下面新建一个style.scss文件：

p {

background: #0982c1;

}

span {

color: #f4f5f5;

}

h1 {

color: #333;

}

h2 {

color: #999;

}

h3 {

color: #f66;

}

h4 {

color: #f69;

}

h5 {

color: #ff9;

}

h6 {

color: #eee;

}

○ 单文件转换命令

sass style.scss style.css

就会在文件夹下生成一个style.css文件了。

○ 如果不想每次修改style.scss后都要执行一次单文件转换命令，我们可以使用

单文件监听命令

sass --watch style.scss:style.css

○ 同理，我们还有文件夹监听命令，可监听一个文件夹下多个文件。

sass --watch sassFileDirectory:cssFileDirectory

○ css文件转成sass/scss文件

sass-convert style.css style.sass

sass-convert style.css style.scss

---

○ sass 中多值变量

多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象

list

list数据可以通过空格，逗号或者小括号分隔多个值，可用nth($val,$index)取值。关于list数据操作还有很多其他函数如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等，具体可参考sass Functions（搜索List Functions即可）

定义

//一维数据

$px: 5px 10px 20px 30px;

//二维数据，相当于js中的二维数组

$px: 5px 10px, 20px 30px;

$px: (5px 10px) (20px 30px);

使用

//sass style

//-------------------------------

$linkColor: #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值

a{

color:nth($linkColor,1);

&:hover{

color:nth($linkColor,2);

}

}

生成

//css style

//-------------------------------

a{

color:#08c;

}

a:hover{

color:#333;

}

map

map数据以key和value成对出现，其中value又可以是list。格式为：$map:(key1:value1,key2:value2,key3:value3);。可通过map-get($map,$key)取值。关于map数据还有很多其他函数如map-merge($map1,$map2)，map-key($map)，map-values($map)等，具体可参考sass Functions（搜索Map Functions即可）

定义

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

使用

//sass style

//-------------------------------

$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);

@each $header, $size in $headings {

#{$header} {

font-size: $size;

}

}

生成

//css style

//-------------------------------

h1 {

font-size: 2em;

}

h2 {

font-size: 1.5em;

}

h3 {

font-size: 1.2em;

}

○ sass 中全局变量

在变量值后面加上!global即为全局变量。这个目前还用不上，不过将会在sass 3.4后的版本中正式应用。目前的sass变量范围饱受诟病，所以才有了这个全局变量。

目前变量机制

在选择器中声明的变量会覆盖外面全局声明的变量。(这也就人们常说的sass没有局部变量)

//sass style

//-------------------------------

$fontSize: 12px;

body{

$fontSize: 14px;

font-size:$fontSize;

}

p{

font-size:$fontSize;

}

生成

//css style

//-------------------------------

body{

font-size:14px;

}

p{

font-size:14px;

}

启用global之后的机制

请注意，这个目前还无法使用，所以样式不是真实解析出来的。

//sass style

//-------------------------------

$fontSize: 12px;

$color: #333;

body{

$fontSize: 14px;

$color： #fff !global;

font-size:$fontSize;

color:$color;

}

p{

font-size:$fontSize;

color:$color;

}

生成

//css style

//-------------------------------

body{

font-size:14px;

color:#fff;

}

p{

font-size:12px;

color:#fff;

}

这里设置了两个变量，然后在body里面重新设置了下，有点不同的是对于$color变量，我们设置了!global。通过编译后的css可以看到font-size取值不同，而color取值相同。与上面的机制对比就会发现默认在选择器里面的变量为局部变量，而只有设置了!global之后才会成为全局变量。

关于变量的详细分析请查阅sass揭秘之变量

嵌套（Nesting）

sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。

选择器嵌套

所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。

在选择器嵌套中，可以使用&表示父元素选择器

这个就不写demo了。

属性嵌套

所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。拿个官网的实例看下：

//sass style

//-------------------------------

.fakeshadow {

border: {

style: solid;

left: {

width: 4px;

color: #888;

}

right: {

width: 2px;

color: #ccc;

}

}

}

生成

//css style

//-------------------------------

.fakeshadow {

border-style: solid;

border-left-width: 4px;

border-left-color: #888;

border-right-width: 2px;

border-right-color: #ccc;

}

当然，这只是一个例子用来描述属性嵌套，实际中，关于border的样式我们肯定不会这么去写。

@at-root

sass3.3.0中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。

普通跳出嵌套

关于sass中注释中有中文编译就报错的解决：

在sass文件开头加上@charset "UTF-8";

//没有跳出

.parent-1 {

color:#f00;

.child {

width:100px;

}

}

//多个选择器跳出

.parent-3 {

background:#f00;

@at-root {

.child1 {

width:300px;

}

.child2 {

width:400px;

}

}

}

@at-root(without:...)和@at-root(with:...)

默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support，因为@support目前还无法广泛使用，所以在此不表）。我们默认的@at-root其实就是@at-root (without:rule)。

//sass style

//-------------------------------

//跳出父级元素嵌套

@media print {

.parent1{

color:#f00;

@at-root .child1 {

width:200px;

}

}

}

//跳出media嵌套，父级有效

@media print {

.parent2{

color:#f00;

@at-root (without: media) {

.child2 {

width:200px;

}

}

}

}

//跳出media和父级

@media print {

.parent3{

color:#f00;

@at-root (without: all) {

.child3 {

width:200px;

}

}

}

}

生成

//-------------------------------

@media print {

.parent1 {

color: #f00;

}

.child1 {

width: 200px;

}

}

@media print {

.parent2 {

color: #f00;

}

}

.parent2 .child2 {

width: 200px;

}

@media print {

.parent3 {

color: #f00;

}

}

.child3 {

width: 200px;

}

@at-root与&配合使用

//sass style

//-------------------------------

.child{

@at-root .parent &{

color:#f00;

}

}

生成

//css style

//-------------------------------

.parent .child {

color: #f00;

}

应用于@keyframe

如果说要体现sass的优势，我想这个最能体现了。

相比于之前在css中使用@keyframe来定义动画，然后在元素中调用，如果一个文件中@keyframe比较多的话，在我们想要调用动画的时候，动画与元素之间的关联性比较差。

我们结合@at-root的话，就会带来不一样的效果。

//sass style

//-------------------------------

.demo {

…

animation: motion 3s infinite;

@at-root {

@keyframes motion {

…

}

}

}

每一个元素的动画样式都可以写在里面

生成

//-------------------------------

.demo {

…

animation: motion 3s infinite;

}

@keyframes motion {

…

}

混合(mixin)

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。

无参数minxin

//sass style

//-------------------------------

@mixin center-block {

margin-left:auto;

margin-right:auto;

}

.demo{

@include center-block;

}

//css style

//-------------------------------

.demo{

margin-left:auto;

margin-right:auto;

}

有参数mixin

//sass style

//-------------------------------

@mixin opacity($opacity:50) {

opacity: $opacity / 100;

filter: alpha(opacity=$opacity);

}

HTTP

• HTTP 报文结构是怎样的？

• HTTP有哪些请求方法？

• GET 和 POST 有什么区别？

• 如何理解 URI？

• 如何理解 HTTP 状态码？

• 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

• 对 Accept 系列字段了解多少？

• 对于定长和不定长的数据，HTTP 是怎么传输的？

• HTTP 如何处理大文件的传输？

• HTTP 中如何处理表单数据的提交？

• HTTP1.1 如何解决 HTTP 的队头阻塞问题？

• 对 Cookie 了解多少？

• 如何理解 HTTP 代理？

• 如何理解 HTTP 缓存及缓存代理？

• 为什么产生代理缓存？

• 源服务器的缓存控制

• 客户端的缓存控制

• 什么是跨域？浏览器如何拦截响应？如何解决？

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

也可以给参数设置默认值。声明的@mixin通过@include来调用。

无参数minxin

//sass style

//-------------------------------

@mixin center-block {

margin-left:auto;

margin-right:auto;

}

.demo{

@include center-block;

}

//css style

//-------------------------------

.demo{

margin-left:auto;

margin-right:auto;

}

有参数mixin

//sass style

//-------------------------------

@mixin opacity($opacity:50) {

opacity: $opacity / 100;

filter: alpha(opacity=$opacity);

}

HTTP

• HTTP 报文结构是怎样的？

• HTTP有哪些请求方法？

• GET 和 POST 有什么区别？

• 如何理解 URI？

• 如何理解 HTTP 状态码？

• 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

• 对 Accept 系列字段了解多少？

• 对于定长和不定长的数据，HTTP 是怎么传输的？

• HTTP 如何处理大文件的传输？

• HTTP 中如何处理表单数据的提交？

• HTTP1.1 如何解决 HTTP 的队头阻塞问题？

• 对 Cookie 了解多少？

• 如何理解 HTTP 代理？

• 如何理解 HTTP 缓存及缓存代理？

• 为什么产生代理缓存？

• 源服务器的缓存控制

• 客户端的缓存控制

• 什么是跨域？浏览器如何拦截响应？如何解决？

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】