css中原生@import指令弊端：

1、放在代码最前边，否则不起作用。

2、对性能不利。识别到@import才下载，浏览器阻塞。

原生的import和sass的import的区别

sass中类的属性嵌套

sass中类的嵌套引用

 块注释解释引用样式

基于sass的既定规则

使用css原生import的方法

scss文件中声明标题和文章字体

sass-convert 命令：scss、sass互相转换

sass 引入，

@import ‘zxc’ zxc 中 $z=zx

sth=z

跨游览器 normalize P，span等等

sass @import 在编译时，将背引入的文件整合到css中

scss sass转换

sass -convert main.scss main.sass

---------------------------------------------

文件加下划线，局部文件

---------------------------------------------

@import"局部文件目录" 

导入局部文件

@import所在的文件称为宿主文件

---------------------------------------------

reset浏览器默认样式全部清除

Normalize选择性的剔除替换

---------------------------------------------

sass不但提供类的嵌套也提供了属性的嵌套

.main-sec {//一个空格在类选择器后边
 font-family {
     font：{
       family:$main-sec-ff;//@import导入文件的变量
       size:16px;
     }
 }
}

基于sass的既定规则

使用css原生@improt的既定规则

sass基本语法：

注释 : //不会在编译后的css文件中出现，/**/会在编译后的css文件中出现

scss除了提供类的嵌套能力还提供了属性的嵌套

// 注释的内容最后不会生成到css文件中

/**/这个会

//注释习惯

/**

*CONTENTS

*

*SETTINGS

*

*TOOLS

*

*COMPONENTS

*

*BUSINESS

*

*BASE

*/

两行import可以写成一行

@import “variables”,"compass/reset"

@import "variables"

//文件目录下的文件是_variables.scss

使用css原生@improt的既定规则

scss 同 sass 文件互相转换命令：

scss转sass: sass-convert main.scss main.sass

sass转scss: sass-convert main.sass main.scss

命令sass-convert 不变，参数文件互换即可；

@import 引入局部文件的时候，不需要加前边的下滑线；

sass 重新定义了@import 引入命令，可随意引入；不同与css的@import命令；

非要使用css原生的@import命令满足条件：

引入文件合并引入：

合并

/* 注释 */   注释的内容会编译到文件中;

// 注释   注释的内容不会编译到文件中；

对引入文件进行分别注释：

父类选择器： &

sass 除了提供类嵌套，还提供属性嵌套：

属性嵌套后：

注意属性嵌套加冒号