如何开始使用Sass

null

萨斯是一个功能强大的工具,它将其他编程语言的许多功能引入CSS - 例如函数,变量和循环 - 以及带来自己的直观功能,例如mixins,nesting和partials等等。

在本教程中,我们将使用Sass循环,混合和函数创建社交图标。我们还将使用Sass中强大的嵌套功能。

我们将在Sass中创建一个列表来生成我们的社交图标,它们首先包括类名,字体引用和颜色 - 以及后面的工具提示。

我们将使用mixins创建可重复使用的媒体查询,并创建一个将像素值转换为em值的函数。为此,我们还将为基本字体大小创建变量。

根据您的系统和构建工具需求,有多种方法可以安装和使用Sass - 可以找到更多详细信息这里- 但是,我们将使用CodePen将我们的Sass编译为CSS,以使事情尽可能简单。

要真正利用Sass的强大功能而不是陷入混乱的特异性和复杂性,需要对CSS有充分的了解。我们将使用的Sass的特殊风味是SCSS(Sassy CSS),这意味着我们仍将在我们的Sass代码中使用大括号{}。

获取教程文件

要下载本教程的示例文件,请转到FileSilo,选择教程旁边的免费内容和免费内容。注意:首次用户必须注册才能使用FileSilo。

01.设置CodePen CSS

Getting your CodePen CSS set up correctly is key

正确设置CodePen CSS是关键

我们需要做的第一件事是创造一支新笔并更改CodePen中CSS编辑器的一些默认设置。我们将CSS预处理器更改为SCSS并启用Normalize和Autoprefixer。

02.开始编写一些代码

现在我们已经设置了一切,我们可以开始编写一些代码了。在HTML编辑器中,我们将创建一个容器和许多项目,其中包含每个图标的链接和图标。

这里使用的名称将在我们的Sass列表中用作CSS中的参考。我们还将为我们的类名使用BEM命名约定。

03.设定基本款式

转到CSS编辑器,我们将首先包括font-awesome,为我们的基本字体大小设置变量以及为页面设置一些基本样式。

@import url(http://srt.lt/w8yT8); //变量$ base-font-size:16px; // Basic Styling body {font-size:$ base-font-size; ...}

04.创建一个基本功能

接下来,我们将创建一个基本函数,使用我们的'$ Base-font-size'变量将像素值转换为em值。

Sass中的函数使用'@function'创建,后跟函数名称和用于执行函数的输入。

然后在声明中我们使用'@return'在使用函数时输出值。围绕计算的“#{}”用于插值

//函数@function px-to-em($ pixels){@return#{$ pixels / $ base-font-size} em; }

05.制作mixins

继续我们的设置,我们将使用我们的'px-to-em'函数为简单的移动优先媒体查询创建mixins,我们将传递px值以返回em值。

Mixins是使用'@mixin'创建的,后跟mixin的名称。然后在声明中我们使用'@content'来输出我们在我们的代码库中稍后调用它时放在mixin中的代码。

@mixin viewport  - 大{@media only screen and(min-width:px-to-em(1680px)){@ content; @mixin viewport  -  medium {@media only screen and(min-width:px-to-em(1080px)){@ content; }}

06.设置Sass列表

我们设置的最后一步是创建一个列表。 Sass中的列表是使用变量创建的;之后,确切的语法非常宽松,接受各种各样的定义它的方法

在变量内部,我们将为每个图标定义类名,unicode值和颜色,用括号内的逗号分隔它们。

$ icon-list :( vimeo“\ f27d”#1ab7ea,twitter“\ f099”#1da1f2,... github“\ f113”#333,rss“\ f09e”#f26522);

07.连续显示您的图标

为了使我们的社交图标能够在行中显示,我们将为每个容器添加一些简单的CSS。

.social__item {display:inline-block; margin-right:0.05em; }

08.创建共享图标样式

为了最小化我们输出的CSS数量,我们将使用CSS3选择器来查找以“icon”开头的所有类,并为它们创建共享样式。

[class ^ =“icon”] {font-family:'FontAwesome';说:没有font-style:normal; font-weight:normal; font-variant:normal; text-transform:none; line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:灰度; }

09.样式按钮背景

使用相同的方法,我们将对在'em'中定义我们的值的按钮执行相同的操作,以后我们可以使用容器调整它们的大小。

[class ^ =“social__icon”] {font-size:1em;宽度:2em;身高:2em; background-color:#333;白颜色; text-decoration:none; border-radius:100%; text-align:center;显示:flex; align-items:center;辩解内容:中心; }

10. @each循环为我们的图标

We’ve used our loop to generate the icons for each of our social icons

我们使用循环为每个社交图标生成图标

现在我们有了所有基本样式,我们可以使用列表生成特定于每个图标的CSS。

要在Sass中创建循环,我们使用'@each',后跟每个项目的每个值的名称 - '$ icon','$ unicode'和'$ icon-background' - 后跟单词'in'然后是名称的清单。

在循环内部,我们将'$ Unicode'值应用于我们在HTML中创建的每个图标的'before'伪元素,允许我们之前创建的共享样式来处理所需的所有其他样式。

@each $ icon,$ unicode,$ icon-list {。icon  - #{$ icon} {&:: before {content:$ unicode; }}}

11. @each循环为我们的背景颜色

We’ve added the background colours as well as the icons to our '@each' loop

我们在'@each'循环中添加了背景颜色和图标

图标现在全部工作,但我们仍然有后备背景颜色。我们将在列表中添加更多代码来解决这个问题。使用与上面相同的方法,我们将输出'$ icon'名称,但这次是在'social__icon'类中,在'$ icon-background'颜色内部。

@each $ icon,$ unicode,$ icon-list {... .social__icon  -  $ {$ icon} {background-color:$ icon-background; }}

12.使用mixins

Using our mixins we've updated the font size of the container to change the icons size depending on the viewport width

使用我们的mixins,我们更新了容器的字体大小,以根据视口宽度更改图标大小

使用我们之前创建的mixins,因为我们使用'em'值设置了图标样式,我们可以将一个font-size应用于容器,并使用我们的媒体查询mixin使用'@include'和mixin的名称后跟我们想要包含在媒体查询中的代码。

.social__container {font-size:1em; @include viewport  -  medium {font-size:1.5em; } @include viewport  -  large {font-size:2em; }}

13.添加交互状态和内置函数

我们可以通过在使用鼠标或键盘交互按钮时更改背景颜色来为我们的按钮添加一些交互性。

萨斯有很多内置颜色功能允许我们采用我们在列表中设置的背景颜色,并将其与黑色混合以使按钮变暗 - 与之交互时。

icon  - #{$ icon} {background-color:$ icon-background; &:hover,&:focus,&:active {background-color:mix(black,$ icon-background,15%); }}

14.过渡背景颜色

我们还可以利用CSS中的“过渡”属性来设置背景颜色之间的差异。我们可以使用'all'值,但这在性能方面既昂贵又不允许我们在不同的时序和时序功能上转换不同的值。

[class ^ =“social__icon”] {... transition:background-color 150ms ease-in-out; }

15.增加进一步的过渡效果

通过向按钮添加“相对”定位和顶部值并将“顶部”添加到“过渡”属性,我们可以准备元素以进行进一步的交互。

[class ^ =“social__icon”] {position:relative;顶部:0; ...过渡:背景颜色150ms易于进出,顶部250ms线性; }

16.在交互时向上移动按钮

对于这种交互,没有什么特别需要创建它,因此我们可以将代码添加到共享类。通过应用负顶值并移除轮廓,我们可以获得更清晰的交互视觉提示。

[class ^ =“social__icon”] {...&:hover,&:focus,&:active {outline:none;顶部:-0.25em; }}

17.添加阴影

Using transition properties we’ve animated any interaction with the buttons – moving them up, darkening the background and adding a drop shadow

使用过渡属性,我们已经设置了与按钮的任何交互动画 - 将它们向上移动,使背景变暗并添加投影

我们也可以使用相同的方法来创建和设置“盒子阴影”动画 - 为交互添加更多深度 - 在顶部值的同时更改阴影的垂直高度。

box-shadow:0 0 0.25em -0.25em rgba(0,0,0,0.2); &:hover,&:focus,&:active {... box-shadow:0 0.5em 0.25em -0.25em rgba(0,0,0,0.3); }

18.添加工具提示

我们可以使用CSS轻松添加工具提示,为我们的用户增加更多清晰度。我们要做的第一件事是将工具提示值添加到列表中。确保将它们写在引号中以允许在需要时使用空格。

$ icon-list :( vimeo“Vimeo”“\ f27d”#1ab7ea,twitter“Twitter”“\ f099”#1da1f2,... github“GitHub”“\ f113”#333,rss“RSS”“\ f09e” #f26522,);

19.修改@each循环

由于添加到我们的列表中,我们需要修改我们的'@each'循环以包含工具提示值('$ name')。然后我们可以输出该名称作为我们按钮上'before pseudo'元素的内容。

@each $ icon,$ name,$ unicode,$ icon-list {... .social__icon  - #{$ icon} {...&:: before {content:'#{$ name} “; }}}

20.设置前伪元素的样式

We've added some basic styles to the tooltips again adding transitions to animate them into position

我们在工具提示中添加了一些基本样式,再次添加过渡以将它们设置为位置

现在我们在屏幕上显示每个元素的名称,我们需要为元素设置样式,添加背景颜色,填充和其他样式元素 - 以及定位元素并准备过渡并在交互时修改不透明度和顶部值。

&:: before {... top:-3.5em;不透明度:0;过渡:顶部250ms线性,不透明度150ms线性150ms; }&:hover,... {...&:: before {opacity:1;上:-2.5em; }}

21.设置after伪元素的样式

我们会用CSS三角形创建工具提示的底部 - 再次通过在不同的时间转换不透明度和顶部值来定位元素以准备转换。

通过添加延迟,我们得到一个动画,其中包括工具提示淡入并向下移动到位。

&:: after {... top:-1.9em;不透明度:0;过渡:顶部250ms线性,不透明度150ms线性150ms; }&:hover,... {...&:: {opacity:1;顶部:-0.9em; }}

可以找到CodePen教程步骤的集合这里

本文最初出现在Web Designer杂志第264期。在这里购买

阅读更多:



翻译字数超限