前端面试之HTML5与CSS3前言：当前前端面试中html5的知识与css3的知识在面试中的比例并不多见，下面是整理的一

前言：当前前端面试中html5的知识与css3的知识在面试中的比例并不多见，下面是整理的一些关于h5跟css3常见的面试题，欢迎补充，希望能够帮助每一个正在前端面试的小伙伴！

1.H5的新特性有哪些？Css3的新特性有哪些？

H5新特性

1、拖拽释放(Drap and drop) API

ondrop拖放是一种常见的特性，即抓取对象以后拖到另一个位置在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放

2、自定义属性 data-id

3、语义化更好的内容标签(header,nav,footer ,aside, article, section)

4、音频 ,视频(audio, video) 如果浏览器不支持自动播放怎么办?在属性中添加 autoplay

5、画布 Canvas

5.1）getContext() 方法返回一个用于在画布上绘图的环境 Canvas.getContext(contextID) 参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API

5.2）cxt.stroke() 如果没有这一步线条是不会显示在画布上的 5.3）canvas 和 image 在处理图片的时候有什么区别?

image 是通过对象的形式描述图片的,canvas 通过专门的 API 将图片绘制在画布上.

6、地理(Geolocation) API

7、本地离线存储 localStorage 长期存储数据浏览器关闭后数据不丢失

8、 sessionStorage 的数据在浏览器关闭后自动删除

9、表单控件 calendar , date , time , email , url , search , tel , file , number

10、新的技术 webworker, websocket , Geolocation

CSS3 新特性

1、颜色: 新增 RGBA , HSLA 模式

2、文字阴影(text-shadow)

3、边框: 圆角(border-radius) 边框阴影 : box-shadow

4、盒子模型: box-sizing

5、背景:background-size background-origin background-clip

6、渐变: linear-gradient , radial-gradient

7、过渡 : transition 可实现动画

8、自定义动画 animate @keyfrom

9、媒体查询多栏布局 @media screen and (width:800px) {…}

10、border-image

11、2D 转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)

12、3D 转换

13、字体图标 font-face

14、弹性布局 flex

2.Localstorage、sessionStorage、cookie 的区别

共同点：都是保存在浏览器端、且同源的

区别： 1、cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递，而 sessionStorage 和 localStorage 不会自动把数据发送给服务器，仅在本地保存。cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下

2、存储大小限制也不同，cookie 数据不能超过 4K，同时因为每次 http 请求都会携带 cookie、所以 cookie 只适合保存很小的数据，如会话标识。sessionStorage 和 localStorage虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大

3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的 cookie 过期时间之前有效，即使窗口关闭或浏览器关闭

4、作用域不同，sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面； localstorage 在所有同源窗口中都是共享的；cookie 也是在所有同源窗口中都是共享的

5、web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者

6、web Storage 的 api 接口使用更方便

3.H5 的浏览器存储有哪些？

1、cookie

这个存储用了很久了，而且也是以前大多网站十分喜欢的存储站点。但是也很容易被清除。同时 cookie 会在每一次通信过程中传向服务端。同时 cookie 有一个很好的地方就是，它本身有一个过期时间属性，可以用来标注一个变量的有效期。而 cookie 一旦过期就会被自动删除掉

2、localStorage、sessionStorage

●localStorage: 持久存储，只要用户不主动删除就会一直存在。

●sessionStorage：面向 session 的浏览器存储，因此只存在于一个页面的生命周期内，关闭即清除两者均采用键值对的形式存储数据

3、indexedDB

内嵌在浏览器端的非关系型数据库，数据以键值对的形式存储，兼容性良好indexDB 直接操作的存储对象是 ObjectStore，这有点类似其他数据库中 table 概念

4、websql

内嵌在浏览器的关系型数据库，前端可以像在使用 mysql、Oracle 一样的写 sql 语句，并存储信息。兼容性良好。存储后可在浏览器 resource 中查看5、window 变量生命周期有限，一般大家也不会去使用。但是对于全局变量的临时存储来说，还是一个不可多得的好地方

6、flash cookie flash cookie 现在用的地方比较多

4.如何使一个盒子水平垂直居中？

**方法一：利用定位（常用方法,推荐）**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px; height: 500px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px; height: 100px;
border: 1px solid #999; position: absolute;
top: 50; left: 50;
margin-top: -50px; margin-left: -50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>

**方法二：利用 margin:auto;**

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px; height: 500px;
border: 1px solid #000; position: relative;
}
.child {
width: 100px; height: 100px;
border: 1px solid #999;
position: absolute;
margin: auto; top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>

**方法三：利用 display:table-cell**

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px; height: 500px;
border: 1px solid #000; display: table-cell; vertical-align: middle; text-align: center;
}
.child {
width: 100px; height: 100px;
border: 1px solid #999; display: inline-block;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>

**方法四：利用 display：flex;设置垂直水平都居中**

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px; height: 500px;
border: 1px solid #000; display: flex;
justify-content: center; align-items: center;
}
.child {
width: 100px; height: 100px;
border: 1px solid #999;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>

**方法五：计算父盒子与子盒子的空间距离(这跟方法一是一个道理)**

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px; height: 500px;
border: 1px solid #000;
}
.child {
width: 100px; height: 100px;
border: 1px solid #999; margin-top: 200px; margin-left: 200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>

**方法六：利用 transform**

<!DOCTYPE html>
<html lang="en"> 
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px; height: 500px;
border: 1px solid #000; position: relative;
}
.child {
width: 100px; height: 100px;
border: 1px solid #999; position: absolute;
top: 50; left: 50;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>`

5.如何垂直居中一个 img?

#container //<img>的容器设置如下
{
display:table-cell; text-align:center; vertical-align:middle;
}

6.css的盒模型

盒子模型（Box Modle）可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分盒子模型分为两种: 第一种是W3C 标准的盒子模型（标准盒模型）第二种 IE 标准的盒子模型（怪异盒模型）标准盒模型与怪异盒模型的表现效果的区别之处： 1、标准盒模型中 width 指的是内容区域 content 的宽度 height 指的是内容区域 content 的高度标准盒模型下盒子的大小 = content + border + padding + margin

2、怪异盒模型中的 width 指的是内容、边框、内边距总的宽度（content + border + padding）；height 指的是内容、边框、内边距总的高度

怪异盒模型下盒子的大小=width（content + border + padding） + margin

除此之外，我们还可以通过属性 box-sizing 来设置盒子模型的解析模式可以为 box-sizing 赋两个值： content-box：默认值，border 和 padding 不算到 width 范围内，可以理解为是 W3c 的标准模型(default)。总宽=width+padding+border+margin border-box：border 和 padding 划归到 width 范围内，可以理解为是 IE 的怪异盒模型，总宽=width+margin

7.哪些是块级元素那些是行内元素，各有什么特点？

行内元素: a、span、b、img、strong、input、select、lable、em、button、textarea 、 selecting

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote、form

行内、块状元素区别：

1、块级元素会独占一行，其宽度自动填满其父元素宽度行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化 2、一般情况下，块级元素可以设置 width,height 属性，行内元素设置 width, height 无效 (注意：块级元素即使设置了宽度，仍然是独占一行的) 3、块级元素可以设置 margin 和 padding. 行内元素的水平方向的 padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的 padding-top,padding-bottom,margin-top,margin-bottom 都不会产生边距效果。（水平方向有效，竖直方向无效）

8.rem 适配方法如何计算 HTML 跟字号及适配方案？

通用方案

1、设置根 font-size：625

（或其它自定的值，但换算规则 1rem 不能小于 12px）

2、通过媒体查询分别设置每个屏幕的根 font-size

3、CSS 直接除以 2 再除以 100 即可换算为 rem 优：有一定适用性，换算也较为简单劣：有兼容性的坑，对不同手机适配不是非常精准；需要设置多个媒体查询来适应不同手机，单某款手机尺寸不在设置范围之内，会导致无法适配

网易方案

1、拿到设计稿除以 100，得到宽度 rem 值

2、通过给 html 的 style 设置 font-size，把 1 里面得到的宽度 rem 值代入 x document.documentElement.style.fontSize = document.documentElement.clientWidth / x + ‘px‘;

3、设计稿 px/100 即可换算为 rem

优：通过动态根 font-size 来做适配，基本无兼容性问题，适配较为精准，换算简便劣：无 viewport 缩放，且针对 iPhone 的Retina 屏没有做适配，导致对一些手机的适配不是很到位

手淘方案

1、拿到设计稿除以 10，得到 font-size 基准值

2、引入 flexible

3、不要设置 meta 的 viewport 缩放值

4、设计稿 px/ font-size 基准值，即可换算为 rem

优：通过动态根 font-size、viewpor、dpr 来做适配，无兼容性问题，适配精准。劣：需要根据设计稿进行基准值换算，在不使用 sublime text 编辑器插件开发时，单位计算复杂

9.预处理器，以及css的优化方案？

为什么使用 CSS 预处理器

原因 CSS 仅仅是一个标记语言，不可以自定义变量，不可以引用。语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器。没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

CSS 预处理器的好处

提供 CSS 层缺失的样式层复用机制减少冗余代码提高样式代码的可维护性

CSS 预处理器的缺点

开发工作流中多了一个环节，调试也变得更麻烦。预编译很容易造成后代选择器的滥用何时使用 CSS 预处理器系统级框架开发或者比较大型复杂的样式设计时持续维护集成时复用型组件开发时

Sass/Scss 与 Less 对比

Sass/Scss

Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。是一种动态样式语言，Sass 语法属于缩排语法，比 CSS 多出变量、嵌套、运算、混入(Mixin)、继承、颜色处理、函数等功能，更容易阅读。在开发最初版本之后，Weizenbaum 和 Chris Eppstein 继续通过 SassScript 来继续扩充 Sass 的功能。SassScript 是一个在 Sass 文件中使用的小型脚本语言。Sass 是一个将脚本解析成 CSS 的脚本语言，即 SassScript。Sass 的缩排语法，对于写惯 CSS 前端的 Web 开发者来说很不直观，也不能将 CSS 代码加入到 Sass 里面，因此 Sass 语法进行了改良，Sass3 就变成了 Scss(Sassy CSS) 。与原来的语法兼容，只是用 {} 取代了原来的缩进。所以 Sass 包括两套语法，通常情况下，这两套语法通过 .sass 和 .scss 两个文件扩展名区分开。

Less

Less 是 CSS 预处理器，也是一种动态样式语言，它为 CSS 增加了变量、嵌套、运算、混入(Mixin)、函数等功能，让 CSS 更易维护、方便制作主题与扩充。Less 可以运行在 Node.js、浏览器(支持 IE6+、Webkit、Firefox)和 Rhino 平台上，网上有很多第三方工具帮助你编译 Less 源码。本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。Less 并没有丢掉 CSS 原有的语法与特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入动态语言的特性。 Less 以 CSS 语法为基础，又借用了很多我们熟知编程式语言的特性，这对于我们开发人员来讲学习成本几乎可以忽略，它在保留 CSS 语法的基础上扩展了更多实用的功能，为我们提供了一种新的编写样式表的方法，我们可以根据我们的项目特性选择使用 Less 的部分特性，我们只需用很少的成本就可以换了很大的回报。一句话说就是 Less is more，借助 Less 可以更便捷的进行 Web 开发，Write more！

相同之处

都属于 CSS 预处理器目的是使得 CSS 开发更灵活和更强大扩展的 CSS 功能特性基本相同

不同之处

Sass 是在服务端处理的，以前是 Ruby，现在是 Dart-Sass 或 Node-Sass，而 Less 是在客户端处理的，需要引入 less.js 来处理 Less 代码输出 CSS 到浏览器，也可以在开发服务器将 Less 语法编译成 CSS 文件，输出 CSS 文件到生产包目录，有 npm less、Less.app、SimpleLess、CodeKit.app 这样的工具，也有在线编译地址。变量符不一样，Less 是 @，而 Sass 是 $。 Sass 的功能比 Less 强大，基本可以说是一种真正的编程语言。Less 只是一套自定义的语法及一个解析器，为 CSS 加入动态语言的特性。 Less 相对 Sass 清晰明了，安装便捷，易于上手，对编译环境要求比较宽松，适合小型项目。Sass 更适用于复杂或大型项目。输出设置，Less 没有输出设置，Sass 提供 4 种输出选项：nested/compact/compressed/expanded，输出样式的风格可以有 4 种选择，默认为 nested。 Sass 支持条件语句，可以使用 if...else.../for...while...each循环等，Less 不支持。 Sass 引用的外部文件命名必须以 _ 开头，Sass 会认为以 _ 文件是一个引用文件，不会将其编译为 CSS 文件。Less 引用外部文件和 CSS 中的 @import 没什么差异。 Less 中的变量运算可以带或不带单位，Sass 需要带单位。 Sass 有工具库 Compass，简单说，Sass 和 Compass 的关系有点像 Javascript 和 jQuery 的关系，Compass 是 Sass 的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了 Sass 的功能。Less 有 UI 组件库 Bootstrap，Bootstrap 是 Web 前端开发中一个比较有名的前端 UI 组件库，Bootstrap 的样式文件部分源码就是采用 Less 语法编写。选择与比较类别

.sass/.scss

.less

目前大部分的实现都是随着前端项目一起打包构建，只在学习或演示的时候才区分使用环境，所以不用在意处理机制，以上只是单纯的对比两者本身。Sass/Scss 与 Less 相比，两者都属于 CSS 预处理器，功能上大同小异，都是使用类似程序式语言的方式书写 CSS，都具有变量、混入、嵌套、函数等特性，最终目的都是方便 CSS 的书写及维护。Less 和 Sass/Scss 互相促进互相影响，只是相比之下 Less 更接近 CSS 语法且更容易使用上手。因此对于我个人来说，在实际开发中更倾向于选择 Less。

Sass/Scss、Less 使用与语法
变量
// Less
@width: 10px;
@height: @width + 10px;
@test: left;
#header {
  width: @width;
  height: @height;
  margin-@{test}: 5px;
}
// Sass (老版本 Sass 使用 !，不是 $。)

$blue: #1875e7;　
div {
  color: $blue;
}
 
$side: left;
$my-radius: 5px;
.rounded {
  border-#{$side}-radius: $my-radius;
}
运算
// Less
// 所有操作数被转换成相同的单位(乘法和除法不作转换)
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
 
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
 
// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
 
@base: 2cm * 3mm; // 结果是 6cm
 
// 颜色运算
@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355
 
// 为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。
@var: 50vh/2;
width: calc(50% + (@var - 20px));  // 结果是 calc(50% + (25vh - 20px))
 
/* ------------------------------ */
 
// Sass
$var: 100px;
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var * 10%;
}
 

嵌套
css// Less
#header {
  color: black;
  width: 600px;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  &-bottom {
    background-image: url("header-bottom.png");
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}
 
/* ------------------------------ */
 
// Sass
。。。跟上面大同小异。。。
 

注释
// Less
/* 一个块注释，源文件与编译后正常默认文件都保留。
 * style comment! 
 */
@var: red;
 
// 这一行被注释掉了，仅保留源文件中！
@var: white;
 
/* ------------------------------ */
 
// Sass
/* 一个块注释，源文件与编译后正常默认文件都保留。
 * style comment! 
 */
$var: red;
 
// 这一行被注释掉了，仅保留源文件中！
$var: white;
 
/*!
 重要注释！压缩模式也会保留
*/
 

混入(Mixin)
// Less
// .bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了。
// 注意，你也可以使用 #ids 作为 mixin 使用。
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered();
}
.post a {
  color: red;
  .bordered();
}
 
/* ------------------------------ */
 
// Sass
@mixin bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  @include bordered;
}
.post a {
  color: red;
  @include bordered;
}
 

转义
// Less
@min768: ~"(min-width: 768px)"; // 从 Less 3.5 开始，可以简写为：@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}
 
// 编译后
@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}
 
函数
// Less
@base: #f04615;
@width: 0.5;
.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}
 
// ui 给到的一般都是 px，可以使用此函数转换。
.rem(@name, @px) {
   @{name}: unit(@px / 100, rem);
}
.test(@a, @b) {
  @width: @a + @b;
}
@my-radius: 10px;
.border_radius(@v, @h, @radius: @my-radius){
  box-@{v}-@{h}-radius: @my-radius;
}
.good{
  .test(20px, 30px);
  .border_radius(top, left);
  .border_radius(bottom, right, 5px);
  width: @width; 
}
 
/* ------------------------------ */
 
// Sass
@function double($n) {
  @return $n * 2;
}
#sidebar {
  width: double(5px);
}
 

优雅的动态获取元素数据
// 除了以下方法可使用 less 的 plugin
// https://lesscss.org/features/#plugin-atrules-feature
// less 使用 js （未测试，纯百度到的栗子而已！）
.calcHeight() {
  // 3.5+ 可省略 ~
  @functions: ~`(function() { 
    this.calcHeight = function() {
      return document.body.clientHeight - document.getElementById('test').height;
    };
  })()`;
}
// It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined`
// https://github.com/ant-design/ant-motion/issues/44
.calcHeight();
.test {
  width: `calcHeight()`;
}
 
// 或者巧妙使用 css 的 var() 函数或者 attr() 函数
// var() 函数必须要获取内联属性，即必须要是在 style 中的属性，且必须要加上 -- 前缀来标明这是一个自定义属性，否则浏览器无法解析。
// attr() 函数需要获取的标签中的属性，也可以是自定义属性, 但是必须要是在标签中的属性。
// <div self-property="attr-value" style="--test: 'var-value'"></div>
// attr(self-property) 或 var(--test)
// 所以我们就可以曲线救国，实现上面的需求。
// 先在 JS 代码中使用 [document.body.clientHeight - document.getElementById('test').height] 获取到数据，再填到页面中标签属性或 style 属性中。
// 在 CSS 中定义变量 $test: var(--参数名) 或 attr(参数名);
// 或 @test: var(--参数名) 或 attr(参数名);
// 最后直接使用
.test {
  width: @test; // Less
  width: $test; // Sass
  width: calc(100% - #{$test}); // Sass
}

继承

// Less
nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}
 
// OUTPUT
nav ul {
  background: blue;
}
.inline, nav ul {
  color: red;
}
 
// https://lesscss.org/features/#extend-feature
 

命名空间和访问符
// Less (利用此特性也可变相实现继承)
#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab { ... }
  .citation { ... }
}
#header a {
  color: orange;
  #bundle.button();  // 还可以书写为 #bundle > .button 形式
}
// 注意：如果不希望它们出现在输出的 CSS 中，例如 #bundle .tab，请将 () 附加到命名空间后面（例如 #bundle().tab）。
 

映射
// Less
#colors() {
  primary: blue;
  secondary: green;
}
.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}
// OUTPUT
.button {
  color: blue;
  border: 1px solid green;
}
 
@sizes: {
  mobile: 320px;
  tablet: 768px;
  desktop: 1024px;
}
.navbar {
  display: block;
  @media (min-width: @sizes[tablet]) {
    display: inline-block;
  }
}
 

作用域
// Less
@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
 
@var: red;
#page {
  #header {
    color: @var; // white
  }
  @var: white;
}
 

导入
// Less
@import "library"; // .less 可以省略后缀
@import "test.css";
 
Sass if-else
$color: red;
p {
  color: $color;
  @if $color == red {
    background-color: #000;
  } @else {
    background-color: #fff;
  }
}
 
Sass for/while/each
@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}
 
$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
 
@each $member in a, b, c, d {
  .#{$member} {
    background-image: url("/image/#{$member}.jpg");
  }
}
 
Sass 继承
.class1 {
  border: 1px solid #ddd;
}
 
.class-sub {
  @extend .class1;
  font-size: 120%;
 }

以上就是关于H5与css3高频面试问题，还会有其他的，后面会进行补充