CSS 中，

子元素用了 float 布局，父元素要加 clearfix（清除浮动）

参考文章：清除浮动的几种方法

  1. // clearfix 一键三连
  2. .clearfix:after{
  3.     content:'';
  4.   display:none;
  5.   clear:both;
  6. }

阴影：黑色半透明

  1. // x 方向 | y 方向 | 阴影宽度 | 颜色
  2. box-show: 0 0 5px rgba(0,0,0,50%)
  1. // 另一种写法，加内阴影，只要上下，左右不要
  2. // 内阴影 | x 方向 | y 方向 | 阴影宽度 | 向内方向 | 颜色
  3. box-shadow: inset 0 -5px 5px -5px fade_out(black,0.5)，inset 0 -5px 5px -5px fade_out(black,0.5)；

**
模块化意味着代码少，代码少意味着简单，简单意味着 bug 少

Vue 中 scoped
**
父组件中 的 CSS 有作用域后，无法直接透传给子组件中内部的 div 写 CSS，如果有这个需求，这样子做

  • 父组件中新增一个不加 scoped 的 CSS
  • 父组件把 class 名字传递给子组件，子组件把 class 名字添加到想修改的 div 上

搞定~

  • 有一个不错的方案，不直接传整个 class 名字
  • 传 class-prefix，子组件根据想修改的 div 自主改名字

SCSS 中，

参考：SASS用法指南

可以使用变量语法，可以使用函数，选择器间可以嵌套使用

  1. // SCSS darken 函数
  2. body{
  3.     $bg: #eeeeee
  4.     .list{
  5.       background: $bg
  6.     &.selected: darken($bg,50%)
  7.   }
  8. }

颜色渐变

  1. // SCSS 可以使用 darken 函数
  2. $bg: #f2f2f2;
  3. &:nth-child(1) {
  4.     background: $bg;
  5. }
  6. &:nth-child(2), &:nth-child(5) {
  7.     background: darken($bg, 4%);
  8. }

占位符用法

  1. // placeholder 占位符用法
  2. %clear-fix{
  3.     &::after{
  4.         content:'';
  5.       display:none;
  6.       clear:both;
  7.   }
  8. }
  10. // 引用方法
  11. @extent %clear-fix

「@浪里淘沙的小法师」