chevron_left

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

教程文档

Sass / Scss 实践教程 - 混合 Mixins

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

混合 Mixins

利用Mixin，可以很容易地在样式表的不同地方共享样式。如果你发现自己在不停地重复一段样式，那就应该把这段样式封装成Mixin。

你可以将Mixin理解成JavaScript开发中的function，可以随意封装，传参，甚至还可以定义参数默认值。

使用

跨浏览器的圆角边框

<!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="styles...
请登录后查看更多expand_more

课程介绍

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

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

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

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

目录

适合这样的人

新手

授课老师