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;
                        }
                    }
}

SASS学习

推荐阅读