chevron_left

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

教程文档

Sass / Scss 实践教程 - 嵌套

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

嵌套

嵌套是Sass/Scss非常好用的特性，它们不仅大大减少了你的编写量，而且通过视觉上的缩进使你编写的样式结构更加清晰，更易于阅读和开发。

基础使用

修改 index.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>Document</title>
    <link rel="stylesheet" href="assets/css/common.css">
</head>
<body>...
请登录后查看更多expand_more

课程介绍

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

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

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

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

目录

适合这样的人

新手

授课老师