SASS学习

SASS

     1.什么是SASS

        1.SASS是最成熟、最稳定关联强大而且专业的css扩展语言。

        2.SASS是css的扩展语言，容许使用变量嵌入规则，mixin,imports以及更多的语法来使css更强大，更易于组织速度更快，SASS就是css的预编译语言。

         3.SCSS & SASS

            这两个语法的不一样之处。

             SASS:它的属性用了缩进来进行代码块的区分，相似于python的脚本语言，但这种语法和咱们现阶段的css语法是不兼容的，后期的版本就将语法改为了SCSS。

                 #main 

                    color:blue 

                    fontsize:3em

             SCSS:#main{color:blue;fontsize:3em;}

     2.SASS的预处理

        对浏览器来讲它只认识HTML、css和js，因此须要一个工具将咱们的SASS这种既支持编程，又支持函数循环的这种语法，他能让浏览器识别，这就须要编译。

         1.koala

            监视文件系统指定的路径项，这个SASS文件是否有改变，而且给他编译，这种工具对咱们通常人来讲还不是特别方便，能够考虑用下面这两种方式。

         2.Ruby插件和webstorm

            RUBY不要安装到中文路径,我用的vscode，因此不用webstorm了

         3.gulp

            通常用于导入的css文件用_开头命名，好比_common.scss

    3.SASS语法 

         mixin

            1变量

                 $fontSize:20px;

             2.嵌套

                .div{
                    font-size: $fontSize;
                    .box{
                        height: 100px;width: 100px;
                    }
                    .img{
                        display:block;
                    }
                }

 

             3.导入

                  @import "_common.scss";//引用_common.scss模块，vscode里面使用。 

             4.mixin

                @mixin font($family,$size,$weight) {
                    font-family: $family;
                    font-size: $size;
                    font-weight: $weight;
                }
                @mixin  transition($prop,$time) {//能够将浏览器兼容性问题都放到函数里面
                    -moz-transition: $prop,$time;
                    -o-transition: $prop,$time;
                    -webkit-transition: $prop,$time;
                    transition: $prop,$time;
                }
                a{
                    @include font('\5fae\8f6f\96c5\9ed1',30px,bold);//"微软雅黑"unicode码
                }
                div{
                    @include transition(all,.5s)
                }

 

             5.扩展

                若是一个元素方法过多，也会形成维护问题，这里用到扩展方法,将一些共有的属性都继承到一个类中

                    .message{
                        height: 100px;
                        width: 50px;
                    }
                    .boxmessage{
                        @extend .message;
                    }

 

             6.funtion

                在移动端若是使用px的话，是一种很是麻烦的方式，这里在scss文件中能够设定咱们的设计稿的宽度能够分红多少个而言，好比10份

                    $count : 10;
                    $designWidth:640px;
                    @function px2em($px){
                        @return $px * $count / $designWidth *1em;//乘以1em让结果带上单位
                    }
                    .div2{
                        height: px2em(100px);
                        width: px2em(100px);
                    }

 

             7.expression

                scss支持加减乘除，还能够循环

                    @mixin transform($rotateY,$i) {
                        transform: $rotateY($i);
                        -moz-transform: $rotateY($i);
                        -ms-transform: $rotateY($i);
                        -o-transform: $rotateY($i);
                        -webkit-transform: $rotateY($i);
                    }
                    @for $i from 1 through 15 {
                    .box div:nth-of-type(#{$i}){//让.box下面的15个div都逐渐旋转，这里注意传入参数的格式#{$i}
                        @include transform(rotate,$i * 30deg);
                    }
                    //布尔和if判断语句
                    $someEvent:false;
                    @if $someEvent{
                        p{
                            background: black;
                            color: black;
                        }
                    }@else{
                        p{
                            background: red;
                            color: blue;
                        }
                    }
}