scss常用用法和弹性布局 自己整理

scss常用用法
一.引入弹性布局
引入scss样式方法里面有flex布局弹性布局
在script里面引入
注意：格式语法
①：引入：import “./common/host.scss”
②：带入： @include flex(" center")
import “./common/host.scss”

. max｛
width:100%
@include flex(" center")
. list1｛
width:100%
height:100%
background—color:blue;
｝
. list2｛
@extend . list1
｝
｝


二.变量样式引量
注意：格式语法
$high—color:red;
. max{
background-color：$high—color
}

三.样式继承:list2引入list1
注意：格式语法 @extend 
. max｛
. list1｛
width:100%
height:100%
background—color:blue;
｝
. list2｛
@extend . list1
｝
｝

四：给选择器两个名字用法
注意：格式语法 &.table_table 

<div class="max table_max">
<div class="list"></div>
</div>

. max{
width:100%；
height:100%;
background-color:blue;
.list｛
width:100%
｝
&.table_table｛
border:none;
｝
}


弹性布局 
注意：使用弹性布局一般！！！不给父元素设置高度让子元素自己撑开高度，也就是：自己设置子元素高度 display: flex;
flex-direction: row;
// flex-direction: column;//主轴也就是横向x决定内容横向还是纵向排列的
justify-content: flex-start;//纵轴也就是横向y
align-items: center; http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html