javaScript学习笔记day33————sass

概念

Sass是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！Sass让我们更灵活、更方便的书写css样式。Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。     提供了命令行编译，sass内置有四种编译格式（嵌套nested，扩展expanded，紧凑compact，压缩compressed）。

命令编辑

下载sass  npm i -g sass

1、单行转换命令

sass input.sass,output.css;

sass index.sass index.css;

2、单行实时监控事件

sass --watch index.sass:index.css

3、若sass和css同一个文件夹时 实时监控

sass --watch sass:css

4、你有很多个sass文件的目录，监听整个目录

sass watch app/sass:public/stylesheets

5.--style表示解析后的css是什么排版格式;
                sass内置有四种编译格式:

                nested 嵌套型（默认格式）  

                        sass --watch sass:css --style nested

                expanded 扩展型

                        sass --watch sass:css --style expanded

                compact  紧凑型  

                        sass --watch sass:css --style compact

                compressed 压缩型

                        sass --watch sass:css --style compressed

特色功能 (Features)
完全兼容 CSS3
在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
通过函数进行颜色值与属性值的运算
提供控制指令 (control directives)等高级功能
自定义输出格式
变量 $ (Variables: $)
        SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样：

可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

注释 
Sass 支持标准的 CSS 多行注释/*!*/ /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会，

 嵌套
@import引入其他文件
@if
@if 1<2{
} @else if{
}@else{
}

 @for
@for $i from 1 through $columns{ //循环 1到12 包含12

    

}

@for $i from 1 to 12{ //循环 1到11不包含12 

}

@each
@each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值，也就是值列表。

@each $i in $list {  //$list是要循环的内容  $i是下标

 }

@while
@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。例如：

@while $i>0 {
    .item{
        width: 100%/$i;

    }

    $i: $i - 1;

}

@extend
用于继承后面选择器的属性

@extend .box 可以继承.box的所有属性

混合指令
混合指令的用法是在 @mixin 后添加名称与样式 使用 @include 指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）：

为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示
 

移动端的vw 和sass

单位转换：

@function vw($px){

    @return ($px/750)*100vw

}

调用：

例：box{

width:200px;

height:100%;

header

.box{
    height: 100%;
    display: flex;
    flex-direction: column;
    header{
        height: vw(88);
        background: pink;
    }
    .context{
        flex: 1;
        .list{
            height: vw(445);
            width: vw(320);
            background: yellow;
        }
    }
    footer{
        height: vw(130);
        background: orange;
    }
}

}