您的位置：首页 > 编程语言 > Ruby

sass 基于ruby_使用Sass和Gerillass创建漂亮的基于卡片的设计布局

2020-08-17 22:18 1786 查看

sass 基于ruby

Creating a card-based design layout can often be challenging, especially if you don’t use a framework like Bootstrap or any other library to support this goal. Here is a flexible and straightforward way to create beautiful card-based design layouts using Sass and Gerillass.

创建基于卡的设计布局通常可能具有挑战性，特别是如果您不使用Bootstrap之类的框架或任何其他库来支持此目标。这是使用Sass和Gerillass创建漂亮的基于卡片的设计布局的灵活，直接的方法。

We’ll be installing Node.js and Gulp CLI, and download a Gulp-based starter project named Gerillass Play to get started with Sass and Gerillass quickly.

我们将安装Node.js和Gulp CLI ，并下载一个名为Gerillass Play的基于Gulp的入门项目，以快速开始使用Sass和Gerillass 。

Note that there are many ways of using Gerillass. The method that we are about to use now is just one of them. To learn more about installation and usage, please check the installation details on Github.

请注意，有多种使用Gerillass的方法。我们现在将要使用的方法只是其中之一。要了解有关安装和使用的更多信息，请在Github上查看安装详细信息 。

If you are using the Gerillass Sass library already skip these installation steps.
如果您使用的是Gerillass Sass库，请跳过这些安装步骤。

Node.js安装： (Node.js Installation:)

The first thing is first.

第一件事是第一。

Since we’ll be working with Node.js, you must install it on our computer, first.

由于我们将使用Node.js，因此必须首先将其安装在我们的计算机上。

To do that, visit the Node.js site at https://nodejs.org/en/ and then download the “LTS” version. After that, start the installer by double-clicking the installation file.

为此，请访问https://nodejs.org/en/上的Node.js站点，然后下载“ LTS ”版本。之后，通过双击安装文件来启动安装程序。

Now let’s open the terminal window and run the following command to test if the Node.js installed on your computer properly.

现在，让我们打开终端窗口并运行以下命令， 以测试Node.js是否正确安装在您的计算机上 。

node --version

If you see the version info it is good to go!

如果您看到版本信息，那就好了！

Gulp CLI安装 (Gulp CLI Installation)

Open the terminal window again and run the following command to install Gulp CLI on your computer.

再次打开终端窗口，然后运行以下命令在计算机上安装Gulp CLI 。

npm install --global gulp-cli

Note that the macOS users need to use

sudo

flag at the beginning like in the below example.

请注意， macOS用户需要像下面的示例一样在开头使用

sudo

标志。

sudo npm install --global gulp-cli

Now let’s check the Gulp CLI version that we installed globally:

现在，让我们检查一下全局安装的Gulp CLI版本 ：

gulp --version

安装Gerillass Play (Installing Gerillass Play)

To get started with Gerillass quickly we are going to download a Gulp-based starter project named Gerillass Play that I built for you. It will come with all the packages and configurations that you’ll need to work with Sass and Gerillass.

为了快速入门Gerillass，我们将下载一个我为您构建的基于Gulp的入门项目Gerillass Play 。它将包含与Sass和Gerillass一起使用所需的所有软件包和配置。

Now let’s open your terminal window. Type

cd desktop

to target the desktop folder, and then run the following command to install the project.

现在打开终端窗口。键入

cd desktop

以定位桌面文件夹，然后运行以下命令以安装项目。

Replace
your-project-name
with a preferred one (e.g., card-based-design).
将
your-project-name
替换为首选
your-project-name
(例如，基于卡的设计)。

git clone https://github.com/selfishprimate/gerillass-play.git your-project-name

Run the following command to go into that project folder.

运行以下命令进入该项目文件夹。

cd your-project-name

When you are in the folder, type the following command, and hit the enter to install all the packages.

在文件夹中时，键入以下命令，然后按Enter键以安装所有软件包。

npm install

Now let’s boot up the project by running the following command.

现在，通过运行以下命令来启动项目。

gulp start

If you see the following screen on your browser, that means everything went well so far.

如果您在浏览器上看到以下屏幕，则表示到目前为止一切正常。

使用Gerillass创建基于卡片的设计布局 (Creating a card-based design layout with Gerillass)

Now open the “index.html” file under the “src” folder and replace the code with the one below.

现在打开“ src ”文件夹下的“ index.html ”文件，并将代码替换为以下代码。

Save the file to see the changes on your browser.

保存文件以查看浏览器中的更改。

The page will be updated as soon as you save the file! Thanks to Gulp and BrowserSync. 保存文件后，页面将立即更新！感谢Gulp和BrowserSync。

I know the page looks a bit messy right now, but don’t worry, we are going to fix it.

我知道该页面现在看起来有些混乱，但是不用担心，我们将对其进行修复。

Let’s use some Gerillass Sass mixins to fix that ugliness.

让我们使用一些Gerillass Sass mixins来解决该丑陋问题。

Open the “styles.scss” file under the “src/assets/scss” folder and scroll down till you see the comment I left for you:

“ 源/资产/ SCSS”文件夹下打开“styles.scss”文件，直到你看到我留给你的意见向下滚动：

/* Write your styles here! */

We are going to write our styles here.

我们将在这里编写样式。

First, let’s fix the width of the card images by calling the Reset Figure mixin in the “.card-figure” selector.

首先，让我们通过在“ .card-figure ”选择器中调用Reset Figure mixin来固定卡片图像的宽度。

You can find the final version of the Sass code at the end of the article. 您可以在文章末尾找到Sass代码的最终版本。

The code above will output the CSS code below (you can follow along with the changes by opening the “styles.scss” file under the “src/assets/scss” folder).

上面的代码将输出下面CSS代码(您可以通过打开“ src / assets / scss ”文件夹下的“ styles.scss ”文件来跟随更改)。

This will give us the following page.

这将为我们提供下一页。

Now, let’s use Columnizer mixin to create three hypothetical columns so that we can line up every item accordingly in the “.cards-container” element.

现在，让我们使用Columnizer mixin创建三个假设的列，以便我们可以在“ .cards-container ”元素中相应地排列每个项目。

Columnizer mixin must always be called in the parent element’s selector. 必须始终在父元素的选择器中调用Columnizer mixin。

It will generate…

它将产生……

We wrote just a few lines of Sass code so far, and look what we got!

到目前为止，我们只写了几行Sass代码，然后看看我们得到了什么！

Now let’s pass a second argument for Columnizer mixin to control the space between the cards.

现在让我们为Columnizer mixin传递第二个参数，以控制卡之间的空间 。

The layout has started to form roughly, what do you think? Now let’s improve our cards cosmetically.

布局已开始大致形成，您认为呢？现在，让我们在外观上改进卡片。

You can find the final version of the Sass code at the end of the article. 您可以在文章末尾找到Sass代码的最终版本。

Our cards looking good now!

我们的卡片现在看起来不错！

If you think that the last two items look bizarre, fortunately, there is a hack to fix that. You can pass a “true” value as a third argument for the Columnizer mixin to fix that.

幸运的是，如果您认为最后两个项目看起来很奇怪，那么可以解决这个问题。您可以将“ true ”值作为第三个参数传递给Columnizer mixin修复该问题。

That will make the orphans fill the gap.
那将使孤儿填补空白。

现在，让我们的基于卡片的设计布局响应 (Now let’s make our card-based design layout responsive)

To make this layout responsive, we’ll make a little change inside of our Sass code: First, let’s change the value of the first argument of Columnizer mixin from “3” to “1”.

为了使此布局具有响应性，我们将在Sass代码内部进行一些更改：首先，让我们将Columnizer mixin的第一个参数的值从“ 3 ”更改为“ 1 ”。

That will set the number of columns to “1” default.
这会将默认列数设置为“ 1”。

After that let’s use another very useful mixin named Breakpoint to generate CSS media queries.

之后，让我们使用另一个非常有用的混合器Breakpoint来生成CSS媒体查询 。

You can find the final version of the Sass code at the end of the article. 您可以在文章末尾找到Sass代码的最终版本。

The code above will set the number of columns to “2” after “medium” breakpoint , and to “3” after “large” breakpoint.
上面的代码将列数设置为在“ 中 ”断点之后的“ 2 ”，以及在“ 大 ”断点之后的“ 3 ”。

Now shrink your browser window to see how our card-based design layout responds to the various screen sizes.

现在，缩小浏览器窗口，以查看我们基于卡片的设计布局如何响应各种屏幕尺寸。

So far, so good. But we have one last thing to do!

到目前为止，一切都很好。但是，我们还有最后一件事要做！

使整个卡片都可点击 (Making the entire card clickable)

We’ll make the entire card surface clickable by stretching the link inside of it. To achieve that, we are going to use another useful mixin named Stretched Link.

通过拉伸其中的链接，可以使整个卡片表面可点击。为此，我们将使用另一个名为Stretched Link的有用混合器。

Call the Stretched Link Sass mixin in the “.card-link” selector, and add

position: relative;

style rule to the containing element, in this case, it’s the “.card” selector.

在“ .card-link ”选择器中调用“ Stretched Link Sass”混入，并添加

position: relative;

包含元素的样式规则，在这种情况下，它是“ .card ”选择器。

Note that the containing block must have
position: relative;
style rule and the mixin must be applied to only one of its children.
注意，包含块必须具有以下
position: relative;
样式规则和mixin必须仅应用于其子项之一。

You can click wherever you want on the card now.

您现在可以在卡上的任意位置单击。

That’s all for now. Thank you for reading so far. I hope the article was helpful for you, and please let me know if you’re having any trouble using Gerillass. You can write to me on Twitter; I’ll soon be answering you.

目前为止就这样了。谢谢您到目前为止的阅读。希望本文对您有所帮助，如果您在使用Gerillass时遇到任何麻烦，请告诉我。你可以在Twitter上给我写信 ; 我很快就会回答你。

See you around!

再见！