📌  相关文章
📜  如何使用 SASS 在 Bootstrap 4 中创建一组新的颜色样式？

📅  最后修改于: 2021-08-29 12:10:31             🧑  作者: Mango

默认情况下，Bootstrap 4 在 scss/_variables.scss文件中提供了所有可用作 SASS 变量和 SASS 映射的颜色样式。在进一步发布中，将提供超新色调，例如灰度调色板。在 SASS 映射中定义了许多颜色系列，循环生成自定义规则集。 Bootstrap 4 的颜色包括主题颜色和组件颜色，对于这张 SASS 地图起着至关重要的作用。

使用 SASS 初始化颜色变量：

  • SASS 地图示例：_colors.scss 文件 
    "white": $white,
$hotpink:hotpink;
$lightsalmon:#fa9872;
$lightgreen:#76FF03;
$palegreen:#00E676;
$gray-900:#212121;
$colors: (
"white": $white,
    "hotpink": $hotpink,
    "palegreen":$palegreen,
    "lightgreen":$lightgreen,
    "lightsalmon":$lightsalmon,
    "gray-dark": $gray-900) !default;

方法一：这里我们在创建 SASS $color map 之后处理按钮颜色来创建 SASS $color map ，使用@import导入它并在同一个文件中创建 @mixin 。一般来说，按钮颜色的SASS类主要基于“btn-variant”和btn-ouline-variant。这里的变体是颜色实用程序，例如主要、次要等。为那些 btn-variant 和 btn-outline-variant 生成 @mixin。然后使用@include 将上面生成的@mixin 包含在相应的SASS 文件类中，如下所示。

  • SASS 文件：gfg.scss 
    /* Importing colors map */
@import'./colors';
   
/* Generating @mixin based on 'btn-variant' */
@mixin btn-variant ($color1, $color2,
            $color-hover: color-yiq($color1)) {
    background-color: $color1;
    border-color: $color1;
    color:$color2;
}
  
/* Generating @mixin based on 'btn-outline-variant' */
@mixin btn-outline-variant($color1, $color2) {
    background-color: $color2;
    border-color: $color1;
    color:$color1;
}
  
/* Including @mixin based on 'btn-variant' and
    hover properties within a custom class*/
.btn-hotpink {
    @include btn-variant($hotpink, white, $hotpink);
    &:hover {
        background-color: $hotpink !important;
        color: $white !important;
    }
}
  
.btn-lightgreen {
    @include btn-variant($lightgreen, white, $lightgreen);
   
    &:hover {
        background-color: $lightgreen !important;
        color: $white !important;
    }
}
  
.btn-lightsalmon {
    @include btn-variant($lightsalmon, white, $lightsalmon);
   
    &:hover {
        background-color: $lightsalmon !important;
        color: $white !important;
    }
}
   
/* Including @mixin based on 'btn-outline-variant'
  and hover properties within a custom class */
.btn-outline-hotpink {
    @include btn-outline-variant($hotpink, white);
    &:hover {
        background-color: $hotpink !important;
        color: $white !important;
    }
}
  
.btn-outline-lightgreen {
    @include btn-outline-variant($lightgreen, white);
   
    &:hover {
        background-color: $lightgreen !important;
        color: $white !important;
    }
}
  
.btn-outline-lightsalmon {
    @include btn-outline-variant($lightsalmon, white);
   
    &:hover {
        background-color: $lightsalmon !important;
        color: $white !important;
    }
}
  • 编译后的 CSS 文件：gfg.css 
    .btn-hotpink {
    background-color: hotpink;
    border-color: hotpink;
    color: white;
}
   
.btn-hotpink:hover {
    background-color: hotpink !important;
    color: #FFFFFF !important;
}
   
.btn-outline-hotpink {
    background-color: white;
    border-color: hotpink;
    color: hotpink;
}
   
.btn-outline-hotpink:hover {
    background-color: hotpink !important;
    color: #FFFFFF !important;
}
   
.btn-lightgreen {
    background-color: #76FF03;
    border-color: #76FF03;
    color: white;
}
   
.btn-lightgreen:hover {
    background-color: #76FF03 !important;
    color: #FFFFFF !important;
}
   
.btn-outline-lightgreen {
    background-color: white;
    border-color: #76FF03;
    color: #76FF03;
}
   
.btn-outline-lightgreen:hover {
    background-color: #76FF03 !important;
    color: #FFFFFF !important;
}
   
.btn-lightsalmon {
    background-color: #fa9872;
    border-color: #fa9872;
    color: white;
}
   
.btn-lightsalmon:hover {
    background-color: #fa9872 !important;
    color: #FFFFFF !important;
}
   
.btn-outline-lightsalmon {
    background-color: white;
    border-color: #fa9872;
    color: #fa9872;
}
   
.btn-outline-lightsalmon:hover {
    background-color: #fa9872 !important;
    color: #FFFFFF !important;
}
/* sourceMappingURL=bs4buttonsex01.css.map */
  • HTML 文件：index.html 
    

   

    
    
      
    
      
    
      
    
      
    
      
    

   

    
    
        
    
            
    
                GeeksforGeeeks
            
    
              
            

    
              
            
    
                Bootstrap4 compiled CSS 'btn-lightgreen,
                btn-lightsalmon & btn-hotpink' and
                'btn-outline-lightgreen, 
                btn-outline-lightsalmon & 
                btn-outline-hotpink' using SASS
            
    
              
            
    
                
                  
                
                  
                
            
    
              
            

    
              
            
    
                
                  
                
                  
                
            
    
        
    
    
    

   
  • 输出：

方法二：处理背景和文字颜色，在创建 SASS $color map 后，用@import导入，并在同一个文件中创建@mixin。一般来说，按钮颜色的SASS类主要基于“bg-variant”和text-variant。这里的变体是颜色实用程序，例如主要、次要等。为那些 bg-variant 和 text-variant生成 @mixin。然后使用@include将上面生成的@mixin 包含在相应的 SASS 文件类中，如下所示：

  • SASS 文件：geeks.scss 
    @import'./colors';
  
@mixin bg-variant ($color1, $color2) {
    background-color: $color1;
    color: $color2;
}
  
@mixin text-variant($color1) {
    color: $color1;
}
  
.bg-palegreen {
    @include bg-variant($palegreen, white);
}
  
.text-palegreen {
    @include text-variant($palegreen);
}
.bg-gray900{
    @include bg-variant($gray-900, white);
}
.text-gray900 {
    @include text-variant($gray-900);
}
  • 编译后的 CSS 文件：geeks.css 
    .bg-palegreen {
    background-color: #00E676;
    color: white;
}
   
.text-palegreen {
    color: #00E676;
}
   
.bg-gray900 {
    background-color: #212121;
    color: white;
}
   
.text-gray900 {
    color: #212121;
}
/*# sourceMappingURL=bs4buttonsex02.css.map */
/*# sourceMappingURL=bs4buttonsex02.css.map */
  • HTML 文件：index2.html 
    

   

    
    
      
    
      
    
      
    
      
    
      
    

   

    
    
        
    
            
    
                GeeksforGeeeks
            
    
              
            

    
              
            
    
                Bootstrap4 compiled CSS 'bg-palegreen & 
                bg-gray900' and 'text-palegreen & 
                text-gray900'using SASS
            
    
              
            
    
                d-inline
            
    
            
    
                d-inline
            
    
            
    
                d-inline
            
    
            
    
                d-inline
            
    
            
    
                d-inline
            
    
            
    
                d-inline
            
    
        
    
    
    

   
  • 输出：

参考： https://getbootstrap.com/docs/4.4/getting-started/theming/#color