Sass summary

1. Basic grammar

$highlight-color: #F90;

$nav-color: #F90;
nav{
    $width: 100px;
    width: $width;
    color: $nav-color
}
/ / the compiled
nav {
  width: 100px;
  color: #F90;
}
Copy the code

Mixer @ mixin

/ / define
@mixin rounded-corners() {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
/ / use
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
// sass produces:
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

@mixin vue-flex($direction: row) {
    /* #ifndef APP-NVUE */
    display: flex;
    flex-direction: $direction;
    /* #endif */
}
Copy the code

2. Solutions to some possible problems in SASS

1. /deep/ error resolution

Sometimes, we need to manually change the style inside the UI framework. In this case, use >>> or /deep/. /deep/ sometimes returns an error, >>> does not work. It may depend on the version of the Loader. At this point, if you don’t want to bother with configuration, try :: V-deep.

Dynamic styles

Using Sass, you can pre-generate classes. You can then use the pre-generated class style directly when you use it

/ / a for loop
@for $i from 0 through 750 {
        .width-#{$i} {
                width: $i + rpx !important;
        }
}

// if logic only requires even numbers and numbers divisible by 5
@if $i % 2= =0 or $i % 5= =0 {
    // Generate: u-margin-30 or U-m-30
    .u-margin-#{$i}, .u-m-#{$i} {
            margin: $i + rpx!important;
    }
}

// Abbreviated version vs. full version. I'm going to do it separately via @each
@each $short, $long in l left, t top, r right, b bottom {
    // The result is u-M-L-30
    // Define the margin
    .u-m-#{$short}-#{$i} {
            margin-#{$long}: $i + rpx!important;
    }
}
Copy the code

Complete style

@each $short, $long in l left, t top, r right, b bottom {
    // The result is c-m-L-30
    // Define the margin
    .c-m-#{$short}-#{$index} { margin-#{$long}: $index + px ! important; }// Define the inner margin
    .c-p-#{$short}-#{$index} { padding-#{$long}: $index + px ! important; }Margin-left-30; margin-left-30; margin-left-30
    // Define the margin
    .c-margin-#{$long}-#{$index} { margin-#{$long}: $index + px ! important; }// Define the inner margin
    .c-padding-#{$long}-#{$index} {
        padding-#{$long}: $index + px !important;
    }
}
Copy the code

4. Variables defined in SCSS are used in JS

1. Start by defining an SCSS filevariables.scss. through:exportYou can export the set variable.

$menuText:#bfcbd9;
$sideBarWidth: 210px;

:export {
  menuText: $menuText;
  sideBarWidth: $sideBarWidth;
}
Copy the code

2. Used in vue files

Import variables through import. Then return the variable in a computed property and use it in the template template. In SCSS, just use the $+ variable name directly. The prerequisite of course is to import this file in SCSS or register it globally in vue.config.js

<template>
  <div>
    {{variables}}
    <div class="test">
      {{variables.menuText}}
      {{variables.sideBarWidth}}
    </div>
  </div>
</template>

<script>
import variables from '@/styles/variables.scss'
export default {
  computed: {
    variables() {
      return variables
    },
  },
};
</script>
<style scoped lang='scss'>
// The @ symbol must be used before the import of other SCSS files in SCSS. If you don't introduce variable.scSS. The variable defined by it is not available.
@import '@/styles/variables.scss';
.test {
  color: $menuText;
}
</style>
Copy the code

In 5.vue.config.jsGlobal import SCSS file in

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        // Import SCSS global variable file, @ is the alias we set, execute SRC directory
        prependData: `@import "~@/styles/variables.scss"; `}}}},Copy the code

6. Dynamically change the value of the SCSS variable

For example, setting a themeColor themeColor globally needs to change dynamically. This is where the setProperty and getPropertyValue methods come in

• Set CSS variables: the document body. Style. SetProperty (” tc “, “blue”)

• GetComputedStyle (document.body).getPropertyValue(‘–tc’)

• Color: var(–tc)

• Delete the variable document. Body. Style. RemoveProperty (‘ – tc);

theme.scss

:root{
    --tc: red;
}
$tc: var(--tc);
Copy the code

Used in vue files

// change the value of '--tc' in the js function
document.body.style.setProperty("--tc"."blue");

// get the value of '--tc' in js
getComputedStyle(document.body).getPropertyValue('--tc');

// use in style
.test{
    color: var(--tc);
    background: $tc;
}
Copy the code

7. Some special writing

$sideBarWidth: 210px;
$animation-length: 200;
$animation-length-ms: $animation-length + 0ms;
width: calc(100% - #{$sideBarWidth});
width: calc(100% - 54px);
.c-h\%-#{$index} {
    height: $index * 1%;
}
Copy the code

8. How to import SCSS files

1. Introduced in spa files like.vue, need to add~

@import "~@/styles/mixin.scss";

2. Directly into the JS file

import '@/styles/index.scss'