Boot(重点SCSS☆☆☆☆☆)(day03)

10.媒体对象
div.media    弹性,主轴x,交叉轴start
  >img
  +div.media-body  flex:1;
11.焦点轮播图
1.最外层大包裹
div.carousel   事件  data-ride="carousel"
①轮播的图片
  >div.carousel-inner
    >div.carousel-item   其中一个写.active
      >img.w-100
②左右箭头
a.carousel-control-prev/next
  >span.carousel-control-prev/next-icon 
注意,按照我们的需求,需要重写样式
.carousel-control-prev,
.carousel-control-next{
  width:4%;height:20%;
  background-color:#aaa;
  border-radius: .25rem;
  top:40%;
}
.carousel-control-prev{
  left:0.25rem;
}
.carousel-control-next{
  right:0.25rem;
}
③轮播指示器
ul.carousel-indicators
 >li   一个li.active
事件 li  data-slide-to="n" data-target="#demo"
根据自己的需求,重写样式
//中屏以上
@media (min-width:768px) { 
    .carousel-indicators li{
    width:0.8rem;height:0.8rem;
    border-radius: 50%;
    background:#fff;
    margin-left:0.4rem;
    margin-right: 0.4rem;
   }
}
//小屏以下
@media (max-width:767px) {
    .carousel-indicators li{
     width:0.4rem;height:0.4rem;
     border-radius: 50%;
     background:#fff;
     margin-left:0.2rem;
     margin-right: 0.2rem;
        }
   }

.carousel-indicators li.active{
     background:#0aa1ed;
  }
  
12.模态框
div.modal
  >div.modal-dialog
    >di.modal-content
      >div.modal-header
      +div.modal-body
      +div.modal-footer 
      
七.其它组件
1.徽章
.badge   基本类
.badge-danger/warning...
.badge-pill 胶囊徽章

2.巨幕
. jumbotron  巨大的内边距

3.面包屑导航
面包屑导航的本意,有递进关系的导航
ul.breadcrumb
 >li.breadcrumb-item
修改li之间的连接符号
.breadcrumb-item + .breadcrumb-item::before{
  content:">";
}

4.分页
ul.pagination
  >li.page-item
    >a.page-link
    
5.进度条
div.progress
  >div.progress-bar  .w-75  .bg-danger
progress-bar-striped 带条纹的进度条
progress-bar-animated

八.SCSS（BOOT的重点  手写媒体查询+栅格布局+scss）
1.css的不足
语法不够强大,
没有合理的样式复用机制
导致难以维护,难以管理
我们需要使用动态的语言,赋予css新的特性
提高样式语言的可维护性,可管理性
常见的动态样式语言
1.scss/sass (scss兼容sass ,scss更接近css语法)
2.stylus
3.less

2.scss是什么
SCSS 是一款强化css的辅助工具
它和css语法十分相似,
在css的基础上,添加了变量,嵌套,混合,导入,函数等高级功能
这些拓展命令,让scss写css更加的强大与优雅

3.scss的使用
scss在服务器端使用
32的scss要求nodejs解释器8.11
64的scss要求nodejs 10.1
1.在线安装 npm install -g node-sass
2.离线安装 把文件中解压好的文件复制进nodejs安装包中
在cmd中执行 node-sass –v 提示版本号就是成功

4.把scss文件转换成css
1.单文件转换
node-sass scss文件路径和名称 css文件路径和名称
2.多文件转换
node-sass scss文件夹 –o  css文件夹
3.单文件监听
node-sass –w 文件路径和名称 css文件路径和名称
4.多文件监听
node-sass –w scss文件夹 –o  css文件夹
九.scss的语法
1.变量
声明变量,以$开头
可以使用字母,数字 - _  ,不要以数字开头,不要用关键字
尽量见名知意
变量值:颜色,数值,字符串,关键字,引用其他变量

变量的作用域,在离得最近的{}内使用
定义在{}外的变量,大家都能用
!default规则:如果此变量在之前声明了,那么就是用之前声明的值
               之前没声明,使用现在的值
               
2.嵌套
#content{
  border:1px solid #f00;
  p{
     background:#00f;
    a{text-decratioin:none;}
    b{text-style:normal;}
  }
  div{
    background:#00f;
    ul{list-style:none;
      li{border:0;
        a{text-decoration:none;}
        img{outline:0;}
      }
    }
  }
}
注意:1.有可能选择器会发生冲突,因为只能生产后代选择器
    2.出现伪类选择器,会有问题,需要加&符号占位

群组嵌套
div,p,h3{
  a{color:red;
    &:hover{color:blue;}
  }
}

属性嵌套
div{
  border:{width:100px;style:solid;color:#f00;}
}

3.导入
以_开头的scss文件,叫做局部scss文件
局部scss不会被转换成css文件
把许多局部scss导入到一个正常scss中
直接转换这个正常的scss文件为css
那么所有导入的局部scss代码都会在这个css中出现

@import "局部scss名称"  不带下滑线,不带后缀
eg: @import "abc"
局部文件被导入后,局部文件中的代码会在全局文件中生成
局部文件的变量可以在全局文件中使用

4.混合器
把一段经常被使用的样式封装成混合器
哪里需要使用,就调用混合器,实现代码的重用
定义混合器
@mixin 混合器名称(参数1,参数2){样式}
调用混合器 @include 混合器名称(实参1,实参2);

5.继承
一个选择器可以继承另外一个选择器所有的样式
@extend 选择器名称;
继承效果,两个选择器,形成群组选择器

6.运算 +  -   /  
相对单位不能转换,绝对单位可以自动转换
①加法
字符串拼接的时候
如果使用带双引号的字符串+不带双引号的字符串,结果带双引号
如果使用不带双引号的字符串+带双引号的字符串,结果不带双引号
②减法
由于变量声明的时候,可以使用-
系统分不清楚,- 是变量名称还是减法
我们写的时候在-前后添加空格.告诉系统,我是减号
width:$my-width - $my-width1;
③除法
scss中 /,除了解析成除法外,还被看成分割符
视为除法的几种情况
1.如果运算式两边的数字,是变量或者方法的返回值
2.运算式被()包裹
3.除法运算式,是其它运算式的一部分
④scss字符串中的插值操作
content:"liangCheng ate #{50+100} baozis";
⑤颜色的计算
分段计算    r+r  g+g  b+b 如果超过255,或者ff.就取ff或者255
rgb(11,22,33)+#162c42
rgba的计算,需要a的值,相同,才可以计算

7.函数
①scss中定义了很多函数,有些函数直接在css中使用
rgba
hsl(hue,saturation,lightness)
hue:色调  0~360
saturation:饱和度  0.0%~100%
lightness:亮度 0.0%~100%
background:hsl(120,100%,50%); 
②数学函数
round($val) 四舍五入
ceil($val); 向上取整
floor($val); 向下取整
min($v1,$v2.......)
max($v1,$v2.......)
random() 随机数
③字符串函数
unquote($str) $str去掉引号
quote($str) $str加上引号
to_upper_case($str) $str转成大写
to_lower_case($str) $str转成小写
④自定义函数
@function 方法名称($v1,$v2....){
  逻辑
  @return 返回值;
}

8.指令
@if(){
}@else if(){
}@else{}