sass的学习

sass和scss的区别：

实际上是同一种技术的不同叫法。

语法差异，scss是对sass的一种改进，他引入了更接近标准的css语法，更适合直接转换为css代码。

SASS

注释

sass中的多行注释（/**/）会显示在原文中，单行注释（//）不会限制在原文中

&父选择器

在嵌套css规则时，有时也需要直接使用嵌套外层的父选择器。

.container{
    font-size:14px;
    .header{
        width: 50%;
        height: 30px;
        .left{
            float: left;
        }
        &:hover{
            text-decoration: underline;
            color: #F00;
        }
    }
    .top{
        background-color:  green;
        &-left{
            border: 1px #f2f2f2 solid;
        }
    }
    &::after{
        display: inline-block;
    }
}

解析出来的css代码为： 

.container {
  font-size: 14px;
}
.container .header {
  width: 50%;
  height: 30px;
}
.container .header .left {
  float: left;
}
.container .header:hover {
  text-decoration: underline;
  color: #F00;
}
.container .top {
  background-color: green;
}
.container .top-left {
  border: 1px #f2f2f2 solid;
}
.container::after {
  display: inline-block;
}/*# sourceMappingURL=css.css.map */

%占位符选择器

它的目的是扩展其他选择器，html代码中并没有使用该类，以百分号开头。

变量

定义规则

• 变量以美元符号（$）开头，后面跟变量名
• 变量名是不以数字开头的可包含字母、数字、下划线、横线（连接符）
• 写法同css，即变量名和值之间用冒号分隔
• 变量一定要先定义，后使用

导入

都将作为普通的css语句，不会导入任何Sass文件，有以下的导入方式：

• 文件拓展名是 .css
• 文件名以http://开头
• 文件名是url()
• @import包含media queries

@use使用

• @use引入同一个文件多次，不会重复引入，二@import会重复引用
• @use引入的文件都是一个模块，默认以文件名作为模块名，可通过as去别名
• @use引入多个文件时，每个文件都是单独的模块，相同变量名不会覆盖，通过模块名访问，而@import变量会被覆盖
• @use可以通过@use 'xxx' as * 来取消命名空间，但是不建议这么做
• @use模块内可以通过$-或$_来定义私用成员，也就是所以这两个开头的不会被使用@use的模块引入
• @use模块内变量可以通过!default定义默认值，引入时可以通过with(…)的方式修改
• 可定义-index.scss或_index.scss来合并多个scss文件，他@use默认加载文件

@extend继承

.header{
    color: #fff;
    border: 1px solid #ccc;
}
.myBox{
    @extend .header;//将继承.header类的所有属性
    font-size: 22px;
}

循环

• @for $i from through //包括end值
• @for $i from to //不包括end值
• @while循环，只要后面的条件为true就会执行，知道表达式值为false时停止循环
• @each $item in class1,class2 //$item就是遍历了in关键词后面的类名列