架构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
|   ...                  # 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

Base文件夹

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

  • _base.scss
  • _reset.scss
  • _typography.scss

Layout文件夹

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

  • _grid.scss
  • _header.scss
  • _footer.scss
  • _sidebar.scss
  • _forms.scss
  • _navigation.scss

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

Components文件夹

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

  • _media.scss
  • _carousel.scss
  • _thumbnails.scss

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

Pages文件夹

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

  • _home.scss
  • _contact.scss

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

Themes文件夹

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

  • _theme.scss
  • _admin.scss

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

Utils文件夹

utils/文件夹包含了整个项目中使用到的Sass辅助工具,这里存放着每一个全局变量、函数、混合宏和占位符。

该文件夹的经验法则是,编译后这里不应该输出任何CSS,单纯的只是一些Sass辅助工具。

  • _variables.scss
  • _mixins.scss
  • _functions.scss
  • _placeholders.scss (通常命名为_helpers.scss)

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

Vendors文件夹

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

  • _normalize.scss
  • _bootstrap.scss
  • _jquery-ui.scss
  • _select2.scss

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

例如,vendors-extensions/_boostrap.scss文件存放所有重写Bootstrap默认CSS之后的CSS规则。这是为了避免在原库或者框架文件中进行二次编辑——显然不是好方法。

Main文件

主文件(通常写作main.scss)应该是整个代码库中唯一开头不用下划线命名的Sass文件。除 @import和注释外,该文件不应该包含任何其他代码。

文件应该按照存在的位置顺序依次被引用进来:

  • vendors/
  • utils/
  • base/
  • layout/
  • components/
  • pages/
  • themes/

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

  • 每个 @import引用一个文件;
  • 每个 @import单独一行;
  • 从相同文件夹中引入的文件之间不用空行;
  • 从不同文件夹中引入的文件之间用空行分隔;
  • 忽略文件扩展名和下划线前缀。
@import ‘vendors/bootstrap‘;
@import ‘vendors/jquery-ui‘;

@import ‘utils/variables‘;
@import ‘utils/functions‘;
@import ‘utils/mixins‘;
@import ‘utils/placeholders‘;

@import ‘base/reset‘;
@import ‘base/typography‘;

@import ‘layout/navigation‘;
@import ‘layout/grid‘;
@import ‘layout/header‘;
@import ‘layout/footer‘;
@import ‘layout/sidebar‘;
@import ‘layout/forms‘;

@import ‘components/buttons‘;
@import ‘components/carousel‘;
@import ‘components/cover‘;
@import ‘components/dropdown‘;

@import ‘pages/home‘;
@import ‘pages/contact‘;

@import ‘themes/theme‘;
@import ‘themes/admin‘;
时间: 2024-10-25 13:18:03

架构sass文件的相关文章

Sass 文件 基础知识

sass文件名为.scss 可以设置变量 //sass style $fontStack:Heletica,sans-serif;$primaryColor:#333; body{ font-family:$fontStack; color:$primaryColor;} //css style //-----------------------------------body { font-family: Helvetica, sans-serif; color: #333;} 嵌套 - sa

phpstorm配置File Watcher在windows下自动编译sass文件

最近刚接触sass这个css预处理器,其在windows上需要先安装Ruby运行环境.装好Ruby和sass后,发现如果要将.sass文件转成css的话,还需要在控制台中输入命令,比较麻烦. 由于我自己用的IDE是phpstorm,所以去其官网翻了下,可以用里面的File Watchers来实现自动转换.sass->.css文件. 其实当你新建一个.sass文件的时候,phpstorm也会提示是否配置File Watchers. 配置步骤 以windows环境的phpstorm 7.1.3为例:

前端开发环境之GRUNT自动WATCH压缩JS文件与编译SASS文件

前端开发环境之GRUNT-JAVASCRIPT任务运行器 前言: 1.sass编译为css文件,早先时刻写css,后来看了sass挺不错的,于是在新的项目中开始使用上了sass. 原方法: ①安装ruby ②编译sass文件(eg:style) sass style.scss style.css ③监控文件/文件夹的变化来自动编译sass文件 sass --watch style.scss:style.css #file sass --watch cssFilePath            

sass调试--页面看到sass文件而不是css文件问题

在浏览器页面有时看到sass文件而不是css文件问题,其主要由于sass开启了source-map(调试)功能,问题如下图: sass调试 sass调试需要开启编译时输出调试信息和浏览器调试功能,两者缺一不可. 开启编译调试信息 目前sass的调试分为两种,一种为开启debug-info,一种为开启sourcemap(这个将成为主流). 如开启的是debug-info,则解析的css文件中会有以@media -sass-debug-info开头的代码,如没有则表明没有开启. 如开启的是sourc

vue -- 使用sass并引入公共sass文件

sass可以提高我们的开发效率,怎么在vue的项目中使用sass并且可以设置一些公共的文件呢? 使用sass 1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 2.在build文件夹下的webpack.base.conf.js的rules里面添加配置 module: { rules: [ //...默认及其他 { test: /\.s

(12/24) css进阶:sass文件的打包和分离

1.安装sass打包的loader 这里需要 在项目目录下用npm安装两个包.node-sass和sass-loader,(也可以使用cnpm安装) 因为sass-loader依赖于node-sass,所以需要先安装node-sass 1.1 node-sass npm install --save-dev node-sass 1.2 sass-loader npm install --save-dev sass-loader 注意:在用npm安装时,这个loader很容易安装失败,最好使用cn

HDFS(一)架构及文件读写流程

Hadoop 中有三大组件:HDFS.MapReduce.YARN,HDFS 负责大文件存储的问题,MapReduce 负责大数据计算,而 YARN 负责资源的调度,接下来的文章我会一一介绍这几个组件.今天我们先来聊聊 HDFS 的架构及文件的读写流程. 总体架构 HDFS 设计的目的是为了存储大数据集的文件,因此一台服务器是应付不了的,我们需要一个集群来实现这个目标.当用户需要存储一个文件时,HDFS 会将这个文件切分为一个个小的数据块(在 2.x 的版本中,每个数据块默认大小为 128M),

导入sass文件

4导入sass文件 sass的@import规则在生成css文件时就把相关文件导入进来.这意味着所有相关的样式被归纳到了同一个css文件中,而无需发起额外的下载请求. 1 sass局部文件的文件名以下划线开头.这样,sass就不会在编译时单独编译这个文件输出css,而只把这个文件用作导入.当你@import一个局部文件时,还可以不写文件的全名,即省略文件名开头的下划线. 2 默认变量值 !default用于变量,含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值.与css 中

Vue 融入flexible.js scss(sass)文件 添加scss文件 sass

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "He