国内做心理咨询师培训出名的网站,有教做点心的网站吗,网站建设宽度一般都是多少钱,最好用的搜索引擎http://www.w3cplus.com/preprocessor/architecture-sass-project.html 编辑推荐#xff1a; 掘金是一个高质量的技术社区#xff0c;从 CSS 到 Vue.js#xff0c;性能优化到开源类库#xff0c;让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容#xff0c…http://www.w3cplus.com/preprocessor/architecture-sass-project.html 编辑推荐 掘金是一个高质量的技术社区从 CSS 到 Vue.js性能优化到开源类库让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容或到各大应用市场搜索「 掘金」下载APP技术干货尽在掌握中。 本文由大漠根据Hugo Giraudel的《Architecture for a Sass Project》所译整个译文带有我们自己的理解与思想如果译得不好或有不对之处还请同行朋友指点。如需转载此译文需注明英文出处http://www.sitepoint.com/architecture-sass-project。 ——作者Hugo Giraudel ——译者大漠 回想起来我们以前做的事情主要是围绕着CSS打转。你是否还记得你曾彻夜不眠的在努力写CSS。Year!写了上千行的代码——通常是写得不好——为了解决一些IE的bug或者为了找到一个属性值我们不得不努力去寻找这样的一个值。 我的小伙伴们那些苦逼的日子就将过去了。CSS处理变得更有趣也更复杂。现在我们有CSS预处理器、响应式设计、渐进增强、优雅降级和其他一些时尚的东西。可以说CSS变得比以往任何时候都更加强大。 CSS变得更有趣更复杂。——Hugo Giraudel 所以我们有很多东西需要处理这样一来如何组织项目文件就变得非常的重要。我想大家都同意这样的观点但实现起来并不太容易。所以我写了这篇文章将会告诉你应该怎么去想比告诉你怎么做要更好否则我就离开你了。 构建你的结构体系 CSS预处理器的特点之一是可以把你的代码分割成很多个文件而且不会影响性能。这都要归功于Sass的import命令只要在你的开发环境下你调用不管多少文件最终将编译出一个CSS样式文件。 多个文件中开发最终合并输出一个文件。——Bruce Lee 开始将你的CSS文件分割成多个文件和文件夹。正如我的一位导师说的“任何事物都有其正确的地方每个地方都有其正确的事”。那么这也是我喜欢做的事。 文件夹构建 文件夹的创建是必不可少的。就算在家里你也不会把所有的纸张放在一个盒子里。你可能会使用一个文件夹。一个用于房子上一个用于银行一个用于账单等等。 你在创建CSS的架构的时候也应该如此你不只是把所有的Sass文件放在一个文件夹下你会将他们分类。 下面的示例屏示的是我将如何组织我的Sass文件 sass/
|
|– base/
| |– _reset.scss # Reset/normalize
| |– _typography.scss # Typography rules
| ... # Etc…
|
|– components/
| |– _buttons.scss # Buttons | |– _carousel.scss # Carousel | |– _cover.scss # Cover | |– _dropdown.scss # Dropdown | |– _navigation.scss # Navigation | ... # Etc… | |– helpers/ | |– _variables.scss # Sass Variables | |– _functions.scss # Sass Functions | |– _mixins.scss # Sass Mixins | |– _helpers.scss # Class placeholders helpers | ... # Etc… | |– layout/ | |– _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… | |– vendors/ | |– _bootstrap.scss # Bootstrap | |– _jquery-ui.scss # jQuery UI | ... # Etc… | | – main.scss # primary Sass file 正如你所看到的在根目录底下只有一个main.scss文件其他.scss文件都根据不同的分类放在对应的文件夹中只是这些.scss文件前面都有一个下划线(_)用来告诉Sass这些.scss文件只是局部不通过import是不应该被编译出.css文件。事实上它们是导入和合并文件的基本文件而以。 一个文件可以解决所有问题一个文件可以找到他们一个文件给他们带来了所有的一切Sass只是将他们合并在一起。——J.R.R. Tolkien 接下来我们依次来看结构中的每一个文件目录。 Base base/文件夹包含了一些有关于你的项目中一些模板相关。在这里你可以看到reset样式(或者Normalize.css,或者其他)也有一些关于文本排版方面的当然根据不同的项目会有一些其他的文件。 _reset.scss或_normalize.scss_typography.scssHelpers helpers/文件夹有的地方也称其为utils/主要包含了项目中关于Sass的工具和帮助之类。在里面放置了我们需要使用的_function.scss和_mixin.scss。在这里还包含了一个_variables.scss文件有的地方也称其为_config.scss这里包含项目中所有的全局变量比如排版本上的配色方案等等。 _variables.scss_mixin.scss_function.scss_placeholders.scss(也有称为_helpers.scss)Layout layout/文件夹(有时也称为partials/)中放置了大量的文件每个文件主要用于布局方面的比如说header“footer”等。他也会包括_grid.scss文件用来创建网格系统。 _grid.scss_header.scss_footer.scss_sidebar.scss_forms.scss导航文件_navigation.scss文件放在这里也有意义虽然我将他放在了components/文件夹中。但是我想将其放在layout/文件夹中更好些当然最后还是由你自己来决定。 Components 对于一些小组件都放在了components/文件夹通常也称为modules/layout/是一个宏观的定义全局的线框components/是一个微观的。它里面放了一些特定的组件比如说sliderloadingwidget或者其他的小组件。通常components/目录下的都是一些小组件文件。 _media.scss_carousel.scss_thumbnails.scssPage 如果你需要针对一些页面写特定的样式我想将他们放在page/文件夹中是非常酷的并且以页面的名称来命名。例如你的首页需要制作一个特定的样式那么你就可以在page/文件夹中创建一个名叫_home.scss文件。 _home.scss_contact.scss根据你自己的布署你可以根据自己的需求调用这些文件避免与其他样式文件合并在一起。这真的主取决于你自己在我工作的地方我是不允许这样的事情发生只在需要的页面调用需要的文件。比如说我们首页有一个特定的布局样式编译出来的CSS大约有200行代码。为了防止每个页面加载这些代码我只在主页文件上引用这个文件。 Themes 如果你像我一样要为一个大型的网站制作多个主题那么有一个theme/文件夹是非常有意义的。你可以把主题相关的文件放在这个文件夹中。这绝对跟具体的项目有关你只要觉得跟主题相关的有必要引入。 _theme.scss_admin.scssVendors 最后一个但并非不重要创建vendors/文件夹主要用来包含来自外部的库和框架的CSS文件。比如Bootstrap,jQueryUIFancyCarouselSliderjQueryPowered等等。把这些文件放在同一个文件夹中你可以说嘿这些代码不是我的不是我写的跟我无关。 例如 bootstrap.scssjquery-ui.scssselect2.scss从另一个角度来说在我平时工作中还创建了一个vendors-extensions/文件夹用来放置一些覆盖从外部引入进来的库和框架中的小组件。例如我们可以在_bootstrap.scss文件中用来覆盖Bootstrap框架中的一些小组件。这为了避免和外部直接引来的组件升级造成的冲突或许这不是一个很好的方案。 大致就是这些但不同的项目可能会不一样但我可以肯定你们都有了这样的一个概念。在文件夹中嵌套一个文件夹这样的做法我一直不太反对但我不太喜欢这样的方式。我发现在大多数情况之下只需一个层级就足足够既保证结构的简洁与清晰而且不复杂。但话又说回来如果你觉得你的项目有必要嵌套更深层次的文件夹你也可以自由的发挥。 温馨提示如果你觉得你的架构并不能向大家说明SCSS文件夹的架构你可以在根目录下创建一个README.md文件或者在main.scss文件中一步一步说明解释。 文件很酷 有一个问题常被人问到“多少文件才算是很多文件呢”我常回答“再多文件都不算多”。拆分成多个文件的宗旨是帮助你组织你的代码。如果你觉得某事值得拆分成多个文件可以自由的拆分。正如CHRIS COYIER在《Sass Style Guide》中所说 拆分成尽可能多的小文件是有道理的。——CHRIS COYIER 不过我建议不把单个组件拆分成多个文件除非你有很好的理由这样做。通常我更倾向于一个组件一个文件。俗话说“没有更多只有更少”。用一个简洁语义化的名称用来表示模块的名称。这样我们就可以通过查找名称找到你需要的东西。 总结 本文所有内容都是基于我当年在法国Crédit Agricole银行做前端唯一一前端的工作经验。针对于各人有各自的情况和经验可以有不同的方法。 如果我们能给构建一个Sass项目挑选一个黄金法则它可能会简单一些就如捡东西的一个道理。如果做为一个团队项目的结构要确认每个人用得都舒服让大家都要知道是怎么一回事。 你对构建Sass项目架构有任何想法和建议我们都非常想听听。 能力越大责任越大。——Aquaman 译者手语整个翻译依照原文线路进行并在翻译过程略加了个人对技术的理解。如果翻译有不对之处还烦请同行朋友指点。谢谢 如需转载烦请注明出处 英文原文http://www.sitepoint.com/architecture-sass-project 中文译文http://www.w3cplus.com/preprocessor/architecture-sass-project.html 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。原文: http://www.w3cplus.com/preprocessor/architecture-sass-project.html © w3cplus.com转载于:https://www.cnblogs.com/zaifeng0108/p/7226514.html
