Using SASS: Semantic variables

Article Introduction: stop using a lot of sass variables.

Using sass, write code like this:

color: $body-text-color;
			padding: $sidebar-padding;
		
 
But I do not like this, I now like to use SASS in the following way to write:
 
color: $hot-pink;
			padding: 20px;
		
 
The first is an example of a drawing, away from practical value, and we should use a more generic, semantically named variable.
 
This method and a lot of people like it, especially when it comes to color applications. Sacha Greif's article is a simple sass instance.
 
$blue: #00f;
			$red: #f00;
			$text-color: $blue; $link-color: $red;  .foo{   color: $text-color; } a{   color: $link-color; }   
 
I've done a lot of things like this, and I've found that it's not easy to maintain for long periods of time, and actually slows down the pace of development.
 
Depending on what you mean by "semantic" 
 to define a semantic alias for a variable, you have to convey something meaningful. As a developer, this is semantically: 
 
.sidebar{color: $sidebar-text-color; The  
 
  $sidebar-text-color  does not add any value, or it cannot infer what he means from the selector or property value. He is only a constant use of information. 
 
 To get any meaningful information, I need to link to a value of two other places, such as: 
 
//_color_palette.scss $hot-pink: #
			bc436c;  _config_variables.scss $sidebar-text-color: $hot-pink; _sidebar.scss color: $sidebar-text-color;  
 
 This may not sound much, but it is used throughout the project and you are in more development. 
 
 Another aspect that modifies the example: 
 
.sidebar{color: $hot-pink; The  
 
 has more useful information immediately. The  $hot-pink  image does not make much sense for color code blocks, but it adds more meaning to development. 
 
 In addition, if you want to see the actual effect of this value, you define a value in only one place: 
 
//_color_palette.scss $hot-pink:
			#bc436c; _sidebar.scss color: $hot-pink; 
 

but isn't that a maintenance nightmare? 
 There is a view in the comments that: 
 
  
   

    
      
   
    
 If I want to change my text from "pink" to "green," I can't turn  $hot-pink  from "pink" to "green". It doesn't make any sense! 
   
  
   
 
 Agree. So just add a pumping layer and don't do anything to solve the problem, just add the new color variable and the value you need to replace in the update: 
 
//_color_
			Palette.scss $hot-pink: #bc436c;
			$forest-green: #0c5c19; _sidebar.scss color: $forest-green;  
 
 OK? Good. 
 
  
   

    
      
   
    
 But what if I need to update colors in more than one place? 
   
  
   
 
 Updating in more than one place is really not a difficult task. 
 
 When I want to change a value in the global style, no matter where it is used, I can't think of a single method. 
 
 I spent most of my time on a single module. The module is independent, so I can't think of an example that I would like to say "modify this value regardless of whether it appears in any module." 
 

Theme
Is it powerful if you generate multiple themes from a single stylesheet or a module that references different style variables? In this case, $sidebar-text-color it's a real variable, not just a constant with a different name, so we do this:
// _normal.scss
			$sidebar-text-color: $hot-pink;  // _christmas.scss
			$sidebar-text-color: $red;  // _halloween.scss
			$sidebar-text-color: $orange;  
But how often do you really need to do that? It's a rarity for me.

Summarize 
A year ago, Nicolas Gallagher told us that the class name derived from the content is not always the most useful name for developers, but .bold .red we still have so many class names when we are told the reason for being removed from web development.
 
Reusable colors are converted to our readable variables, such as $hot-pink excellent and recommendable.
 
However use one content- or module- define another person variable.
 
 
   

  
    
 
     
Not easy to long-term maintenance . If I need to change a color in a module, it's easy to define a readable value in the module.
 
     
Reduce development . Every time I want to add one color or background find or create a global variable is more painful.
 
    
 
   
 
If you accept this color idea, you can eventually write this:
 
.sidebar{   background: $sidebar-background-color;
					color: $sidebar-text-color;
					padding: $sidebar-padding-value;
					text-align: $sidebar-alignment;
					}
		
 
It doesn't seem to be fun, I'd rather have people like this to maintain the following:
 
.sidebar{   background: $grey;
					color: $hot-pink;
					padding:
									rhythm(1);
					text-align: center;
					}
		
 
Translator's Sign Language: the entire translation is carried out according to the original line, and in the process of translation slightly individual understanding of the technology. If the translation has the wrong place, but also please peer friends pointing. Thank you!
 
Original English: http://bensmithett.com/stop-using-so-many-sass-variables/
 
Chinese translation: http://www.w3cplus.com/preprocessor/stop-using-so-many-sass-variables.html