使用Sass的方法是什么
这篇文章主要介绍了使用Sass的方法是什么,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
蠡县网站建设公司创新互联建站,蠡县网站设计制作,有大型网站制作公司丰富经验。已为蠡县成百上千提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱,请找那个售后服务好的蠡县做网站的公司定做!
对于一个网页设计的新手来说,可能听说过“Sass”这个词。但却不确定Sass的作用以及是否可以使用它,
简而言之,Sass是一个CSS预处理器,它将特殊功能(如变量,嵌套规则和mixins(有时称为语法糖))添加到常规CSS中。目的是使编码过程更简单,更有效。让我们更详细地探讨一下。
什么是CSS预处理器?
CSS预处理器是一种脚本语言,它通过允许开发人员用一种语言编写代码然后将其编译成CSS来扩展CSS。Sass可能是最受欢迎的预处理器,但其他常见的例子包括Less和Stylus。
什么是SASS?
Sass(Syntactically Awesome Style Sheets)是CSS的扩展,使您可以使用变量,嵌套规则,内联导入等内容。它还有助于保持组织有序,并允许您更快地创建样式表。
Sass与所有版本的CSS兼容。使用它的唯一要求是必须安装Ruby。
如何使用Sass?
句法:
Sass包含两个语法选项:
1、SCSS (Sassy CSS):使用.scss文件扩展名,完全符合CSS语法
2、Indented (简单地称为 'Sass'):使用.sass文件扩展名和缩进而不是括号; 它不完全符合CSS语法,但编写起来更快
请注意,可以使用sass-convert命令将文件从一种语法转换为另一种语法。
变量
与其他编程语言一样,Sass允许使用可存储可在整个样式表中使用的信息的变量。例如,您可以将颜色值存储在文件顶部的变量中,然后在设置元素的颜色时使用此变量。这使您可以快速更改颜色,而无需单独修改每一行。
例如:
$font-stack: Helvetica, sans-serif; $primary-color: red; body { font: 100% $font-stack; color: $primary-color;}
将生成以下CSS:
body { font: 100% Helvetica, sans-serif; color: red; }
嵌套
嵌套是一把双刃剑。虽然它提供了一种减少需要编写的代码量的绝佳方法,但如果不仔细执行,它也会导致过度限定的CSS。我们的想法是以一种模仿HTML层次结构的方式嵌套CSS选择器。
以下显示了使用嵌套的基本导航样式:
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; }}
CSS输出如下:
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }
Partials
Partials是较小的Sass文件,可以导入到其他Sass文件中。将partials视为代码片段。使用这些代码片段,我们的CSS现在可以模块化并且更易于维护。部分通过使用前导下划线命名为_partial.scss来指定。
导入(Import)
使用局部模板,在@import指令,可以导入你的部分文件到当前文件,建立一个单一的CSS文件。请注意将为每个导入生成的HTTP请求使用的导入数量。
// _reset.scss html, body, ul, ol { margin: 0; padding: 0;}
// basefile.scss @import 'reset'; body { font: 100% Helvetica, sans-serif; background-color: #efefef; }
相应的CSS输出:
html, body, ul, ol { margin: 0; padding: 0; } body { font: 100% Helvetica, sans-serif; background-color: #efefef; }
注意:导入partials时,您不需要包含文件扩展名或下划线。
mixins
使用预处理器的一个优点是能够采用复杂,冗长的代码并简化它。这就是mixins派上用场的地方!
例如,如果您需要包含供应商前缀,则可以使用mixin。看一下border-radius的这个例子:
@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }
注意顶部的@mixin指令。它的名称为border-radius,并使用变量$ radius作为参数。此变量用于设置每个元素的半径值。
稍后,调用@include指令以及mixin名称(border-radius)和参数(10px)。因此.box {@include border-radius(10px); }。
生成以下CSS:
.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
扩展/继承
该@extend指令被称为是Sass的最强大的功能之一。看到它在行动后,很明显为什么。
我们的想法是,使用此指令,您不必在HTML元素上包含多个类名,并且可以保持代码干燥。您的选择器可以继承其他选择器的样式,然后在需要时轻松扩展。现在这很强大。
Sass的优点:
能够在CSS中执行计算,允许我们执行更多的操作,例如将像素值转换为百分比。我们还可以访问标准数学函数,如加法,减法,乘法和除法。当然,可以组合这些功能来创建复杂的计算。
此外,Sass还包含一些内置函数来帮助操作数字。像percentage(),floor()和round()这样的函数就是一些例子。
感谢你能够认真阅读完这篇文章,希望小编分享使用Sass的方法是什么内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!
网站题目:使用Sass的方法是什么
转载注明:http://pwwzsj.com/article/ipocpg.html