css编写完为什么不能调用_为什么您应该停止在“ CSS”中编写CSS

css编写完为什么不能调用

CSS is fun to write, but it can quickly get complicated. A typical example is having to scroll upwards to check the hexadecimal values of the colors you are using.

CSS很有趣，但是很快就会变得复杂。 一个典型的例子是必须向上滚动以检查所用颜色的十六进制值。

Typing a class or id selector several times within a single CSS file, or having to copy and paste every browser’s support prefix to your code each time for cross-browser compatibility can make your CSS file harder to maintain.

在单个CSS文件中多次键入类或id选择器，或者每次都必须将每个浏览器的支持前缀复制并粘贴到您的代码中以实现跨浏览器兼容性，这会使您CSS文件难以维护。

// cross-browser compatibility

-webkit-transform: $property
-ms-transform: $property
transform: $property

display: -ms-flexbox;
display: flex;

-ms-flex-wrap: wrap;
flex-wrap: wrap;

The next time you want to write CSS, try not “writing” in CSS at all.

下次您要编写CSS时，请完全不要在CSS中“编写”。

Instead, try using CSS Preprocessors.

相反，请尝试使用CSS预处理程序。

什么是预处理器？ (What are Preprocessors?)

According to MDN, a CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax. You write your CSS code in them and then generate a corresponding CSS file to style your HTML.

根据MDN的说法， CSS预处理器是一个程序，可让您根据预处理器自己的独特语法生成CSS。 您在其中编写CSS代码，然后生成相应CSS文件以设置HTML样式。

Some of the popular preprocessors to use include SASS/SCSS, LESS, Stylus, and PostCSS. I use SASS, so my illustrations in this article are in SASS.

一些流行的预处理器包括SASS / SCSS ， LESS ， Stylus和PostCSS 。 我使用SASS，因此本文中的插图均在SASS中。

Though preprocessors have their own syntax, they are quite easy to catch up with, just a few differences from writing vanilla CSS.

尽管预处理器具有自己的语法，但是它们很容易跟上，与编写原始CSS仅有一些区别。

您应该停止在“ CSS”中编写CSS的6个理由 (6 Reasons Why You Should STOP Writing CSS in “CSS”)

Preprocessors’ syntax gives room for some additional functionalities that deliver the following:

预处理程序的语法为提供以下功能的一些其他功能留有余地：

1.变量 (1. Variables)

Preprocessors use variables to store reusable values. You can store any type of styling in a variable. It could be color, font-family, or even values for your padding, margin, width, or height.

预处理器使用变量来存储可重用的值。 您可以将任何类型的样式存储在变量中。 它可以是color ， font-family ，甚至可以是您的padding ， margin ， width或height 。

When you define the variable, there is no need to remember the value. Recall the variable whenever you need the stored value.

定义变量时，无需记住该值。 需要存储值时，请重新调用变量。

// variables

$my_font: Helvetica, sans-serif
$my-color: #333

body  
    font: 100% $my-font
    color: $my-color

2.嵌套 (2. Nesting)

We write HTML by nesting child/children in parent elements like the ul, li, and a element in a nav. When using preprocessors, you don’t have to write out the parent CSS selector (nav tag in this case) each time.

我们通过嵌套子/儿童像父元素写HTML ul ， li ，和a在元素中nav 。 使用预处理器时，您不必每次都写出父CSS选择器(在这种情况下为nav标签)。

Move to the next line and type the child element as shown below:

移至下一行并键入子元素，如下所示：

// navigation bar

nav
  	ul
        margin: 0    
        padding: 0    
        list-style: none  

	li    
		display: inline-block
 
 	a    
		display: block
		padding: 6px 12px
		text-decoration: none

The ul, li, and a selectors are nested inside the nav selector.

ul ， li和a选择器嵌套在nav选择器中。

Some developers believe this is coming to CSS. But hey, it’s not here yet, it doesn’t hurt to get used to it before its arrival in CSS. :)

一些开发人员认为这正在CSS中出现。 但是，嘿，它还没到这里，在它到达CSS之前习惯它并没有什么害处。 :)

3.进口 (3. Import)

Preprocessors make CSS’s existing import better.

预处理程序使CSS的现有import效果更好。

import lets you split your CSS into smaller files for readability and maintainability. It takes the file you are importing and adds it to the file you are importing into.

import使您可以将CSS拆分为较小的文件，以提高可读性和可维护性。 它接受您要导入的文件，并将其添加到您要导入的文件中。

// _reset.sass

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote    
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;

You can import the reset.sass file as shown below:

您可以如下所示导入reset.sass文件：

// main.sass

@import reset
    
body
    font: 100% Helvetica, sans-serif
    background-color: #efefef

This means you can have the main.sass file, then others like reset.sass, header.sass, footer.sass, or variables.sass. You import other files into the main.sass using the preprocessor’s import syntax.

这意味着您可以拥有main.sass文件，然后拥有其他文件，例如reset.sass ， header.sass ， footer.sass或variables.sass 。 您main.sass使用预处理器的import语法import其他文件导入到main.sass 。

The imported file is then added to the end of the main.sass file (the file you imported into).

然后将导入的文件添加到main.sass文件(导入到该文件)的末尾。

4.延伸 (4. Extend)

extend stores a styling or series of styling into a class. It works like a variable. It uses a placeholder class (%) to tell the compiler not to print the class unless extended.

extend将样式或一系列样式存储到一个类中。 它像变量一样工作。 它使用占位符类(%)告诉编译器除非扩展，否则不要打印该类。

When the class is extended into an element, then the element inherits all the styling properties saved in the placeholder class. You can still add unique styling if needed.

当将类扩展为元素时，该元素将继承保存在占位符类中的所有样式属性。 如果需要，您仍然可以添加独特的样式。

// This CSS will print because %message-shared is extended.
// "%" illustrates the placeholder class

%message-shared
    border: 1px solid #ccc
    padding: 10px
    color: #333

// This CSS won't print because %equal-heights is never extended.

%equal-heights  
    display: flex
    flex-wrap: wrap

// This extends without adding any other styling

.message
	@extend %message-shared
        
// These extend with additional styling (green, red, yellow)

.success
	@extend %message-shared
	border-color: green

.error  
	@extend %message-shared  
	border-color: red

.warning  
	@extend %message-shared
	border-color: yellow

This saves time and keeps your CSS clean.

这样可以节省时间并保持CSS干净。

5.算术运算 (5. Arithmetic Operations)

Preprocessors allow you to run arithmetic operations in your CSS. It supports standard mathematical operators like +, -, *, /, and %.

预处理程序允许您在CSS中运行算术运算。 它支持+ ， - ， * ， /和%等标准数学运算符。

// Arithmetic operations
.container  
    width: 100%

article[role="main"]  
    float: left
	width: 600px / 960px * 100%

6.缩小 (6. Minification)

Minification reduces your file size to speed up load time. It removes white spaces and unnecessary characters from your code (CSS in this case).

缩小可减小文件大小，以加快加载时间。 它从代码(在这种情况下为CSS)中删除空格和不必要的字符。

Preprocessors allow you to generate a compressed version of your CSS. I know there are several other ways to generate this, but hey, this is cool as well. :)

预处理器使您可以生成CSS的压缩版本。 我知道还有其他几种方法可以生成此代码，但是，这也很酷。 :)

结论 (Conclusion)

Having to use the terminal when compiling is the main downside of using preprocessors. However, there are other ways to compile, such as using CodeKit, Compass.app, and GhostLab. There are now some in-editor plugins (like Live Sass Compiler on Visual Studio Code) to help with this as well.

编译时必须使用终端是使用预处理器的主要缺点。 但是，还有其他编译方式，例如使用CodeKit ， Compass.app和GhostLab 。 现在有一些编辑器内插件(例如Visual Studio Code上的Live Sass Compiler)也可以提供帮助。

Try out any preprocessor of your choice. I bet you won’t ever write CSS in “CSS” anymore. If you have been using preprocessors, share your experience in comments.

试用您选择的任何预处理器。 我敢打赌，您永远不会再用“ CSS”编写CSS。 如果您一直在使用预处理器，请在评论中分享您的经验。

Peace out and happy coding!

和平与快乐编码！

翻译自: https://www.freecodecamp.org/news/why-you-should-stop-writing-css-in-css-6fb724f6e3fc/

css编写完为什么不能调用