CSS预处理器Sass
文末有超多前端资料~已帮助500+名同学完成改造!
1. 变量(Variables):
变量在Sass中以$开头,用于存储值,以便在多个地方重用。
$primary-color: #007BFF;
body {
color: $primary-color;
}
2. 嵌套规则(Nested Rules):
Sass允许将CSS规则嵌套在相关的规则内,使代码更整洁。
nav {
ul {
margin: 0;
padding: 0;
li {
display: inline-block;
}
}
}
编译后的CSS:
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
}
3. 混合(Mixins):
Mixins用于创建可复用的代码块,可以接受参数。
@mixin button-style($color) {
background: $color;
border-radius: 4px;
padding: 10px 20px;
}
.primary-btn {
@include button-style($primary-color);
}
.secondary-btn {
@include button-style(#6C757D);
}
4. 继承(Inheritance):
使用@extend
关键字可以让一个选择器继承另一个选择器的样式。
.btn {
font-size: 16px;
text-decoration: none;
}
.primary-btn {
@extend .btn;
background: $primary-color;
}
5. 列表(Lists):
列表用于存储多个值,可以是逗号分隔或空格分隔。
$grid-columns: 12;
$gutter-width: 20px;
.container {
width: calc((100% / $grid-columns) - ($gutter-width * ($grid-columns - 1)));
}
6. 映射(Maps):
映射用于存储键值对,类似JavaScript的对象。
$breakpoints: (
small: 480px,
medium: 768px,
large: 1024px
);
@each $breakpoint, $width in $breakpoints {
@media (min-width: $width) {
.container {
max-width: $width;
}
}
}
7. 函数(Functions):
自定义函数可以处理值并返回结果。
@function calculate-size($ratio, $base-size) {
@return $base-size * $ratio;
}
.element {
width: calculate-size(0.5, 100px);
height: calculate-size(0.75, 100px);
}
8. 导入(@import):
使用@import
导入其他Sass文件。
// variables.scss
$primary-color: #007BFF;
// mixins.scss
@mixin button-style($color) {
/* ... */
}
// styles.scss
@import 'variables';
@import 'mixins';
.primary-btn {
@include button-style($primary-color);
}
9. 选择器层级(Selector Nesting):
可以通过层级选择器来组合和简化CSS选择器。
.parent-class {
&__child-class {
/* ... */
}
}
10. 注释(Comments):
Sass支持两种注释,单行//和多行/* ... */,其中多行注释在编译后会被保留。
11. 条件语句(Conditional Statements):
Sass提供@if
, @else if
, 和 @else
来实现条件逻辑。
$is-mobile: false;
.content {
@if $is-mobile {
font-size: 14px;
} @else {
font-size: 18px;
}
}
12. 循环(Loops):
使用@for
、@each
和@while
来迭代和重复代码。
// 使用@for循环生成CSS序列
@for $i from 1 through 5 {
.item-#{$i} {
width: 100px * $i;
}
}
// 使用@each遍历列表
$fonts: Arial, sans-serif, Georgia, serif;
@each $font in $fonts {
body {
font-family: $font, #{$font + ', '};
}
}
// 使用@while循环
$count: 5;
@while $count > 0 {
.loop-#{$count} {
content: "Count: #{$count}";
}
$count: $count - 1;
}
13. 嵌套媒体查询(Nested Media Queries):
与CSS规则类似,Sass允许嵌套媒体查询,使代码更整洁。
.element {
color: black;
@media (min-width: 600px) {
color: white;
}
}
14. 延展(Extend)的更高级用法:
使用@extend
可以创建更复杂的继承关系,例如与伪类和伪元素结合。
%hover-state {
&:hover {
background: darken($primary-color, 10%);
}
}
.primary-btn {
@extend %hover-state;
background: $primary-color;
}
15. 模块化和BEM方法论:
结合Sass的特性,如嵌套规则和变量,可以实现BEM(Block Element Modifier)方法论,提高代码的可维护性。
.button {
&__text {
font-weight: bold;
}
&--primary {
background: $primary-color;
}
&--secondary {
background: $secondary-color;
}
}
16. 嵌套选择器的注意事项:
虽然嵌套选择器使代码更易读,但过度嵌套可能导致CSS体积过大,影响性能。尽量保持选择器简洁,避免过深的嵌套。
17. Sass的版本和兼容性:
注意Sass有两个主要版本:SCSS(Sassy CSS)和indented syntax(Sass)。SCSS更现代,更接近CSS语法,而indented syntax使用缩进表示嵌套。大多数现代项目使用SCSS。
18. 自动化工具:
结合自动化工具(如Webpack、Gulp或Grunt)和构建系统,可以自动化Sass编译和优化过程,确保生产环境的CSS是最优的。
19. 响应式设计和媒体查询:
使用Sass的嵌套媒体查询,可以更方便地编写响应式CSS。
.container {
width: 100%;
@media (min-width: 768px) {
width: 80%;
float: left;
}
}
20. 自定义函数(Custom Functions):
定义自定义函数,可以处理复杂的计算或逻辑。
@function calculate-spacing($size, $multiplier: 2) {
@return $size * $multiplier;
}
.element {
padding: calculate-spacing(10px);
}
21. 运算符(Operators):
Sass支持算术、比较和逻辑运算符,使得在CSS中进行计算更加方便。
.box {
width: 100px + 50px;
height: 200px - 50px;
margin: 5px * 2;
opacity: 0.5 / 2;
}
22. 嵌套选择器的限制:
虽然嵌套选择器很有用,但过度嵌套可能导致CSS难以理解和维护。尽量保持选择器深度不超过3级,以防止过于复杂。
23. Sass的错误处理:
当Sass遇到语法错误时,它会生成错误消息,帮助你找到问题所在。了解这些错误信息可以帮助你更快地调试代码。
24. Sass的调试(Debugging):
使用@debug语句可以在编译过程中输出变量和表达式的信息,帮助调试。
$value: 10px;
@debug "Value is: #{$value}";
25. Sass的源映射(Source Maps):
开发时启用源映射,可以使浏览器开发者工具在编辑Sass源文件时,显示原始的Sass代码,而非编译后的CSS。
26. Sass的@use和@mixin规则:
新版Sass(Sass 7.0+)引入了@use
规则来代替@import
,并提倡使用@mixin
而不是@extend
,以提高CSS的可维护性和性能。
27. Sass的模块系统:
使用@use
规则可以组织代码为模块,每个模块有自己的作用域,避免变量和选择器冲突。
// _variables.scss
$primary-color: #007BFF;
// _buttons.scss
@use 'variables';
.button {
background: variables.$primary-color;
}
28. 保持Sass代码简洁:
与编写任何代码一样,保持Sass简洁、清晰和模块化,遵循DRY(Don't Repeat Yourself)原则,避免冗余代码。
需要超多前端笔记的同学转发本文+关注+【 点击此处】即可获取! 加油
整份文档一共有几百道题万字以上,全都是近期高频面试题知识点,不仅有答案,而且有详细的解析,为了不影响大家的阅读体验就只展示了部分内容,还望大家海涵,这份文档绝对可以帮助大家提升复习效率,加大面试的成功率,也节省大家在网上搜索资料的时间来学习,最后祝所有复习过我文章里学习内容的小伙伴们,每个人都能拿到心仪offer,欢迎大家讨论交流!