小河片网站建设推荐:初学者的学习指南-极简慕枫

小河片网站建设推荐:初学者的学习指南

2019-01-15

小河片网站建设推荐

编写大量的CSS可能会让人望而却步,这就是为什么学习Sass和学习更少的CSS是有好处的。他们可以使任何网页开发人员和设计师的生活变得容易得多。对于初学者来说,你可能会发现它很好,但随着时间的推移,你的CSS技能正在提高。

您开始怀疑是否有一种方法可以使您不需要在样式表中重复大量CSS代码。好消息是,有一个!由于CSS预处理程序,现在可以编写简洁的CSS,而不必一次又一次地重复它们。它甚至被很好的格式化。

您可以使用这些预处理方法执行计算和动态样式设计。在本教程中,我将首先讨论Sass,然后在另一个教程中讨论Sass,我将讨论更少的内容。

CSS缺陷

使用CSS可能只适用于您,但当制作多个页面的大网站时,可能有一些您希望CSS具有的功能。看看单独使用CSS的以下缺点。

  • 没有办法重复使用通用的样式规则。
  • 无法指定可以在样式表中全部定义和重用的变量。
  • 不能执行可以向元素添加数值的计算。

利用预处理方法的优势

  • 允许您使用可以在整个样式表中重复使用的变量。
  • 编译后的CSS文件将上载到生产Web服务器。

你为什么要学Sass?

Sass代表语法上很棒的样式表,是由汉普顿·卡特林设计和创作的。Sass使用变量、混合、继承和嵌套规则操作CSS。考虑到扩展.sass和.scss,使用命令行工具或web框架插件将其转换为格式良好的CSS。

Sass使编写更少的CSS代码和动态操作它们变得更容易。这是一个伟大的方式来编写更多的功能CSS代码,可以加快每个网页开发人员和设计师的工作流程。

.Sassvs.scss格式

在开始讨论如何使用Sass之前,让我们比较一下Sass的.sass和.scss扩展。首先,我将提供一个简单的CSS代码,然后我将向您展示如何在Sass的两个扩展上简化它们。

货物积载与系固安全操作规则

对于我们的CSS,我使用了一个标题标签,并将一个零值作为页边距和填充,然后白色作为它的文本颜色。

header {
     margin: 0;
     padding: 0;
     color: #fff;
}

.SCSS扩展格式(写入Sass的新方法)

要将其格式化为.scss扩展格式,我们将使用变量$color,并将其作为白色的十六进制颜色值#fff。然后在CSS样式下,使用代码开头设置的变量$color,而不是放置十六进制颜色值#FFF。

$color:  #fff;
header {
    margin: 0;
    padding:0;
    color: $color;
}

.Sass扩展格式(Sass的旧编写方式)

对于.sass扩展,我们将具有与.scss扩展格式相同的变量和值,但这次没有分号和括号。注意缩进更依赖。这是写Sass的旧格式。

$color: #fff
header
   margin: 0
   padding: 0
   color: $color

完成本教程所需的资源:

  • Ruby安装程序
  • Text Editor
  • 时间和耐心

安装Ruby

在您能够测试Sass如何工作之前,您需要将Ruby下载到您的计算机上。启动Ruby安装程序,安装页面将提示您。选择您喜欢的语言,然后单击OK。

21

接下来,将其安装到您喜欢的位置,并确保选中了将Ruby可执行文件添加到路径中的单选按钮。单击“安装”按钮。这将安装软件,安装完毕后,只需单击Finish按钮即可。

8

12

检查Ruby是否运行正常

现在您已经安装了Ruby,让我们继续检查它是否正常工作。打开命令提示符并键入ruby-v。您可以看到,它将返回当前版本的Ruby安装日期。如果返回错误,可能是Ruby没有正确安装,或者您没有将Ruby可执行文件放入您的路径中。

6

安装Sass

若要安装Sass,请打开命令提示符并键入单词GEMInstallSass,您可以看到安装提示已成功安装。

19

准备必要的文件

在深入研究Sass之前,我们需要在编写代码之前准备所需的文件。创建一个新文件夹到您喜欢的位置(在本教程中,我将我的文件夹放在桌面上),并将其命名为Sass或任何您喜欢的名称。在Sass文件夹中,创建一个HTML文件并将其命名为index.html。对于HTML内容,放置以下代码。




   

        
Introduction to Sass





Sass Sample Document

A 1stwebdesigner tutorial

Simple paragraph of text Another paragraph of text
  • List Item 1
  • List Item 2
  • List Item 3

This is a cool footer content

现在,对于Sass文件,在文本编辑器中创建一个新的空白文件,并将其命名为style.scss。如果您遵循这些步骤,此时您将具有以下文件结构。

1

将Sass代码转换为CSS代码

要将Sass代码转换为CSS代码,我们将在命令提示符中使用-watch命令。这将Sass代码编译为CSS。此外,这还将监视目录的更改或更新。让我们尝试将Sass文件转换为CSS文件。在开始之前,我们需要在style.scss上放置一个示例代码,看看它是否有效。将以下示例Sass代码复制并粘贴到在Sass文件夹下创建的stye.scss文件中。

$myMargin: 0px auto;
$myColor: red;
$myWidth: 600px;

h1 {
	color: $myColor;
	$myMargin: $margin;
}

接下来,打开命令提示符,然后转到放入文件的位置。在我的例子中,我把它放在我的桌面,所以我将键入CD“桌面”,它将定位桌面目录。

15

现在我们在桌面文件目录中,输入sass-watch sass:sass。

9

使用-watch命令,我们将转换文件夹Sass上的所有.scss文件。它还将监视文件上的更改或更新。注意,有两个Sass,除以冒号。第一个表示.scss文件的当前位置,而第二个表示文件输出的位置。请确保将转换后的CSS文件链接到HTML文件以查看此文件的工作情况。

小河片网站建设推荐 20

使用变量

SAS变量使用$字符声明,并被定义为CSS值。使用Sass,您可以为字体大小、页边距、填充等样式声明变量,使用变量并赋予其样式值,可以方便地重复使用样式。

在Sass中可以使用六种不同类型的变量。

  1. Strings小河片网站建设推荐 (e.g. $myString: “your text here”;)
  2. Numbers小河片网站建设推荐 (e.g. $myNum: 10px;)
  3. Colors小河片网站建设推荐 (e.g. $myColor: white;)
  4. Booleans小河片网站建设推荐 (e.g. $myBool: true;)
  5. Lists小河片网站建设推荐 (e.g. $myItemList: 1px solid red;)
  6. Nulls小河片网站建设推荐 (e.g. $myVar: null;)

让我们把这些类型中的一些付诸实践。打开style.scss文件并键入以下代码。

$myColor: #009a82;
$myString: " some text here ";
$myFontSize: 13px;
$myMargin: 0px auto;
$myWidth: 460px;

h1 {
	color: $myColor;
	margin: 0;
	padding: 0;
}

#container {
	width: $myWidth;
	margin: $myMargin;
}

现在,当您在浏览器中运行这段代码时,您将得到这个输出。

14

Nesting

Sass还允许您定义嵌套样式。这样你就可以写容易读的代码了。例如,您有以下CSS代码:

#container p {
   font-family: Arial;
   font-size: 13px;
}

#container h1 {
   font-family: Tahoma;
   font-size: 15px;
}

#container h2 {
   font-family: Helvetica;
   font-size: 14px;
}

对于Sass版本,您将有如下格式小河片网站建设推荐:

$myFontsize1: 13px;
$myFontsize2: 18px;
$myFontsize3: 25px;
$myWidth: 500px;
$myMargin: 0px auto;

#container {
    width: $myWidth;
	margin: $myMargin;

	p {
		font-family: Arial;
		font-size: $myFontsize1;
	}

    h1 {
		font-family: Tahoma;
		font-size: $myFontsize3;
	}

	h2 {

		font-family: Helvetica;
		font-size: $myFontsize2;
}
}

注意,我们将所有元素样式放在id容器下,而小河片网站建设推荐不是在同一个元素下逐一命名它们。如果将这段代码运行到浏览器中,就会出现类似的情况。

23

混入

混入允许您定义一次公共属性,然后一次又一次地重复使用它们。混入是使用@Mixin指令定义的,包含一个代码块,然后使用@include指令重用它们。让我们将其付诸实践。将下面的代码复制到style.scss文件中。

@mixin border {
   border: 1px solid red;
}

#container {
   width: 960px;
   margin: 0 auto;
   @include border;
}

如您所见,我们使用@comins指令为边框创建样式,然后使用@include指令将样式包含到id容器中。如果您在浏览器中运行此操作,您将得到下面的输出。

17

Operators

执行数学运算是像Sass这样的预处理器最好的特性之一,这一点你不能只用普通的CSS代码来完成。考虑到这个特性,您可以执行更复杂和动态的代码。让我们来看看它是如何工作的。继续打开你的style.scss文件,复制并粘贴下面的代码。

$myColor: #aa30ff;
$myPadding: 20px;
$thickness: 1px;
$border: solid red;

#samplepara{
	color: $myColor;
	padding: $myPadding+30;
}

#list1 {
	color: $myColor;
	border: $thickness+5 $border;
}

正如您所看到的,我们通过在填充上添加30 px来执行数学计算。我们还在边界上增加了5 px的边框厚度。如果在浏览器中运行此操作,则可以看到输出如下所示。

13

Functions

Sass提供了多种功能。这方面的一个很好的例子是颜色函数,您可以在其中操作颜色样式。请查看下面的一系列颜色函数。

  1. 深色(颜色,数量)
  2. 淡(颜色,量)
  3. 饱和(颜色、数量)
  4. de饱和(颜色、数量)
  5. 阿尔法(颜色)

这些只是一系列函数的例子。要了解有关函数的更多信息,请查看Sass文档。现在,让我们继续学习这个示例,看看Sass函数是如何工作的。打开style.scss文件夹,然后复制并粘贴下面的代码。

$myColor: #202020;
$myBackground: #e6e6e6;

body {
     background: darken($myBackground, 20%);
}

h1, h2 {
     color: lighten($myColor, 40%);
}

注意,使用暗函数时,颜色会变暗20%,而H1则会变暗,而H2文本也会使用亮值函数使颜色变暗40%。因此,如果在浏览器中运行此命令,您可以在下面看到类似的输出。

16

SASS输出格式

Sass的最佳功能之一是它提供了多种选项来控制在编译为CSS时如何格式化SCSS代码。使用-Style选项命令,我们可以对编译的CSS代码执行格式设置。以下是Sass格式样式。

嵌套格式

嵌套样式是Sass的默认格式。此格式为编译后的CSS文件中的所有样式提供缩进。若要查看此操作,请将下面的代码复制并粘贴到style.scss中,然后打开命令提示符(确保您位于Sass的目录中)并键入Sass-UPDATE style.scss。此命令将使用UPDATE命令更新编译后的CSS文件的格式。

12

现在继续打开编译好的style.css文件。正如我前面说过的,所有的风格都会有适当的嵌入。

5

扩展格式

这是最方便用户和可读的格式,因为大括号是正确展开和每个属性将有自己的行。让我们来看看这个动作。使用上面相同的代码,打开命令提示符,然后键入sass-update style.scss样式展开。注意,我们添加了样式命令,用于将编译好的CSS文件格式化为特定格式。

7

因此,如果要查看Sass文件上编译的CSS文件,可以看到代码格式类似于下面的图像。注意,每个属性都有自己的行。支架也完全展开。

4

紧凑型版式

这是压缩格式输出CSS代码的压缩格式,但仍然可读。它增加了大括号之间的空格,但都在一行中。要查看使用上面相同的代码如何工作,请打开命令提示符并键入sass-update style.scss样式紧凑。

10

如果您要检查已编译的CSS文件,您可以看到类似于下面的图像。它被浓缩了。每个属性和样式都在一行中。

22

Compressed Format

压缩格式使输出最小化。这是适合生产环境。此格式具有更简洁的格式。使用相同的代码,打开命令提示符并键入sass-update style.scss样式的压缩文件。

因此,如果要查看Sass文件上编译的CSS文件,可以看到代码格式类似于下面的图像。正如您所看到的,所有代码都在一行中,根本没有空格。

Conclusion

Sass提供了各种简化CSS问题的方法。它允小河片网站建设推荐许您通过使用变量来减少代码的重复。萨斯很强大。这有助于改善网页设计师和网页开发人员的工作流程。

现在学习它,并发现它如何可以帮助你建立一个快速发展的专业网站。希望你喜欢这个教程,下次再见。

联系电话 400-6065-301

微信咨询 寒总监