在 App.vue 中导入 scss

  1. <style lang="scss">
  2.     /* 每个页面公共样式 */
  3.     @import '/style/base.scss';
  4. </style>

一、变量

  1. /* scss */
  2. $color-base: red;
  3. .box{
  4.     background-color: $color-base;
  5. }
  7. /* ==> css */
  8. .box{
  9.     background-color: red;
  10. }

二、四则运算

三、多值变量

  1. /* scss */
  2. $linkColor: #08c #333;
  3. a{
  4.   color: nth($linkColor, 1);
  5.   &:hover{
  6.     color: nth($linkColor, 2);
  7.   }
  8. }
  10. /* ==> css */
  11. a {
  12.   color: #08c;
  13. }
  14. a:hover {
  15.   color: #333;
  16. }

四、each 循环

字体、背景图

  1. /* scss */
  2. $title: (h1: 32rpx, h2: 28rpx, h3: 24rpx, h4: 18rpx)
  3. @each $key, $size in $title {
  4.     #{$key} { font-size: $size; }
  5. }
  7. /* ==> css */
  8. h1 { font-size: 32rpx; }
  9. h2 { font-size: 28rpx; }
  10. h3 { font-szie: 24rpx; }
  11. h4 { font-szie: 18rpx; }

五、mixin 混合

自定义代码块、边距

  1. /* scss 自定义代码块 */
  2. @mixin center {
  3.   position: absolute;
  4.   left: 50%;
  5.   top: 50%;
  6.   transform: translate(-50%,-50%);
  7. }
  1. /* scss 等参数 */
  2. @mixin margin($top, $right, $bottom, $left) {
  3.     margin: $top $right $bottom $left;
  4. }
  5. .box {
  6.     @include margin(10px, 10px, 20px, 20px);
  7. }
  9. /* ==> css */
  10. .box { margin: 10px 10px 20px 20px; }
  1. /* scss 默认参数 */
  2. @mixin opacity($val: 1) {
  3.     opacity: $val;
  4. }
  5. .box { @include opacity(); }
  6. .box1 { @include opacity(0.5); }
  8. /* ==> css */
  9. .box { opacity: 1; }
  10. .box1 { opacity: 0.5; }

六、extend 继承

  1. /* scss */
  2. .active {
  3.   background-color: #f66;
  4.   color: #fff;
  5. }
  6. .success {
  7.   @extend .active;
  8.   font-size: 30px;
  9. }
  11. /* ==> css */
  12. .active, .success {
  13.   background-color: #f66;
  14.   color: #fff; 
  15. }
  16. .success { font-size: 30px; }

七、if 条件

  1. /* scss */
  2. $type: nopass;
  3. .name {
  4.   @if $type == pass {
  5.     color: green;
  6.   } @else if $type == nopass {
  7.     color: red;
  8.   } @else {
  9.     color: black;
  10.   }
  11. }
  13. /* ==> css */
  14. .name {
  15.   color: red; 
  16. }

八、for 循环

  1. /* scss */
  2. @for $i from 1 through 3 {
  3.   .item-#{$i} { width: 20% * $i; }
  4. }
  6. /* ==> css */
  7. .item-1 { width: 20%; }
  8. .item-2 { width: 40%; }
  9. .item-3 { width: 60%; }

补充

父选择器标识符 &

在scss中，需要在子级使用父级选择器

  1. /* scss */
  2. .box {
  3.     width: 100rpx;
  4.     height: 100rpx;
  5.     &:before {
  6.         content: '',
  7.     }
  8. }
  10. /* ==> css */
  11. .box {
  12.     width: 100rpx;
  13.     height: 100rpx;
  14. }
  15. .box:before {
  16.     content: ''
  17. }

子级选择器中的 >、~、+

>：子代选择器（某元素中所有子代元素）

  1. div>em {}
  2. /* 选中 div 中所有子代 em 元素 */
  4. <div>
  5.     <em></em> // 选中
  7.     <span>
  8.         <em></em> // 未选中
  9.     <span>
  11.     <div>
  12.         <em></em> // 选中
  13.     </div>
  14. <div>

：后代选择器（某元素中所有后代元素）

  1. div em {}
  2. /* 选中 div 中所有后代 em 元素 */
  3. <div>
  4.     <em></em> // 选中
  6.     <span>
  7.         <em></em> // 选中
  8.     <span>
  10.     <div>
  11.         <em></em> // 选中
  12.     </div>
  13. <div>

+：相邻兄弟选择器 （某元素后相邻的第一个兄弟元素）

  1. li+li {}
  2. /* li后的紧挨着第一个li  */
  3. <ul>
  4.     <li></li> // 未选中
  6.     <li> // 选中
  7.         <li></li> // 选中
  8.     <li>
  10.     <li></li> // 选中
  12.     <span></span>
  14.     <li></li> // 未选中
  15. </ul>

~：兄弟选择器（某元素后所有同级的指定元素）

  1. li~li {}
  2. /* li 后的所有同级li（处于同一个父元素下） */
  4. <ul>
  5.     <li></li> // 未选中
  6.   <li></li> // 选中
  7.   <span></span>
  8.   <li></li> // 选中
  9. </ul>