2024年Web前端最新项目中sass管理，前端开发工程师面试

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

|– base/

| |– _reset.scss # Reset/normalize

| |– _typography.scss # Typography rules

| … # Etc…

|

|– components/

| |– _buttons.scss # Buttons

| |– _carousel.scss # Carousel

| |– _cover.scss # Cover

| |– _dropdown.scss # Dropdown

| … # Etc…

|

|– layout/

| |– _navigation.scss # Navigation

| |– _grid.scss # Grid system

| |– _header.scss # Header

| |– _footer.scss # Footer

| |– _sidebar.scss # Sidebar

| |– _forms.scss # Forms

| … # Etc…

|

|– pages/

| |– _home.scss # Home specific styles

| |– _contact.scss # Contact specific styles

| … # Etc…

|

|– themes/

| |– _theme.scss # Default theme

| |– _admin.scss # Admin theme

| … # Etc…

|

|– utils/

| |– _variables.scss # Sass Variables

| |– _functions.scss # Sass Functions

| |– _mixins.scss # Sass Mixins

| |– _helpers.scss # Class & placeholders helpers

|

|– vendors/

| |– _bootstrap.scss # Bootstrap

| |– _jquery-ui.scss # jQuery UI

| … # Etc…

|

|

`– main.scss # primary Sass file

1. Base文件夹

---

base/文件夹存放项目中的模板文件。在这里，可以找到重置文件、排版规范文件或者一个样式表（我通常命名为_base.scss）——定义一些HTML元素公认的标准样式。

_base.scss

_reset.scss

_typography.scss

2. Layout文件夹

---

layout/文件夹存放构建网站或者应用程序使用到的布局部分。该文件夹存放网站主体（头部、尾部、导航栏、侧边栏…）的样式表、栅格系统甚至是所有表单的CSS样式。

_grid.scss

_header.scss

_footer.scss

_sidebar.scss

_forms.scss

_navigation.scss

layout/文件夹也会被称为partials/, 具体使用情况取决于个人喜好。

3. Components文件夹

---

对于小型组件来说，有一个components/文件夹来存放。相对于layout/的宏观（定义全局线框结构），components/更专注于局部组件。该文件夹包含各类具体模块，基本上是所有的独立模块，比如一个滑块、一个加载块、一个部件……由于整个网站或应用程序主要由微型模块构成，components/中往往有大量文件。

_media.scss

_carousel.scss

_thumbnails.scss

components/文件夹也会被称为modules/, 具体使用情况取决于个人喜好。

4.Pages文件夹

---

如果页面有特定的样式，最好将该样式文件放进pages/文件夹并用页面名字。例如，主页通常具有独特的样式，因此可以在pages/下包含一个_home.scss以实现需求。

_home.scss

_contact.scss

取决于各自的开发流程，这些文件可以使用你自己的前缀命名，避免在最终样式表中与他人的样式表发生合并。一切完全取决于你。

5.Themes文件夹

---

在大型网站和应用程序中，往往有多种主题。虽有多种方式管理这些主题，但是我个人更喜欢把它们存放在themes/文件夹中。

_theme.scss

_admin.scss

这个文件夹与项目的具体实现有密切关系，并且在许多项目中是并不存在的。

6.Utils文件夹

---

utils/文件夹包含了整个项目中使用到的Sass辅助工具，这里存放着每一个全局变量、函数、混合宏和占位符。该文件夹的经验法则是，编译后这里不应该输出任何CSS，单纯的只是一些Sass辅助工具。

_variables.scss

_mixins.scss

_functions.scss

_placeholders.scss (通常命名为_helpers.scss)

utils/文件夹也会被称为helpers/,sass-helpers/或者sass-utils/，具体使用情况取决于个人喜好。

7.Vendors文件夹

---

最后但并非最终的是，大多数的项目都有一个vendors/文件夹，用来存放所有外部库和框架（Normalize, Bootstrap, jQueryUI, FancyCarouselSliderjQueryPowered……）的CSS文件。将这些文件放在同一个文件中是一个很好的说明方式:“嘿，这些不是我的代码，无关我的责任。”

_normalize.scss

_jquery-ui.scss

_select2.scss

如果你重写了任何库或框架的部分，建议设置第8个文件夹vendors-extensions/来存放，并使用相同的名字命名。

Main文件

---

主文件（通常写作main.scss）应该是整个代码库中唯一开头不用下划线命名的Sass文件。除 @import和注释外，该文件不应该包含任何其他代码。文件应该按照存在的位置顺序依次被引用进来：

vendors/

utils/

base/

layout/

components/

pages/

themes/

为了保持可读性，主文件应遵守如下准则：

• 每个 @import引用一个文件；

• 从相同文件夹中引入的文件之间不用空行；

• 从不同文件夹中引入的文件之间用空行分隔；

文末

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。

前端面试题汇总

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总