发表于： 2018-11-08 20:26:00
1 821
今天完成的事情：
任务总结：
成果链接：https://miboweixin.github.io/weixin/rw11/task11.html
任务耗时：2018.10.22-2018.10.23（2天） 无延期
官网脑图：
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
Sass 有两种语法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。
另一种也是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 "Sass"，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式，具体请查看 the indented syntax reference。这种格式以 .sass 作为拓展名。
任何一种格式可以直接 导入 (@import) 到另一种格式中使用，或者通过 sass-convert 命令行工具转换成另一种格式：
编码格式 (Encodings)
在 Ruby 1.9 及以上环境中运行 Sass 时，Sass 对文件的编码格式比较敏感，首先会根据 CSS spec 判断样式文件的编码格式，如果失败则检测 Ruby string encoding。也就是说，Sass 首先检查 Unicode byte order mark，然后是 @charset 声明，最后是 Ruby string encoding，假如都没有检测到，默认使用 UTF-8 编码。
与 CSS 相同，使用 @charset 可以声明特定的编码格式。在样式文件的起始位置（前面没有任何空白与注释）插入 @charset "encoding-name"， Sass 将会按照给出的编码格式编译文件。注意所使用的编码格式必须可转换为 Unicode 字符集。
Sass 以 UTF-8 编码输出 CSS 文件，当且仅当编译后的文件中包含非 ASCII 字符时，才会在输出文件中添加 @charset 声明，而在压缩模式下 (compressed mode) 使用 UTF-8 byte order mark 代替 @charset 声明语句。
4. CSS 功能拓展 (CSS Extensions)
4.1. 嵌套规则 (Nested Rules)
Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如：
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}编译为
#main p {
color: #00ff00;
width: 97%; }
#main p .redbox {
background-color: #ff0000;
color: #000000; }嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理：
父选择器 & (Referencing Parent Selectors: &)
在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。
属性嵌套 (Nested Properties)
有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中
数据类型 (Data Types)
SassScript 支持 6 种主要的数据类型：
- 数字，
1, 2, 13, 10px - 字符串，有引号字符串与无引号字符串，
"foo", 'bar', baz - 颜色，
blue, #04a3f9, rgba(255,0,0,0.5) - 布尔型，
true, false - 空值，
null - 数组 (list)，用空格或逗号作分隔符，
1.5em 1em 0 2em, Helvetica, Arial, sans-serif - maps, 相当于 JavaScript 的 object，
(key1: value1, key2: value2)
SassScript 也支持其他 CSS 属性值，比如 Unicode 字符集，或 !important 声明。然而Sass 不会特殊对待这些属性值，一律视为无引号字符串。
明天计划的事情：继续深入学习sass
遇到的问题：sass用的不熟悉，只会一两种
收获：
HTML和CSS规范
省略图片、样式、脚本以及其他媒体文件 URL 的协议部分（http:,https:），除非文件在两种协议下都不可用。这种方案称为potocol-relative URL，好处是无论你是使用 HTTPS 还是 HTTP 访问页面，浏览器都会以相同的协议请求页面中的资源，同时可以节省一部分字节。
整理如下：
通用格式规范
1.次缩进2个空格，不要使用 tab 或者混合 tab 和空格的缩进。
2.HTML 元素名称，属性，属性值（除非 text/CDATA），CSS 选择器，属性，属性值
。
3结尾空格不仅多余，而且在比较代码时会更麻烦。
4.使用注释来解释代码：包含的模块，功能以及优点。
5.用 TODO 来标记待办事项，而不是用一些其他的标记，像 @@。
6.HTML 文档应使用 HTML5 的文档类型：<!DOCTYPE html>。孤立标签无需封闭自身，<br> 不要写成 <br />。
7.尽可能使用正确的 HTML。
8.根据使用场景选择正确的 HTML 元素（有时被错误的称为“标签”）。例如，使用 h1 元素创建标题，p 元素创建段落，a 元素创建链接等等。正确的使用 HTML 元素对于可访问性、可重用性以及编码效率都很重要。
9.对于像图片、视频、canvas 动画等多媒体元素，确保提供其他可访问的内容。图片可以使用替代文本（alt），视频和音频可以使用文字版本。
10.如果团队中文件和编辑器使用同样的编码方式，就没必要使用实体引用，如 —，”，☺，除了一些在 HTML 中有特殊含义的字符（如 < 和 &）以及不可见的字符（如空格）。
11.标记、样式和脚本分离，确保相互耦合最小化。
12.在引用样式表和脚本时，不要指定 type 属性，除非不是 CSS 或 JavaScript。因为 HTML5 中已经默认指定样式变的 type 是 text/css，脚本的type 是 text/javascript。
13.属性值用双引号。
14.使用有含义的 id 和 class 名称。
15.id 和 class 应该尽量简短，同时要容易理解。
16.使用带前缀的命名空间可以防止命名冲突，同时提高代码可维护性。
返回列表
评论