初识sass

一、sass安装

1、使用npm安装

​ npm install sass -g

2、windows上安装（使用Windows 的包管理器 Chocolatey）

​ choco install sass

二、sass的使用

1、sass编译成css

​ sass dir/file:dir/file

2、sass变量

（1）声明变量：$符号开头，也可以设置多个值，如boder属性

​ $primary-color:#1269ba;

​ $primary-border:1 solid $primary-color;

(2)变量的下划线和横线可以相互切换

3、嵌套

嵌套选择器

    ul{
        font-size: 15px;
        border: 1px solid $primary_color;
        li{
            list-style: none;
        }
    }

​ 在样式中需要用到父级的名称（如伪类）

    a{
        display: block;
        color: #000;
        &:hover{
            background-color: #9fde00;
        }
     }

属性选择器

    font:{
        size: 15px;
        family: Arial, Helvetica, sans-serif;
        weight: normal;
    }

4、Mixin

	@mixin important-text {
 		 color: red;
  		background-color: #f345e3;
	}
	.alert_warning{
  		@include important-text;
	}

5、继承

	alert {
  		padding: 15px;
	}
	.alert-info {
 		 @extend .alert;
 		 background-color: #e4565f;
	}