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
scss常用用法和弹性布局 自己整理
猜你喜欢
转载自blog.csdn.net/m0_49714202/article/details/117300583
今日推荐
周排行