chevron_left

Sass / Scss 实践教程
免费
第 7 回

教程文档

Sass / Scss 实践教程 - 项目实战

2023年11月24日更新
Sass / Scss 实践教程

项目实战

完成商城前台首页

这里以商城前台首页为例，用前面所学的内容还原设计图样式

创建项目

电脑桌面创建文件夹 mi，里面依次创建 assets/css/common.scss 、 assets/css/index.scss、assets/iconfont、assets/images、mi/index.html

首页 html 代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mi-...
请登录后查看更多expand_more

课程介绍

Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。

SASS 是对 CSS3（层叠样式表）的语法的一种扩充，它可以使用巢状、混入、选择子继承等功能，可以更有效有弹性的写出 Stylesheet。Sass 最后还是会编译出合法的 CSS 让浏览可以使用，也就是说它本身的语法并不太容易让浏览器识别（虽然它和 CSS 的语法非常的像，几乎一样），因为它不是标准的 CSS 格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。

Sass 包括两套语法。最开始的语法叫做“缩进语法”，与 Haml 类似，使用缩进来区分代码块，并且用回车将不同规则分隔开。

而较新的语法叫做“SCSS”，使用和 CSS 一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。通常情况下，这两套语法通过.sass 和.scss 两个文件扩展名区分开。

目录

适合这样的人

新手

授课老师