所有这些资产帮助您创建更好的网络体验与更少的麻烦。让我们逐个介绍。 gatsby-browser.js 此文件用于实现Gatsby浏览器api。对于这个项目，我们不需要在这个文件中放入任何东西。...import React from 'react'; import "../styles/index.sass"; import Helmet from '....编程式页面生成 我们已经使用谷歌Colab生成了文章，并且使用gatsby-source-drive插件将文件直接归档到我们的本地文件系统中。现在我们需要使用markdown文件以编程方式生成网页。...同样，确保您的gatsby-config.js文件包含 gatsby-source-filesystem和gatsby-transformer-remark。这些对于页面生成非常重要。...中，为每个markdown文件创建数据节点，然后所有这些节点将与页面模板一起使用，以创建实际的页面。
值必须用双引号包裹起来。 这种方式的react样式，只作用于当前组件。 第二种: 在组件中引入[name].css文件 需要在当前组件开头使用import引入css文件。...第三种: 3、在组件中引入[name].scss文件 引入react内部已经支持了后缀为scss的文件，所以只需要安装node-sass即可，因为有个node-sass，scss文件才能在node环境上编译成...它的好处在于可以随时通过往组件上传入 属性，来动态的改变样式。对于处理变量、媒体查询、伪类等较方便的。 这种方式的css也只对当前组件有效。...、媒体查询、伪类等是不方便的。...使用Radium可以直接处理变量、媒体查询、伪类等，并且可以直接使用js中的数学，连接，正则表达式，条件，函数等。
值必须用双引号包裹起来。 这种方式的react样式，只作用于当前组件。 第二种: 在组件中引入[name].css文件 需要在当前组件开头使用import引入css文件。...第三种: 在组件中引入[name].scss文件 引入react内部已经支持了后缀为scss的文件，所以只需要安装node-sass即可，因为有个node-sass，scss文件才能在node环境上编译成...它的好处在于可以随时通过往组件上传入 属性，来动态的改变样式。对于处理变量、媒体查询、伪类等较方便的。 这种方式的css也只对当前组件有效。具体用法，请查看styled-components官网。...、媒体查询、伪类等是不方便的。...使用Radium可以直接处理变量、媒体查询、伪类等，并且可以直接使用js中的数学，连接，正则表达式，条件，函数等。
起步 安装cli npm install-g gatsby-cli Gatsby 带有一个很棒的CLI(命令行接口)，它包含了一个工作站点的搭建功能，以及帮助开发该站点的命令。...备注: 学习更多关于 GraphQL 知识, 请参考 excellent resource潜在的查询名称 BlogPostByPath (注意:这些查询名称必须是唯一的！)...接下来:以编程方式创建必要的静态页面(并将模板注入)与 Gatsby 的 Node API，让我们开始吧。 此时需要注意的一点是，GraphQL 查询是在构建时进行的。...对于所有公开的 action 的完整列表，请参阅 Gatsby 的文档。现在我们可以构造 GraphQL 查询，它将获取我们所有的 Markdown 贴子。...对于页面列表，Gatsby 有一个规范， 它们被放在我们指定的文件系统的根目录中 gatsby-source-filesystem，例如 src/pages/index.js。
以下几种情况，Sass 会将 @import 编译为原生的 CSS 指令： 资源文件后缀为 .css 资源以 URL 地址的形式导入 资源以 CSS 的 url() 方法导入 @media @media...是 CSS 原生支持的指令，用于查询设备媒体，以便做响应式布局。...Sass 对 @media 做了一些改进，允许我们在嵌套的过程中书写媒体查询和响应代码。在编译时， Sass 会把媒体查询编译到文件最外层，并为子选择器加上父选择器前缀。...媒体查询的好处： 以前使用原生 CSS 做响应式布局时，我们需要先写好不同的媒体查询区块，整理出元素在不同设备的特殊样式，然后写入对应的区块。...一个元素的样式分散在不同的媒体查询中，维护起来比较麻烦。 在 Sass 中，我们可以在写完一个元素的公共样式之后，直接在下面嵌套媒体查询，所有的响应代码和这个元素都写在同一块地方，维护起来非常方便。
（8）对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如 ，box-shadow）。...三、不要使用 @import 3.1 不用原因 与 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。...四、媒体查询（Media query）的位置 4.1 相关规则附近 将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。...六、单行规则声明 6.1 放在一行 对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行。...九、Less 和 Sass 中的操作符 为了提高可读性，在圆括号中的数学计算表达式的数值、变量和操作符之间均添加一个空格。 ? 十、注释 10.1 注意 代码是由人编写并维护的。
rem 作用于非根元素字体大小时，相对于根元素字体大小；rem 作用于根元素字体大小时，相对于其初始字体的大小。...整个页面只有一个 html，通过修改 html 的文字大小，可以很好的控制页面中元素的大小。 媒体查询 介绍 媒体查询(Media Query)是 CSS3 新语法。...、not、only media feature 媒体特性必须有小括号包含 media type 查询类型 将不同的终端设备划分成不同的类型。...@变量名:值; 变量命名规范 必须以@为前缀 不能包含特殊字符 不能以数字开头 区分大小写 使用示例： Less 编译 Less 包含一套自定义的语法和一个解析器，用户根据这些语法定义自己的样式规则，...② 屏幕宽度/划分的份数就是 html font-size 大小 ③ 页面元素的 rem 值=页面元素值（px）/html font-size 大小 @import 导入的 css 文件名：可以把一个样式文件导入到另一个样式文件中
.html） b.根据媒体查询，判断屏幕分辨率以视情况的引入对应的css文件 c.在css中的@import语法：http://caibaojian.com/css3/rules/@import.htm...import指定媒体类型和媒体查询。...IE8不支持@import指定媒体查询。...（当@import后边跟的文件名是以.css结尾的时候）【类似示例代码第一条】 如果文件名以 http:// 开头。 ...（当@import后边跟的是一个url()函数的时候）【类似示例代码第四条】 如果 @import 包含了任何媒体查询（media queries）。
@import Sass 支持所有css 的@规则，以及一些Sass 专属的规则，也被称为“指令（directive）”.这些规则在Sass 中具有不同的 功效，详细解释如下...@import Sass 扩展了CSS 的@import 规则，让它能够引入 SCSS 和 Sass 文件。...默认情况下，它会寻找 Sass 文件并 直接引入， 但是，在少数几种情况下，它会被编译成 CSS 的 @import 规则： 如果文件的扩展名师 .css ...如果文件名以 http:// 开头 如果文件名师url(). ...如果@import 包含了任何媒体查询（media queries） 如果上述情况都没有出现，并且扩展名是 .scss 或 .sass， 该名称的 Sass 或 SCSS 文件就会被引入
.html） b.根据媒体查询，判断屏幕分辨率以视情况的引入对应的css文件 c.在css中的@import语法：http://caibaojian.com/css3/rules/@import.htm...import指定媒体类型和媒体查询。...IE8不支持@import指定媒体查询。...如果文件名以 http:// 开头。 如果文件名是 url()。 如果 @import 包含了任何媒体查询（media queries）。...@import根据文件名引入 默认,他寻找Sass文件并引入，也可以一个import引入多个文件 条件是：文件的扩展名是.sass或者.scss； 如果没有扩展名，Sass将试着找出具有.sass
，根组件 App 除外 有意义的名词、简短、具有可读性 命名遵循 PascalCase 约定 公用组件以 Abcd (公司名缩写简称) 开头，如（AbcdDatePicker,AbcdTable） 页面内部组件以组件模块名简写为开头...只有一个文件的情况下不会出现文件夹，而是直接放在 views 目录下面，如 index.vue 尽量是名词,且使用驼峰命名法 开头的单词就是所属模块名字（workbenchIndex、workbenchList...特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的 hack、使用了某种算法或思路等需要进行注释描述 多重 if 判断语句 注释块必须以/**（至少两个星号）开头**/ 单行注释使用...用 Sass 的上下文媒体查询 子选择器作为最后的部分 .product-teaser { // 1....对于公用组件或者全局组件库，我们应该更倾向于选用基于 class 的 BEM 策略 // bad <!
@import Sass 拓展了 @import 的功能，允许其导入 SCSS 或 SASS 文件。...通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。...文件拓展名是 .css； 文件名以 http:// 开头； 文件名是 url()； @import 包含 media queries。...@error 用于报错，按标准错误输出流输出 序列 @-rules 作用 1 @import 导入 sass 或 scss 文件 2 @media 用于将样式规则设置为不同的媒体类型 3 @extend...# 2.展望 以上内容算是"基础"部分，但是对于日常开发，我觉得是足够使用的了。 如果想要进一步了解，就必须先去学习下 Ruby，使用 Ruby 相关模块进行更丰富地学习
如果import_package_list为空，则不要在类定义的开头添加import行。注意:如果一个类导入任何包，该类不会自动导入用户包。导入的包继承自所有超类。...如果指定了此选项，则它要么是单个包含文件的名称(没有.inc扩展名)或是多个包含文件的逗号分隔列表，用括号括起来。如果include_code为空，则忽略类定义开头的include行。...编译该类的生成器方法时使用的文件。如果include_generator_code为空，则不要在类定义的开头添加IncludeGenerator行。...SQL查询处理器在准备和执行SQL查询时利用可用的索引。可以向持久类添加索引定义。它们在其他类中没有意义。...该选项可以是单个属性表达式，也可以是用逗号分隔的属性表达式列表，用括号括起来。 给定的属性表达式包括: 要编制索引的属性的名称。
这样一来，就减少了生成的 CSS 文件的大小，让页面加载性能变得轻盈如鸟。不需要多余的CSS 代码。 避免与其他选择器冲突 占位符选择器的命名以 % 开头，与常规的 CSS 类选择器不同。....header { --background-color: #f2f2f2; } 4.2 Sass 变量的定义 定义规则 变量以 $ 开头，后跟变量名 变量名是不以数字开头的可包含字母、数字、下划线、...$border-color; 5.3 注意事项 如下的几种方式将不会导入任何 Sass 文件 文件拓展名是 .css @import "public.css"; 文件名是以 http:// 开头 @import..."http://xxx.com/xxx"; 使用的是 url() @import url(public.scss); @import 包含了媒体查询 @import 'landscape' screen...and (orientation:landscape); 5.4 局部文件的概念 如果不希望 _public.scss 文件被 Sass 检测到并编译成 CSS，可以将文件名改为以 下划线 开头的形式
介绍Bootstrap 是一个强大的框架，有助于创建响应式、以移动设备为首的网站。虽然开箱即用的 Bootstrap 样式非常出色，但在某些情况下，你可能希望进一步定制设计。...这就是 Sass 的魔力发挥作用的地方，Sass 是一种预处理脚本语言，可以解释或编译成层叠样式表（CSS）。Bootstrap 提供了其源 Sass 文件，以提供更好的定制体验。...要覆盖默认的主色，创建一个名为 custom.scss 的新 Sass 文件，放在与 Bootstrap Sass 文件相同的目录中：@import "bootstrap/scss/bootstrap"...(#dc3545, #c82333, #bd2130);}在上面的例子中，my-button 现在将保留 Bootstrap 按钮变体的样式，并带有定制颜色。...{ flex: 0 0 auto; width: 200px; }}这个 Sass 代码使用 Bootstrap 的媒体查询混合，在中型（md）设备及以上应用到 .custom-column
在网上讨论看来，Sass 与 Stylus 相比于 Less 功能更为丰富，但对于学习成本以及适应时间 ，Less 稍胜一筹，这也是我选择 Less 的原因。...sass 用法 1.基本用法 1 >变量 SASS 允许使用变量，所有变量以$开头。 ...@import "path/filename.scss"; 如果插入的是.css 文件，则等同于 css 的 import 命令。...margin: 20px; } 2>媒体查询 在以往的工作中，我们使用 媒体查询，都要把一个元素 分开写 #wrap { width: 500px; } @media screen and (max-width...once @import 语句的默认行为。这表明相同的文件只会被导入一次，而随后的导入文件的重复代码都不会解析。
响应式设计将不再是网页的加分项, 而是必须的 设置viewport 非固定宽度 媒体查询 使用 rem 替代 px 移动优先,柱状显示 1.3 基础的部署工作 ?...(Filezilla, Cyberduck) 静态页面托管(Netlify, Github Pages) 1.4 SASS预处理器 ?...内容管理系统允许快速开发并为您的客户提供更新内容的能力. 在你需要快速开发网站的时候, 它们是很适合的. 特别是对于自由开发者....，查询语言比标准RESET严格得多 ?...只查询你想要的东西 前端和后端可以合作得更为顺利 查询语句非常简单且很像JSON语句 Apollo是一个发送请求到GraphQL的客户端 使用的是Gatsby静态站点生成器 4.4 TypeScript
Sass中的变量和注释 5.1 定义变量及使用 Sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样）。...8.1 if语句 当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码。...导入文件 Sass的导入( @import)Sass文件规则和CSS的有所不同，编译时会将 @import的scss文件合并进来只生成一个CSS文件。...但是如果你在Sass文件中导入css文件如 @import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以 @import方式存在。...所有的Sass导入文件都可以忽略后缀名 .scss。一般来说基础的文件命名方法以_开头，如 _mixin.scss。这种文件在导入的时候可以不写下划线，可写成 @import "mixin"。
领取专属 10元无门槛券
手把手带您无忧上云
