sass

sass

什么是sass?

sass是针对css的一种可编程的css拓展语言（由于原生css是一种重叠式样式表，使用起来会有许多的重复代码不方便，所以需要sass或者less这样的拓展语言来协助项目快速开发）

安装(选择基于node的sass)

npm i -D node-sass gulp-sass

文件后缀名为scss

几种常用用法：

计算

//sass
.box{
	width: 300px + 400px;
	height: 300px /400 px * 100%;
}
//css
.box{
	width: 700px;
	height: 75%;
}

变量(当我们需要对某种参数进行集体修改时，就可以通过修改变量，来达到全局修改)

//sass：定义以$开头
$mainColor: red;
.box{
    color: $mainColor;
}
//css
.box{color:red}

$colors: #f00 #fff;
.left {
	color: nth($colors, 1);
}

$size: (10px) (10px 20px) (10px 20px 30px);
.right{
	margin: nth($size, 2);
	padding: nth($size,3);
}

//多值变量
//sass
$list: (h1: 20px, h2: 30px, h3: 40px);
@each $k,$v in $list {
    #{$k} {
        font-size: $v;
    }
}
//css
h1 {
  font-size: 20px; }

h2 {
  font-size: 30px; }

h3 {
  font-size: 40px; }

嵌套

//scss
.main {
    height: 500px;
    .left{
        float: left;
        li{
            float: left;
            >a {
                color: #fff;
                &:hover {
                    color: #00f;
                }
            }
        }
    }
    .right{
        float: right;
        p{
            font-size: 20px;
        }
    }
}
//css
.main { height: 500px; }
.main .left { float: left; }
.main .left li { float: left; }
.main .left li > a { color: #fff; }
.main .left li > a:hover {color: #00f; }
.main .right {float: right; }
.main .right p {font-size: 20px; }

//scss
.header{
    height: 300px;
    &-top {
        height: 50px;
        &-title {
            font-size: 20px;
        }
    }
}
//css
.header {height: 300px; }
.header-top {height: 50px; }
.header-top-title {font-size: 20px; }

mixin (定义一段样式片段)

//scss
@mixin center ($w,$h) {
    width: $w;
    height: $h;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.box {
    @include center(100px,200px);
}
//css
.box {
  width: 100px;
  height: 200px;
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto; 
}

继承

//scss
.ac {
    color: red;
    font-size: 20px;
}
.acc {
    width: 300px;
    @extend .ac;
}
//css
.ac, .acc {
  color: red;
  font-size: 20px; }

.acc {
  width: 300px; }

导入其他scss文件

@import './base.scss'