前言
SASS 是一个 CSS 预处理器，它允许开发者使用更加高级的语法来编写 CSS，包括变量、嵌套、混合等功能，可以让 CSS 的编写更加简洁、易于维护。本文将介绍如何使用 SASS 编写优秀的 HTML+CSS 代码，提供 21 个技巧供大家参考。
1. 使用变量
SASS 允许我们使用变量来存储颜色、字体等属性值，可以方便地在多个地方重复使用，减少代码冗余。例如：
$primary-color: #007bff;
$secondary-color: #6c757d;
.button {
background-color: $primary-color;
color: $secondary-color;
}2. 嵌套选择器
SASS 允许我们使用嵌套选择器来表示 HTML 元素的层次关系，使得代码更加清晰。例如：
-- -------------------- ---- -------
---------- -
------ -----
---- -
-------- -----
---- -
----- --
-
-
-3. 使用混合
SASS 允许我们使用混合来定义一组 CSS 规则，可以方便地在多个地方重复使用。例如：
-- -------------------- ---- ------- ------ ------------ - ----------------- -------- ------ ----- ------- ----- -------------- ---- - ------- - -------- ------------- -
4. 继承样式
SASS 允许我们使用继承来复用已有的 CSS 规则，可以减少代码冗余。例如：
-- -------------------- ---- ------- ------- - ----------------- -------- ------ ----- ------- ----- -------------- ---- - --------------- - ------- -------- ----------------- -------- -
5. 使用函数
SASS 提供了一些内置函数，可以方便地处理颜色、字体等属性值。例如：
$primary-color: #007bff;
.button {
background-color: lighten($primary-color, 10%);
}6. 使用条件语句
SASS 允许我们使用条件语句来根据不同的情况生成不同的 CSS 规则。例如：
-- -------------------- ---- -------
--------------- --------
--- -------------- -- ------- -
------- -
----------------- ---------------
-
- ----- -
------- -
----------------- --------
-
-7. 使用循环
SASS 允许我们使用循环来生成重复的 CSS 规则，可以减少代码冗余。例如：
@for $i from 1 through 3 {
.button-#{$i} {
font-size: 14px * $i;
}
}8. 使用占位符
SASS 允许我们使用占位符来定义一组 CSS 规则，可以方便地在多个地方重复使用。例如：
-- -------------------- ---- ------- ------------- - ----------------- -------- ------ ----- ------- ----- -------------- ---- - ------- - ------- -------------- - --------------- - ------- -------------- ----------------- -------- -
9. 使用导入
SASS 允许我们使用导入来将多个 SASS 文件合并成一个 CSS 文件，可以方便地管理代码。例如：
@import "variables"; @import "mixins"; @import "buttons";
10. 使用注释
SASS 允许我们使用注释来解释代码的作用，可以方便地理解代码。例如：
// This is a comment /* * This is a multi-line comment */
11. 使用 CSS Grid
SASS 允许我们使用 CSS Grid 来布局页面，可以方便地实现复杂的布局。例如：
-- -------------------- ---- -------
---------- -
-------- -----
---------------------- --------- -----
--------- -----
----- -
----------------- --------
------ -----
-------- -----
-
-12. 使用 Flexbox
SASS 允许我们使用 Flexbox 来布局页面，可以方便地实现自适应布局。例如：
-- -------------------- ---- -------
---------- -
-------- -----
---------- -----
----- -
----- --
----------------- --------
------ -----
-------- -----
-
-13. 使用 CSS 动画
SASS 允许我们使用 CSS 动画来实现页面效果，可以方便地增强用户体验。例如：
-- -------------------- ---- -------
---------- -------- -
---- -
---------- ------------------
-
-- -
---------- ---------------
-
-
------- -
---------- -------- -- ------------
-14. 使用 CSS 变换
SASS 允许我们使用 CSS 变换来实现页面效果，可以方便地增强用户体验。例如：
.button {
transform: rotate(45deg);
}15. 使用 CSS 过渡
SASS 允许我们使用 CSS 过渡来实现页面效果，可以方便地增强用户体验。例如：
.button {
transition: background-color 0.5s ease-in-out;
}
.button:hover {
background-color: #28a745;
}16. 使用 CSS 滤镜
SASS 允许我们使用 CSS 滤镜来实现页面效果，可以方便地增强用户体验。例如：
.image {
filter: grayscale(50%);
}17. 使用 CSS 变量
SASS 允许我们使用 CSS 变量来存储颜色、字体等属性值，可以方便地在多个地方重复使用，减少代码冗余。例如：
:root {
--primary-color: #007bff;
}
.button {
background-color: var(--primary-color);
}18. 使用 CSS 自定义属性
SASS 允许我们使用 CSS 自定义属性来存储颜色、字体等属性值，可以方便地在多个地方重复使用，减少代码冗余。例如：
.button {
--primary-color: #007bff;
background-color: var(--primary-color);
}19. 使用 BEM 命名规范
BEM 是一种 CSS 命名规范，可以使 CSS 代码更加清晰、易于维护。例如：
<div class="button button--primary"> <span class="button__label">Click me</span> </div>
-- -------------------- ---- -------
------- -
---------- -
----------------- --------
------ -----
-
-------- -
---------- -----
-
-20. 使用 OOCSS 设计模式
OOCSS 是一种 CSS 设计模式，可以使 CSS 代码更加清晰、易于维护。例如：
-- -------------------- ---- -------
------- -
-------- -----
------- -----
-------------- ----
---------- -
----------------- --------
------ -----
-
-------- -
---------- -----
-
-21. 使用 SMACSS 设计模式
SMACSS 是一种 CSS 设计模式，可以使 CSS 代码更加清晰、易于维护。例如：
-- -------------------- ---- -------
------- -
-------- -----
------- -----
-------------- ----
----------------- -
----------------- --------
------ -----
-
- -------------- -
---------- -----
-
-结论
使用 SASS 编写优秀的 HTML+CSS 代码可以使代码更加简洁、易于维护。通过使用变量、嵌套选择器、混合、继承样式、函数、条件语句、循环、占位符、导入、注释等技巧，可以使代码更加清晰、易于理解。同时，通过使用 CSS Grid、Flexbox、CSS 动画、CSS 变换、CSS 过渡、CSS 滤镜、CSS 变量、CSS 自定义属性等技术，可以增强用户体验，使网站更加吸引人。最后，通过使用 BEM、OOCSS、SMACSS 等设计模式，可以使代码更加规范、易于维护，从而提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6756c638ba81afebc5218f3f