zoukankan      html  css  js  c++  java
  • [SCSS] SCSS and CSS Variables

    We'll define the color palette and create the basic screen styles for our project in addition to Sass helpers for our form design system.

    We will set up Sass variables for the initial them and learn how to use the !default flag to allow our system to be easily overridden from project to project, making our form styles ultra transferable and reusable. You'll also learn how to leverage Sass color functions for ease of theming. We'll map the Sass variables to CSS variables so that as we build up our system we can use CSS variables for the most flexibility in our theming.

    _theme.scss:

    $color-primary: #041db1 !default;
    $color-error: #da1b22 !default;
    $color-background: mix(#fff, $color-primary, 95%) !default;
    $color-text: scale-color($color-background, $lightness: -65%) !default;
    
    // create a colors map
    $colors: (
      "primary": $color-primary,
      "error": $color-error,
      "background": $color-background,
      "text": $color-text,
      "white": #fff,
    );
    
    @function color($key) {
      @return map-get($colors, $key);
    }
    
    $border-radius: 0.25em !default;
    
    // enable css custom properties
    // instead of using scss variable
    :root {
      @each $key, $color in $colors {
        --color-#{$key}: #{$color};
      }
    
      --border-radius: #{$border-radius};
    }

    '!default': You can assign to variables if they aren’t already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet, it will be given one.

    _screen.scss:

    body {
      // using color("background") as fallback
      background-color: var(--color-background, color("background"));
      color: var(--color-text, color("text"));
      font-family: "Roboto", sans-serif;
    }
    
    header,
    main {
      width: 60ch;
      max-width: 100%;
      margin: 0 auto;
    }

    style.scss:

    @import "theme";
    @import "screen";

  • 相关阅读:
    Java AbstractQueuedSynchronizer(AQS)
    CentOS Install Rancher & K3s
    CentOS Install Rancher & Kubernetes
    CentOS Install Kubernetes & Kubesphere
    支付宝小程序入门
    uni-app 抽奖
    APP上架
    uniapp微信小程序语音识别实现
    uniapp 安卓打包之导入的项目打包指导
    uniapp 支付宝 支付后不成功回调
  • 原文地址:https://www.cnblogs.com/Answer1215/p/14472177.html
Copyright © 2011-2022 走看看