sass的基础学习(一）

变量

• 变量的声明 $变量名
• 变量的引用
• 变量可以用中划线，也可以用下划线 两者命名的内容是相通的，但在sass中纯css部分不互通

嵌套CSS规则

• 可以在规则块中嵌套规则块，避免相同class名或id名重复书写(但编译过后还是原本css的规则)，大部分情况下简单的嵌套都没问题，但在父选择器下有一个类似于:hover的伪类，这时候要采用&

• 父选择器的标识符&

• 群组选择器的嵌套 (普通css的写法.container h1, .container h2, .container h3 { margin-bottom: .8em }) sass的嵌套写法.container {
  h1, h2, h3 {margin-bottom: .8em}
  }
  处理这种群组选择器规则嵌套的能力，正是sass在减少重写书写方面的贡献
  有利必有弊，虽然sass让样式看上去很小，但实际生成的css非常大，降低网站的速度

• 子组合选择器和同层组合选择器>、+、~ (+ 同层相邻相当于next()方法，~同层相邻全体相当于nextAll())

• 嵌套属性 把属性名从中划线-的地方断开，在根属性后面添加一个冒号：紧跟一个{}块，把子 属性部分写在{}块中，sass会把子属性一一解开，把根属性和子属性用过中划线连接起来，最后生成的效果和手写的css样式一样

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
//解析之后的css样式
nav{
border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

样式表越来越大，可以将其分拆成多个文件
导入SASS文件
css：@import允许在一个css文件中导入其他css文件，后果是只有执行到@import时浏览器才会下载其他css我那件，导致页面加载起来很慢
sass：在生成css文件后就把相关文件导入进来，意味着所有相关的样式都被归纳到同一个css文件，而无需发起额外的下载请求

• 使用SASS部分文件
  sass局部文件名以下划线开头，sass就不会在编译时单独编译这个文件输入css，而只把这个文件用作导入
  当@import导入部分文件时，还可以不用写文件的全名，即省略文件名开头的下划线

• 默认变量值
  !default，它很像css属性中的！important标签的对立面，不同的是!default用于变量，如果这个变量被声明赋值了，那就用它声明的值，否则就用默认值
  如果用户在导入你的sass文件之前申明了一个$fancybox-width变量，下面局部文件中对$fancybox-width赋值400px的操作就无效

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

• 嵌套导入
  这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方

//_blue-theme.scss文件
aside {
  background: blue;
  color: white;
}
//然后把它导入到一个CSS规则内
.blue-theme {@import "blue-theme"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}