使用CSS变得时髦

分享于 

25分钟阅读

Web开发

  繁體

介绍

在本文中,我将介绍 SASS (。语法出色的样式表)的一些特性。 SASS允许你在语法上定义样式表的几个方面,"编译"到标准 CSS。 为了演示这一点,我将通过一个前现现有CSS文件的重构练习来演示这个问题。 希望这将作为一个参考,以及介绍如何。 因这里,我将介绍语法,我不想介绍一些更细微的方面,比如配置wince缓存或者输出样式。

Background

一般来说,本主题针对ipqos的初学者,但是你应该了解HTML和 CSS,因为本文是任何用途。 以下是你可能会发现有用的资源列表。

关于 LESS的注释

许多概念都适用于 LESS,这是类似的CSS前处理器语言。 尽管我觉得 LESS 更像"css格式",但我更喜欢它的,因为它更喜欢的语法,我认为它与本文的文章有很大的区别。 不过还是个不错的选择。 可以在 http://lesscss.org/ 找到 LESS。

我使用的另一个原因是在刚刚开始工作的网站中使用了它。 因这里,我在写这篇文章时,都是为了提高技术本身的目的而提高了这一目的。 when CSS,它很明显是可以使用的,但这是一个非常重要的技术,它是一种很好的技术。

设置

从我的列表中选择的第一项是创建一个MVC3应用程序作为示例代码。 如果你不了解MVC3如何工作,则不应该是一个问题: 生成的HTML在标记方面是非常重要的。 我根本不参考MVC3视图,我可以很容易地使用HTML文档。 如果你不确定MVC3和 Razor,那么我将生成的HTML ( 和原始的css ) 包含在一个名为"。HTML和 css"的解决方案文件夹中,这样就可以引用这些。 运行应用程序给出:

获取 SASS

通过NUGET软件包,最简单的方法是:首先从IDE打开软件包管理器控制台:

然后,在控制台窗口复制/键入以下命令:

install-package sassandcoffee

Nuget将在项目中安装 SASS,你将被提示安装定义文件,选择是。 你也可以使用"管理解决方案的NuGet软件包"选项,如果你喜欢一个 GUI,搜索"SassAndCoffee"。

现在,值得安装"。mindscape网络工作台",它为SASS提供了智能化。格式化和其他编辑器支持。 关闭 Visual Studio,从下载工作台,然后打开。 要安装的vsix文件。 你只需要在 Visual Studio 安装中执行一次。

使用 SASS

我们需要理解的第一件事是,可以直接使用 CSS,这样做就像将". css"文件重命名为". scss"一样简单。 如果你安装了工作台,icon 将喜欢这里更改:

运行该应用程序产生的输出与前面的截图相同。 scss文件是"已经编译"到一个 css,它由站点使用。

你在you中看到的eagle文件扩展名是scss而不是 sass。 有一个基于缩进的旧语法,它使用. sass 扩展。 虽然简洁,但它并不像scss语法那样自然: vanilla css is 有效。 sass文件但的在。 scss文件。 因为我看不到在新开发工作中使用它的有吸引力的原因,我不会。 .scss 文件更接近css语法。

你将注意到,我没有在 html header 中编辑对css的引用,并且页面仍然呈现。 在 ASP.NET 项目中,工作台"编译"。 scss文件在中保存为时。 这有增加的好处,当应用程序部署到服务器时,服务器不需要在运行时执行。

好,我们花了一点时间,而且仍然在方块中,因这里对于这个问题是什么兴奋?

变量

缺省MVC项目的CSS结构非常好,但是一个引用性的事是 file: 顶部的评论爆炸。

/*----------------------------------------------------------
The base color for
this template is #5c87b2. If you'd like
to use a different
color start by replacing all instances of
#5c87b2 with your
new color.
----------------------------------------------------------*/

如果你想改变基本颜色,比如说,你需要做一个搜索并替换 ! SASS可以更优雅地处理它: 我们只定义一个变量并使用它:

$base-color:#FFA0A0; //Define a pink base colour in place of the bluebody{
 background-color: $base-color;. . .
}

这是值得的: $ 符号告诉SASS有一个变量。 $base-color: #FFA0A0; 将变量设置为fetching的粉红色。 background-color: $base-color; 将颜色的background 颜色设置为参数值的值。 注意,作为 SASS c 风格单行注释的一部分可以使用 !

在这里实例中使用的唯一它的他地方是菜单的底部边框:

ul#menu{
 border-bottom: 1px $base-color solid;. . .
}

现在我们只需要改变 base-color 变量来改变整个页面。 我想把这个边框变暗,使它更突出。 SASS有许多内置的函数,其中之一是黑。 我还将使边框更宽,使它的更可见:

ul#menu{
 border-bottom: 5px darken($base-color, 33%) solid;. . .
}

渲染生成:

我们不仅限于颜色。 我们可以设置一个变量,例如大多数文本基于 em 大小,例如头部的字体高度。

h1, h2, h3, h4, h5,h6{
 font-size: 1.5em;. . . 
}h1{
 font-size: 2em;. . . 
}p, ul{
. . .
 line-height: 1.6em;}

等等

$base-text-size:1em;h1, h2, h3, h4, h5,h6{
 font-size: $base-text-size + 0.5;. . .
}h1{
 font-size: $base-text-size + 1;. . .
}p, ul{
. . .
 line-height: $base-text-size + 0.6;}

注意,我在这里对变量执行了一个操作,另外我并不需要指定单元( 在这种情况下,em ),而是为我工作。

如何读取生成的CSS以进行调试

你可能发现的一件事是需要查看所生成的内容。 有两种方法,两种方法都很简单。 第一个( 工作台可用) 是展开. scss 文件下的树,生成的css是。 第二种方法是将引用样式表的url输入浏览器,就像SASS没有被使用一样。 对于默认的MVC3应用程序,它是 在这里示例中,指定的端口号将设置为 1999.

一个非常好的特性是,如果你做了一个语法错误,工作台将一个报告放入 css。 假设我错过了基本颜色参数声明上的终止 ;:

$base-color: #FFA0A0

页面将呈现,但不显示任何样式: SASS无法生成样式表。 如果你以 上面 方式导航到css路径,将产生一个方便的错误消息:

/* Syntax error: Invalid CSS after
"body": expected selector or at-rule, was"{"
on line 9 of C:UsersKeithdocumentsvisual
studio 2010ProjectsSassExampleSassExampleContentSite.scss
Use --trace for backtrace.
*/

创建CSS属性块: mixin

mixin就像超级变量,允许你在一步中设置几个属性。 在应用中,我要照亮 header 和页脚,并给它们圆角。 我可以使用的一些 css/scss是:

border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;background-color: lighten($base-color, 10%); 

前三个属性允许通过web包支持 跨浏览器 支持,而CSS3规范则。 最后一行将 background 颜色通过 10%个函数减到。 我可以将它放入 header 和页脚的css部分,但是看起来我们想要经常实现这一点。 第一步是抽象到 mixin:

@mixinround-corner{
 border-radius: 5px;-moz-border-radius: 5px; -webkit-border-radius;
 background-color: lighten($base-color, 10%);}

现在我们包含混合在其中的mixin

#header{
. . .
 @include round-corner();
}
#footer{
. . .
 @include round-corner();
}

呈现页面产生以下结果:

好吧,这里有一些东西。 我们可以很容易地预见使用 LESS 或者更多圆角的它的他元素的圆角混合使用。 屏幕截图是针对白色 background,我不希望它是如这里暗,并且它没有内容太大。 我仍然可以通过parameterising的角半径和减轻的数量来保持我的单个混合:

@mixinround-corner ($radius, $lightenAmount)
{ 
 border-radius: $radius;-moz-border-radius: $radius;-webkit-border-radius: $radius;background-color: lighten($base-color, $lightenAmount);}

现在,我们只提供使用它的值:

#header 
{
. . .
 @include round-corner(10px, 10%);
}
#footer{
. . . 
 @include round-corner(5px, 5%);
}

以下是结果:

@mixin@import 语句之前的@ 指示语句是一个指令。 我们将在本文后面介绍进一步的指令。

构造 CSS

嵌套

到目前为止,我们所取得的是相当有用的,在干( 不要重复自己)的利益中,这是很好的。 现在我们可以看一下如何构造css本身。 让我们看一下菜单系统的css:

ul#menu{ 
 border-bottom: 5px darken($base-color,33%) solid;padding: 0 0 2px;position: relative;margin: 0;text-align: right;}ul#menuli{
 display: inline;list-style: none;}ul#menuli#greeting{
 padding: 10px 20px;font-weight: bold;text-decoration: none;line-height: 2.8em;color: #fff;}

这是非常标准的内容,但有一些缺点: 我有 ul#menuul#menu li<code>ul#menu li#greeting的选择器。 通过这些,我重复( 至少) ul#menu。 另一个问题是,虽然样式相关,但在css结构中并没有明显反映出来。 我现在已经习惯了,但是当我开始在web开发中发现时,我发现它不太容易。 SASS允许我们在. scss 文件中嵌套css选择器,例如ul#menu及其子列表项:

ul#menu 
{ 
 border-bottom: 5px darken($base-color,33%) solid;padding: 0 0 2px;position: relative;margin: 0;text-align: right;li {
 display: inline;list-style: none; }}

我不再需要在子列表项之前包含 ul#menu。 这些元素生成的css与以前语义和语法相同,但是. scss 文件中的嵌套更加明显。 嵌套不仅一层深,我可以嵌套更多的元素,如果我添加了问候语:

ul#menu 
{ 
 border-bottom: 5px darken($base-color,33%);padding: 0 0 2px;position: relative;margin: 0;text-align: right;li {
 display:inline;list-style: none;#greeting 
 {
 padding: 10px 20px;font-weight: bold;text-decoration: none;line-height: 2.8em; 
 color: #fff; }
 }}

查看生成的css突出了嵌套的问题。 ID #greeting 需要紧跟在 li 之后,但生成的css有一个空格: ul#menu li #greeting。要克服这里问题,我们需要在问候语前使用父选择器 &,因这里 上面 变成了

ul#menu 
{ 
 border-bottom: 5px darken($base-color,33%) solid;padding: 0 0 2px; 
 position: relative; 
 margin: 0; 
 text-align: right; 
 li {
 display: inline;list-style: none; &#greeting
 {
 padding: 10px 20px;font-weight: bold;text-decoration: none;line-height: 2.8em; 
 color: #fff; } 
 }}

现在生成的CSS如下所示。 父选择器更常用于伪类,如 a:hovera:link 等,我们期望看到类似的内容:

a 
{ 
. . . 
 &:hover
 { 
. . . 
 } 
 &:link 
 { 
. . . 
 }}
属性嵌套

除了上面的标准嵌套,我们可以嵌套属性,例如设置字体属性,如正文样式的设置:

body {
. . .
 font-size: 75%;font-family: Verdana, Tahoma, Arial,"Helvetica Neue";. . .
 }

嵌套属性,将变成:

body{ 
. . . 
 font: 
 {
 size: 75%;family: Verdana, Tahoma, Arial,"Helvetica Neue", Helvetica, Sans-Serif; }
 ...}
Breaking SCSS文件

css的嵌套是为了向文件添加一些逻辑结构,但是文件本身是长的。 我们可能不需要多个css文件,因为这会增加服务器的工作量,减少页面加载/render。 SASS允许我们通过使用 @import 指令来破坏scss文件。 我们可以这样导入纯css文件或者. scss,如果我们正确设置了 sinlge css文件,性能服务器不受影响。 我们可以将scss文件分解为多个单独的文件,重构的明显地方是微软添加了注释作为标题( 比如 )。 用于在文件中分隔菜单样式的菜单。 我将在示例应用程序中进行这里操作,但是在文章中显示这一点是非常笨重的。 我想为公共声明创建一个额外的. scss 文件,我将使用它作为示例。 记住我们在本文前面创建的参数和圆角 mixin?

$base-color: #FFA0A0; //Define a pink base color$base-text-size: 1em;

I later本文后面将向这个文件添加进一步功能,所以我想将这些特性分离到一个名为" commondeclarations.scss"的文件中,然后单击 studio explorer的"内容"文件夹可视化解决方案,并选择"添加新项目"。 在"站点"( 我必须滚动 YMMV ) 你会发现

将 NAME 更改为" _commondeclarations.scss",然后单击 add,按约定prefix下划线,告诉SASS文件是导入( 部分文件)。 接下来,我只需要从旧的文件中剪切我想要的东西,然后粘贴到新的。 最后一步是将行 @import"CommonDeclarations"; 添加到。 所定义的公共声明的文件注意,我不需要文件扩展名或者_ 前缀。 现在,我可以继续以同样的方式分解主 site.scss 文件。 当项目创建为一个例子时,我将为每个注释创建一个文件,在微软添加的原始css中,这些注释都倾向于处理逻辑分组。

其他指令

如前所述,@ 前缀表示一个指令,它的中还有它的他建立的,允许我们增加我们的干乳性。 我再来看看这些

@extend 指令

这样我们就可以根据另一种方式。 在任何网页上处理验证元素的css是一个很好的例子。 在重构到单独的样式表之后,它目前位于 _ValidationHelpers.scss file: 中

.field-validation-error 
{ 
 color: #ff0000; 
} 
.validation-summary-errors{ 
 color: #ff0000; 
 font-weight:bold;} 

这两个项目都是红色的,如果我们想改变我们想要改变的颜色,这很有可能。 我们可以在这个基本示例中使用一个参数,但是这里还有一个真正的关系。

.field-validation-error{
 color: #ff0000;}
.validation-summary-errors{
 @extend .field-validation-error;
 font-weight: bold;}

我只需要这样做,如果有一个 true 依赖于另一种风格,如果我们希望基样式更改,应该扩展一个。 要注意的一点是,生成的css现在有些不同:

.field-validation-error,
.field-validation-error,. validation-summary-errors {
 color: #ff0000; }
.validation-summary-errors {
 font-weight: bold; }

注意,css已经部分缩小了,这是tlb可以提供的,但是我们不会在本文中介绍它。 虽然可以在相同的block 中扩展扩展样式( 称为链接) 并使用多次扩展,但是任何项目css都不太复杂,可以保证这一点是正确的。 也可以扩展复杂的选择器,比如 a:hover,语法是一样的。 有关扩展的更多文档可以在这里找到

其他指令- 函数和控制流

为了完整,我们将介绍一些更高级的基础。

鍑芥暟

SASS内置函数,例如函数 hsl 接受三个参数,饱和度和亮度,并将它的转换为 RGB:

例如我们将使用hsl函数将主要布局中使用的H1设置为中等紫色颜色。

#headerh1{
. . .
 color: hsl(308, 44%, 28%);. . .
}
这里编译为
#headerh1 {
. . .
 color: #67285e;. . .
}

文档建议使用显式关键字参数,同时也意味着与 上面 相同,它建议以清晰的方式使用:

#headerh1 {
. . .color: hsl($hue: 308, $saturation: 44%, $lightness: 28%);. . .
}

无论使用哪种语法,结果都会使设计 https://www.codeproject.com/script/Forums/Images/smiley_smile.gif 更加

扩展可用函数

我们可以扩展函数列表以添加自己的函数。 假设我们要将宽度标准化为 10像素的倍数。 我们可以提供一个函数来执行这里操作:

$base-width: 10px; @function keith-width-multiplier($multiple) 
{ 
 @return $multiple * $base-width; 
}

注意我已经将函数名与 keith prefixed,SASS文档建议你将所有自定义函数与前面提到的一些自定义函数( 比如 hsl 和) 进行前缀。 我的名字是在我自己的时间里工作的,但我决定用我自己的名字,并使用我自己的名字。

现在,以一个假设的例子为例:

.foo{
 width: keith-width-multiplier(3);}

这将导致类foo具有宽度为 30像素的所有东西。

控制流指令

这些是SASS中的高级功能,即使文档建议你不应该正常使用这些功能: 我已经把它们包括在函数中了,SASS语法在功能上是完全的。 自定义函数 上面 一样,我还没有在示例代码中包含示例 below,它们只是不需要。 接下来的例子也可以能不是实现所需的( 它们不包含在示例代码中)的最好方法,它们应该尽可以能清晰而不是真实世界。

@if

就像我们所期望的那样这允许一个决定。 假设我们想根据变量 $backgroundcolor 设置一个 span的颜色。 如果是白色,color 应该是 black,如果是 $backgroundcolor black color 应该是白色,否则 color 应该是灰色。

span 
{ 
 @if $backgroundcolor = #FFFFFF {
 color:#000000; }
 @elseif$backgroundcolor= #000000 {
 color:#FFFFFF; }
 @else {
 color:#696969; }}

自然,上面 将从实际情况中的某些重构获益 !

@for 和字符串插值 #{...}

这是我们的第一个循环构造,它在值之间循环。 这样我们甚至可以创建多个css定义。 在本示例中,我们将创建标题h1到h4的样式,并减少字体大小:

$biggest-width: 8em; @for$ifrom1through4{ 
 h#{$i} {
 font-size: $biggest-width/$i;}}
编译时,将生成 h1:
h1 { 
 font-size: 8em; } h2 { 
 font-size: 4em; } h3 {
 font-size: 2.667em; }h4 {
 font-size: 2em; }}

注意这个术语 #{$i},它接受值( 在thise案例 $i 中) 和直接将它输出到css中。 它不仅可以用于循环中,还可以用于属性名和值。 对于四个标题类型,另一种情况是:这个循环。 如果你可以想象设置几个 table 列或者行样式,循环构造会更有意义。

@while

执行类似于for循环的类似函数。 主流语言中的循环一样,值必须在循环中更改,从而使条件终止。 我们可以将循环 上面 编写为:

$val: 1;@while$val=4 {
 h#{$val} {font-size: $biggest-width/$val<}}

输出与for循环相同,但在这种情况下是 LESS 优雅: 只是因为可以,它并不意味着应该在实际情况下使用 https://www.codeproject.com/script/Forums/Images/smiley_smile.gif.,而for循环可能会使用更复杂的循环。

@each

每次迭代一个列表,列表可以是任何。 为简单起见,我想使用创建. red 类样式的示例,它的中包含红文本。black 和绿色:

@each$colorinredblackgreen<{
 .#{$color&} { color: $color;}}

输出:

.red { 
 color: red}.black {
 color: black;} 
.green { 
 color: green; }

在本例中,我们将变量 $color 赋给字符串列表中的值

多年前,当我开始网站devving时,我在 [then] 主要的C++ background 中。 为什么我需要不断重复调色板中的值? 为什么不能基于另一个样式的颜色或者调色板值的颜色? 为什么css语法不能很好地反映选择器的嵌套? 所有这些问题都是由SASS回答的:

  • 参数
  • 函数和 mixin
  • 嵌套 sytax

另外,SASS允许我们定义自己的函数,允许扩展点。 它还允许我们将. css 分解为逻辑文件块,而不会影响性能。 最后,SASS允许我们向CSS添加控制流,几乎使它成为 图灵完备(Turing-complete)。

如果你有一个允许你使用它的环境,而且这个栏很低,那么 SASS ( 或者SASS技术) 几乎是没有头脑的。 它使你可以简化和解决你对你所满意的程度,并且没有任何真正的成本。

修订历史记录

  • 24/07/2012初始版本。
  • 25/07/2012添加缺少的示例解决方案 !

GET  SASS  SAS  
相关文章