css css2 css3_简化CSS和CSS

最新推荐文章于 2024-07-19 17:37:28 发布

weixin_26717829

最新推荐文章于 2024-07-19 17:37:28 发布

阅读量102

点赞数

文章标签： java

原文链接：https://medium.com/@stephennoahgalvan/simplifying-css-and-scss-3ca8e5afedde

版权

css css2 css3

解决神秘的笼罩…… (Addressing a shroud of mysteriousness …)

For many of my peers, and myself included, there has been a lot of angst-y talk and minor sighs of distress when it comes to the topic of CSS. In this article my goal is to simplify the journey to learning and using CSS. I’ll include some resources I found useful at the very bottom of this article.

对于包括我自己在内的许多同龄人，在谈到CSS主题时，有很多焦虑和不安的感叹。在本文中，我的目标是简化学习和使用CSS的过程。我将在本文的最后部分提供一些我认为有用的资源。

在我们开始之前... (Before we get started…)

Quick CSS Refresher (Class, Id, and Elements): .class - a period(.) in front of a word, indicates in CSS that we are adding styles to any html elements with the class name following the period(.)#id - a hash(#) indicates that we are adding styles to an html element with a specific idbody - for any html tag, by simply writing out the tag name, we can add styles to all tags with the given name. However if a tag has a conflicting style due to a class or an id(which is more specific) attributed to it, the most specific type will overwrite the other styles.

Moving right on to the main point, let’s start with what SCSS is. SCSS or Sassy CSS or Sass stands for Syntactically Awesome Style Sheets. In short, similar to how React is a javascript compiler, for those who are familiar with react, Sass or SCSS is a compiler for styles or CSS(Cascading Styles Sheet). What this means is, with Sass you can make your CSS code modular and scalable, and to break it down even further, it is a lot like breaking your code into efficient and smaller snippets that you can mix and match to make building projects quicker in the future.

继续讲到重点，让我们从SCSS开始。 SCSS或Sassy CSS或Sass代表语法很棒的样式表 。简而言之，类似于React是一个JavaScript编译器，对于熟悉React的人来说，Sass或SCSS是样式或CSS(级联样式表)的编译器。这意味着，使用Sass，您可以使CSS代码具有模块化和可扩展性，并且可以进一步细分，就像将代码分解为高效且较小的代码段，您可以将其混合并匹配以更快地构建项目。未来。

So how can we do this with Sass and more importantly how do we get started?

那么我们如何使用Sass做到这一点，更重要的是我们如何开始呢？

入门 (Getting Started)

Heres what we will cover: 1. Variables(which shouldn’t take long)2. Mixin, Nesting and Include 3. Partials & Imports (the good bits, but don’t skip ahead, unless you’re confident on the first two points).

以下是我们将介绍的内容：1. 变量 (不应该花很长时间)2。 混合，嵌套和包含 3. 部分和导入 (很好的地方，但是不要跳过，除非您对前两点有信心)。

To get started, in your project directory (which you can get to in your terminal) install node-sass to include Sass files in your project:

首先，在项目目录(可以在终端中找到)中安装node-sass，以将Sass文件包括在项目中：

npm install node-sass

From here on out, I will be using VS code. Feel free to use any text editor that you prefer. Just know that I will also be using some extensions from VS code, that you may need to install. Be sure to regularly test your code as we move forward.

从这里开始，我将使用VS代码。随意使用您喜欢的任何文本编辑器。只是知道，我还将使用VS代码的某些扩展，您可能需要安装它们。随着我们的前进，请务必定期测试您的代码。

Let’s get the requirements out of the way first: Install Live Sass Compiler (you may need to reset your VS code afterwards)

首先让我们消除需求：安装Live Sass编译器 (之后您可能需要重置VS代码)

This let’s you automatically convert your Sass or SCSS into CSS - Next let’s create an ‘scss’ file. I’ll call mine “App.scss” and create it inside of my src folder. I’ll be doing this inside of a react project. Be sure to put your Scss file where appropriate.

让我们自动将Sass或SCSS转换为CSS-接下来让我们创建一个“ scss”文件。我将其命名为“ App.scss”，并在src文件夹中创建它。我将在react项目中进行此操作。确保将您的Scss文件放在适当的位置。

Lastly be sure to import the App.scss file into the appropriate file in my case it is at the top of the App.js file:

最后，对于我来说，请确保将App.scss文件导入到适当的文件中，该文件位于App.js文件的顶部：

变数 (Variables)

Variables are like simple declarations for our styles sheet. Let’s keep our project simple and say we want anything inside of our <h1> tags to be a specific blue that we will call “myBlue,” and anything with the class of delete to be a specific red called “myRed.” In order to define a variable for that blue, and red we use the dollar-sign “$” to denote variables.

变量就像我们样式表的简单声明。让我们简化项目，并说我们希望<h1>标记内的任何东西都是特定的蓝色，我们将其称为“ myBlue”，而将具有delete类的任何东西更改为特定的红色，称为“ myRed”。为了为蓝色和红色定义变量，我们使用美元符号“ $”表示变量。

Now whenever we want to use $myBlue, instead of writing out the code inside of CSS, in our Sass file, we put $myBlue in place of a color value. Our file should look like this:

现在，每当我们要使用$ myBlue而不是在CSS内写代码时，在Sass文件中，我们都将$ myBlue替换为一个颜色值。我们的文件应如下所示：

Benefits: If we use this blue or red multiple times in our project, and decide to later change the color, we can change it inside of this variable and it will convert all objects in our style sheet with that blue, which saves us a lot of time, versus if we were to manually change all the colors ourselves.

好处：如果我们在项目中多次使用此蓝色或红色，并决定稍后更改颜色，则可以在此变量内更改它，它将使用该蓝色转换样式表中的所有对象，这为我们节省了很多时间时间，而不是我们自己手动更改所有颜色。

混合，嵌套和包含 (Mixin, Nesting and Include)

Mixins, in short, are snippets of CSS code that you can reuse again and again in your project. Think of a Mixin as a declaration and Include as a way to invoke it. To declare a mixin, you use the “@” symbol and the word “mixin” followed by a name you want to give the CSS snippet. In our case we will be using the name “sample” to indicate our mixin.

简而言之，Mixins是CSS代码段，您可以在项目中反复使用它。将Mixin视为声明，并将Include作为调用它的方式。要声明mixin，请使用“ @”符号和单词“ mixin”，后跟要提供CSS代码段的名称。在我们的例子中，我们将使用名称“ sample”来表示我们的混合。

Now that we have this mixin, we can invoke it with include whenever we want to in our style sheet. The syntax to use include is the same as the mixin where we use “@” followed by include and the name — in this case “sample” and ending it with a semicolon. I will use this syntax in just a little bit.

现在我们有了这个mixin，我们可以随时在样式表中使用include来调用它。使用include的语法与mixin相同，在混合中我们使用“ @”，后跟include和名称-在本例中为“ sample”，并以分号结尾。我将仅使用此语法。

Please bare with the following image. We have what the code displays on the left, and a snippet of JSX code on the right. In the code on the right we have some nested code (three buttons) that we will be styling inside of the div with the className “sample-element”.

请裸露下图。我们在左侧显示代码，在右侧显示一小段JSX代码。在右边的代码中，我们有一些嵌套代码(三个按钮)，我们将在div内使用className“ sample-element”设置样式。

Nesting is an efficient way that Sass allows us to use code within code, to make styling more efficient. Quickly breezing on through, let’s incorporate include and nesting inside of Scss: Inside of our app.scss file, let’s create styles for the “sample-element” class in the example above.

嵌套是Sass允许我们在代码中使用代码以使样式更有效的一种有效方式。快速学习，让我们在Scss中合并包含和嵌套：在app.scss文件的内部，让我们在上面的示例中为“ sample-element”类创建样式。

.sample-element{
   @include sample;
      button {
         background-color: $myBlue;
         font-size: 30px;
   }
}

Here we are invoking the sample mixin we created with include… We are also nesting styles for all button elements inside of the div with the “sample-element” class. This is the result:

在这里，我们要调用我们使用include创建的样本混合。我们还使用“ sample-element”类为div中的所有按钮元素嵌套样式。结果如下：

部分和进口 (Partials and Imports)

Partials and imports are very similar to imports and exports inside of react, in that Sass allows us to create seperate scss files that we can call on inside of one main Scss file. This allows us to break up our code so we can organize and compile our code into neater and more manageable chunks of code.

部分和导入与react内部的导入和导出非常相似，因为Sass允许我们创建单独的scss文件，我们可以在一个主Scss文件中调用该文件。这使我们可以分解代码，以便我们可以将代码组织和编译为更整洁，更易于管理的代码块。

Partials are created outside of the main Scss file, and we use an underscore(_) when naming a partial file. Let’s move all of our colors into a partial so we can begin decluttering the CSS code inside of our App.scss file. We’ll name the file _colors.scss, and cut the $myColor variables from App.scss and paste them in here. Note: this will break our code as the myColor variables no longer exist inside of the file. We will deal with that right away. Also be sure to create the file inside the same folder as the App.scss file.

局部文件是在主Scss文件外部创建的，命名局部文件时，我们使用下划线(_)。让我们将所有颜色都移到一部分，以便我们可以在App.scss文件中整理CSS代码。我们将文件命名为_colors.scss ，并从App.scss中剪切$ myColor变量并将其粘贴到此处。注意：由于myColor变量不再存在于文件中，因此这将破坏我们的代码。我们将立即处理。另外，请确保在与App.scss文件相同的文件夹中创建文件。

So with “_color.scss” we now have a component like file of CSS that we can call on with import to use the styles within it. Back in our App.scss file, let’s import the colors partial at the very top. The syntax for importing is “@import”, followed by the name of the partial wrapped in quotes and ending with a semicolon.

因此，有了“ _color.scss”，我们现在有了一个类似于CSS文件的组件，可以通过import调用它以使用其中的样式。回到我们的App.scss文件中，让我们在顶部导入部分颜色。导入的语法为“ @import”，后跟用引号引起来的部分的名称，并以分号结尾。

@import 'colors';

Once this is typed into the main App.scss file, your code should be back in working condition. “@import” is calling on the colors partial and allows us to use the styles within it without using any special syntax. With import it is as if we are declaring any variables or mixins from the partials, inside of our main scss file. Tie this in with the efficiency of code Snippets, and your future projects can now be created and styled much faster.

将其键入到主App.scss文件后，您的代码应恢复工作状态。 “ @import”调用局部颜色，并允许我们使用其中的样式，而无需使用任何特殊语法。对于import来说，好像我们在主scss文件中的局部变量中声明了任何变量或mixin。借助代码片段的效率将其结合起来，现在可以更快地创建和样式化您未来的项目。

It’s important to note that CSS styles read from top to bottom, so in the future if you create partial files that depend on other partial files, it is important that you call them in the order where the dependents will cascade down to the partials that use them.

重要的是要注意CSS样式是从上到下读取的，因此在将来，如果您创建依赖于其他部分文件的部分文件，请务必按顺序将它们调用，以使依赖项级联化为使用他们。

I hope this guide (A really rough crash course on Sass, that I’m sure I’ll come back to and edit) proves to be helpful and can in some ways showcase the simplicity of CSS.

我希望本指南(关于Sass的一个非常粗糙的速成课程，我相信我会重新开始并进行编辑)被证明是有帮助的，并且可以在某种程度上展示CSS的简单性。

Some Resources for CSS that I think go through the fundamentals and also go more in depth on the topics discussed in this guide:

我认为一些CSS资源，包括基础知识，也更深入地介绍了本指南中讨论的主题：

Learn CSS Positions in 9 minutes by WebDevSimplified (2019) Sass Basics by Official Sass Documentation React Sass w3Schools.com Sass Import and Partials we3Schools.com

WebDevSimplified(2019)通过Sass官方文档在9分钟内学习CSS位置 Sass基础知识 React Sass w3Schools.com Sass导入和部分 we3Schools.com

翻译自: https://medium.com/@stephennoahgalvan/simplifying-css-and-scss-3ca8e5afedde

css css2 css3

weixin_26717829

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css css2 css3_简化CSS和CSS

css css2 css3 解决神秘的笼罩…… (Addressing a shroud of mysteriousness …)For many of my peers, and myself included, there has been a lot of angst-y talk and minor sighs of distress when it comes to the topic...
复制链接

扫一扫