简单总结一下第二天学习Sass的知识点

Sass的目的之一就是为了少写css代码，便于阅读。

为降低Sass编译后的css代码量，使用组合选择器更能提高网站的速度：

先复习一下css选择器 

// 后代选择器
article section { margin: 5px } //祖先元素 后代元素 {}

// 子元素选择器
article > section { border: 1px solid #ccc } //父元素 子元素 {}

// 兄弟元素选择器 + ~
header + p { font-size: 1.1em } //选中元素 紧跟在选中元素的第一个p元素，如果header后面的第一个元素不是p标签，则该选择器不生效
div ~ p { color: #333 } //前一个~后面所有 选中后面所有指定兄弟元素

//分组选择器（并集选择器）
.p1,#p2,.p3...{} // 选择器1，选择器2，选择器n{} 选中多个选择器对应的元素

//复合选择器（交集选择器）注意选择器之间不能有空格，要紧挨着
span.s3 { font-size: 20px } //选中span标签class叫s3的元素

//伪类选择器 伪类表示元素的一种特殊状态
:hover   移入时元素的状态
:visited  已被访问过后的元素的状态
:active   被点击时元素的状态

//通配选择器 用来选中页面中所有的元素
*{ color:red }

//属性选择器 根据元素中的属性或属性值来选取指定元素
p[title*="bc"] { backgroud-color: yellow } //把所有title属性值中包含bc的p标签并设置成黄色背景
p[title="abc"] { color: red } //把所有title属性值为abc的p标签并设置成红色
p[title^="abc"] { color: red } //把所有title属性值以abc开头的p标签并设置成红色p[title$="abc"] { color: red } //把所有title属性值以abc结尾的p标签并设置成红色

　　这些选择器可以毫不费力的用到Sass的规则嵌套中

#div {
　　~div{ font-size: 12px }; //选中#div后面所有的div标签
　　>p { backgroud: #eee }; //选中#div下所有的p标签
　　dl > {
　　　　dt { color: #333 };
　　　　dd { color: #fff };
　　};
　　nav + & { margin: 10px }
}　

 1.嵌套属性

div{
  border-style:solid;
  border-width:1px;
  border-color:#222;          
}
//改成：
div{
  border:{
    style:solid;
    width:1px;
    color:#222;     
  }  
}

2.导入Sass

css有一个不常用的@import规则，允许一个css文件导入其他css文件，后果就是只有执行到@import时，浏览器才会下载其他css文件，导致页面加载起来特别慢。

Sass也有一个@import规则，与css不同的是Sass的@import规则在生成css的时候就把相关文件导入进来了，这意味着所有的相关样式被归纳到了同一个css文件中，而无需发起额外的下载请求。被导入文件的变量和混合器都可以再导入文件中使用。

Sass文件散布在项目中，但有些Sass项目的作用只用于导入，Sass特意为这种情况约定了命名规则，即下划线开头，表示该文件只用于被引用，不需要生成对应的独立css文件。被引用时可以省略文件名开头的下划线。举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import “themes/night-sky”，局部文件可以有多个不同文件引用。