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

📅  最后修改于: 2021-05-25 10:51:34             🧑  作者: 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;

方法1：在这里，我们处理按钮颜色，以在创建SASS $ color贴图后创建SASS $ color贴图，使用@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
            
    
              
            
    
                
                  
                
                  
                
            
    
              
            

    
              
            
    
                
                  
                
                  
                
            
    
        
    
    
    

   
  • 输出：

方法2：处理背景和文本颜色，在创建SASS $ color映射后，使用@import导入它，并在同一文件中创建@mixin。通常，按钮颜色的SASS类主要基于“ bg-variant”和text-variant。这里的变体是颜色实用程序，例如主，辅助等。为这些bg变体和文本变体生成@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