Today

1.sass字符串 :如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中

2.& 必须出现在的选择器的开头位置,也就是作为选择器的第一个字符），

但可以跟随后缀，将被添加到父选择的后面

#main {  color: black;  

&-sidebar { border: 1px solid; }}

4.HSL 色调 饱和度 亮度

background-color: hsl(360, 50%, 50%);

5.试着把自己常用的sass代码保存起来成一个lib，比如mixin之类的，要用的时候就' @import '

所谓抽象的关键是要把变量摘出来并且能允许扩展时自定义，这样一套代码才可以实现无数种可能性

比如 画三角形 这里border后面 加冒号

.box {

  border: {

   top: 1px solid red;

   bottom: 1px solid green;

  }

}

6.全局变量就是定义在元素外部的变量，如下代码：

$color : orange !default;

而定义在元素内部的变量，比如$color:red;就是一个局部变量。

除此之外，Sass现在还提供一个!global参数。!global和!default对于定义变量都是很有帮助的

7.

避免选择器嵌套：

▶选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。
▶选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。

8.按照sass 规范结构创建 base layout utils modules 文件夹

在base 文件夹创建 reset.scss  重写 浏览器默认样式

Tomorrow 

1.完成任务12

2.开始任务13

Gain

1.移动端rem布局

2.sass编码规范 类命名规则

3.sass开发规范 - 结构:

Sass的 @import 指令引入和css的引入不同（引入非css原文件），Sass的引入最终编译成css文件时，是把引入的文件归纳到一个文件中，即合并成一个文件，而不是css那样，产生额外的网络请求去获取内容。

基于Sass的 @import 指令工作原理，Sass实际编程中可以将结构划分的特别细，多个文件多个目录，即可以拆分代码库到几个文件中，而又不会影响性能，且方便维护与重用。

Layout文件夹

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

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

Components文件夹

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

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

Abstracts 文件夹

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

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

• _variables.scss
• _mixins.scss
• _functions.scss
• _placeholders.scss

abstracts/ 文件夹也会被称为 helpers/ 或 utilities

Base文件夹

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

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

入口文件

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

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

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

4.@mixin 和 @extend 不一样在于 继承 可以把相同样式放入一个{}  但用@mixin 会放两个{} 

5.

List类型的取值,语法nth(list, index),第一个参数表示要取谁的,也就是list类型的变量的名称,第二个表示索引,这里的索引和JavaScript略有不同,JavaScript索引基本上都是从零开始,而这里是从一开始的.

Pain

1.那个compass 貌似有点鸡肋...本来 sass 就不熟...先把它扔一边吧

2.用 考拉 编译的时候 ,吧文件名命名为 _base.scss 的话考拉似乎找不到它