c 语言编程学习编程环境_更少学习：可编程样式表语言

最新推荐文章于 2024-09-20 18:50:56 发布

daique1908

最新推荐文章于 2024-09-20 18:50:56 发布

阅读量181

点赞数

文章标签： python java css 编程语言 javascript ViewUI

c 语言编程学习编程环境

我不喜欢CSS。干净利落。它使World在Web上运转，但语言具有限制性且难以管理。现在是时候精通该语言，并在LESS的帮助下使用动态CSS来使其更加有用。

让我马上用一个例子来说明我的观点。与其使用＃FF9F94获得深桃红色，不如将颜色值存储在变量中并仅使用该变量会更容易吗？如果要重新着色网页，只需在一个位置更改变量的值即可。

换句话说：如果我们可以在CSS中使用一些编程和逻辑使其成为更强大的工具，那将是非常好的。好消息是，借助LESS我们可以做到！

什么是更少？

LESS是CSS的超集。这意味着所有CSS代码都是有效的LESS代码，但是LESS中还有一些其他元素在CSS中无效。这非常好，因为您现有CSS已经是有效的LESS代码，从而最大程度地减少了使用LESS的学习难度。

LESS为CSS添加了许多急需的动态属性。它将变量，操作，类似函数的元素甚至Javascript引入了组合。通过使您能够以模块化的思维方式编写样式表，这将使您的生活无忧。

如何使用LESS

有两种使用LESS的方法。您可以创建一个LESS文件并使用Javascript文件按需转换它，也可以对其进行预编译并使用生成CSS文件。如果因为看到“编译”一词而感到害怕（我一直都这样），请不要去任何地方，这非常容易。

使用LESS Javascript文件

首先前往LESS网站并获取Javascript文件。拥有它之后，您需要做的就是将其链接到您的页面，就像其他任何Javascript文件一样。

<script src="less.js" type="text/javascript"></script>

接下来，创建一个扩展名为.less的文件，并使用以下代码将其链接到您的页面：

<link rel="stylesheet/less" type="text/css" href="style.less">

确保在Javascript文件之前链接LESS文件。

设置完成后，您可以将现有CSS代码粘贴到LESS文件中，或者只编写一些新规则-它应该像普通CSS一样工作。

编译LESS文件

尽管这比较繁琐，但在某些情况下是首选。 LESS通过获取您编写的所有LESS代码并将其即时转换为CSS来工作。无需按需执行此操作，我们可以转换LESS文件，保存CSS输出并使用它，而不是在每次加载页面时按需进行转换。

如果您是Mac用户，则可以使用LESS.app ，这是一个小型应用程序，可以自动检测您的所有LESS文件，每当您保存它们时，都会将它们转换为具有相同名称CSS文件。这使您可以继续链接到页面上CSS文件，同时仍然利用LESS的潜力。

如果您使用的是Windows，则可以使用Winless ，其工作方式几乎相同。

如果您更喜欢命令行工具，则可以使用节点软件包管理器（NPM）安装LESS。 LESS网站上提供了一些文档。您也可以直接从Github存储库中获取代码。

利用LESS的力量

最后，让我们从有趣的地方开始-编写LESS代码。如您所见，它很容易阅读和理解。它使用与CSS相同的语法样式，因此您应该都熟悉。

变数

LESS中的变量的工作方式与PHP或大多数其他编程语言中的工作方式完全相同。您可以使用它们来存储值，然后在需要时使用变量而不是值本身。

@header-font: Georgia;
h1, h2, h3, h4 {
	font-family: @header-font; 
}
.large {
	font-family:@header-font;
}

在上面的示例中，我们定义了@header-font变量，并为其分配了值“ Georgia”。现在，只要想使用Georgia字体，就可以使用此变量。如果我们决定使用Trebuchet MS作为标题字体，则无需遍历整个文件，只需更改变量的值即可。

在为网站定义颜色时，我发现变量很有用。在过去的美好时光（不久之前），我曾经做过这样的事情：

/* 
 Colors for my Website 
 	#ff9900 - Orange - used for links and highlighted items
    #cccccc - Light Gray - used for borders     
    #333333 - Dark Black - Used for dark backgrounds and heading text color
    #454545 - Mid Black - Used for general text color
*/
body {
	background: #333333;        
	color: #454545;
}
a { 
	color:#ff9900;
}
h1, h2, h3, h4, h5, h6 { 
	color: #333333;
}

像这样记录您的颜色没有错，这是一个好习惯，问题在于，由于它与样式表的功能无关，因此除了记录本身之外没有其他用途。如果您在2,000行之后决定使用其他颜色，然后在3,567行改变主意，则很难确保使用正确的颜色并且文档也正确无误。

使用LESS，我们可以修改工作流程并实际使用 “文档”，而不是在过程中保持被动状态。

/* Colors for my Website */
@color-orange: #ff9900;
@color-gray_light: #cccccc; 
@color-black_dark: #333333;  
@color-black_medium: #454545;  

body { 
	background: @color-black_dark;
	color: @color-black_medium;
}
a {
	color:@color-orange;
}
h1, h2, h3, h4, h5, h6 {
	color: @color-black_dark;
}

可变范围

变量的范围是指变量可用的位置。如果您在LESS文件的开头定义了一个变量，该变量将对您在其后编写的任何代码可用。

您还可以在CSS规则内定义变量。在这种情况下，该变量在此规则集之外不可用；它只能在本地使用。

a {
	@color: #ff9900;
	color:@color;
}
button { 
	background: @color;
}

在上面的示例中，由于存在错误，LESS文件将不会转换， @color未定义为在按钮元素内使用。如果变量定义的元素的和内部的元件的外部的本地定义遵。

@color: #222222;
a {
	@color: #ffffff;
	color:@color;
} 
button {
	background: @color; 
}

在上面的示例中，链接将颜色为白色，按钮将具有黑色背景。

可变变量

如果您习惯使用PHP进行编码，那么您会知道可以使用另一个变量来定义变量名。

@color-chirstmas_red: #941f1f;
@name-of-color: "color-chirstmas_red";
color: @@name-of-color;

对我个人而言，这没什么用处（没有双关语），因为不使用循环就减少了变量的功能，但是我敢肯定有一些聪明的例子在使用循环。

变量VS变量

需要注意的重要一点是，与您刚刚阅读的内容相反，LESS中的变量更像是常量。这意味着它们只能定义一次-与可以定义多次的变量相反。

运作方式

借助LESS中的操作，您可以实现极其精细和精确的控制。这背后的想法很简单：

.button{
	@unit: 3px;
	border:@unit solid #ddd;
	padding: @unit * 3;
	margin: @unit * 2;
}

上面的代码将变量@unit定义为3px。然后，它继续将边界定义为具有恰好该宽度的边框，将填充定义为具有该宽度的三倍，将边距定义为具有该宽度的两倍。

运算可以是乘法，除法，加法和减法。要创建一个边框，边框随着您沿其周长顺时针移动而越来越宽，可以使用以下代码。

.box{
	@base_unit: 1px;
	border: @base_unit @base_unit + 1 @base_unit + 2 @base_unit + 3
}

色彩管理

我最喜欢的LESS功能与颜色管理有关。您可以使用操作来混合颜色，并且有一些特定的颜色功能。

色彩操作

如果要更改颜色的值，可以通过减去或添加其他颜色来进行更改。

@color: #941f1f;    
button {
	background: #941f1f + #222222;              
	border: #941f1f - #111111;
}

在后台进行的上述操作会将每个HEX值增加2。这将导致“ B64141”，它是原始颜色的较浅变化。边框中的操作会将每个HEX值减小1，导致颜色变深：“ 830E0E”。

实际上，在很多情况下，我们从基色开始，并且需要稍微变暗或变亮的版本。

@color-button: #d24444;
input.submit {  
	color:#fff;
	background:@color-button;   
	border:1px solid @color-button - #222;
	padding:5px 12px;
}

这将创建一个红色按钮，其边框略深。这是您可能经常需要的事情，不必单独定义边框颜色会很有帮助。

变量的作用在这里更加明显。如果要重新着色网站并将@color-button值更改为绿色，不仅按钮的背景会更改，而且边框也会更改，并变为绿色的更深版本。

另一个很好的用途是创建渐变。我通常选择一个中点颜色并从中定义渐变。我将开始点稍微变浅，将结束点稍微变暗。这将导致一个很好的过渡，如下所示：

@color: #faa51a;
.button { 
	background: -webkit-gradient(linear, left top, left bottom, from(@color + #151515), to(@color - #151515));
	background: -moz-linear-gradient(top,  @color + #151515,  @color - #151515);
}

颜色功能

您可以使用颜色做更多的事情。 LESS允许您在通道级别上进行操作。您可以变亮，变暗，饱和，去饱和，淡入，淡出和旋转颜色。请看以下示例和图像，以查看它们各自的功能。

@color: #3d82d1;
.left_box {  
	background:lighten(@color, 20%);
}
.right_box {
	background:darken(@color, 20%);
}

@color: #3d82d1;.left_box {
	background: desaturate(@color, 18%);
}
.middle_box {   
	background: @color;
}
.right_box {
	background: saturate(@color, 18%);
}

@color: #3d82d1;.left_box {
	background: spin(@color, 25%);
}
.middle_box { 
	background: @color;
}
.right_box {
	background: spin(@color, -25%);
}

提取颜色信息

LESS中的每种颜色都将转换为HSL（色相，饱和度，亮度），以使您能够在通道级别上对其进行管理。因此，您可以以更明智的方式操作颜色，还可以直接访问颜色的通道信息：

@color = #167e8a;
hue(@color);
saturation(@color);
lightness(@color);

这看起来像是微观管理-为什么只要输入十六进制值就为什么需要此信息？如果您像大多数人一样，十六进制值并不是您自然而然的。十六进制值映射RGB光谱。前两个字符控制红色的数量，后两个字符控制绿色的数量，后两个字符控制蓝色的数量。

显然＃ff0000是红色的，因为这将是RGB（255,0,0）。吨的红色，没有绿色，没有蓝色。但是，如果仅看到＃1f6b2d，则很难理解这是深绿色。使用HSL刻度，色调可以控制您所要称呼的颜色，其余的仅用于设置色调（这并不完全正确，但从所有意图和目的来看都是如此）。

考虑到这一点，如果您发现像＃e147d4这样的洋红色-紫色很好的颜色，则可以很容易地找到具有相同色相的其他颜色。假设您要创建＃e147d4的更柔和，更柔和的版本，可以执行以下操作：

@color: #e147d4;
@new_color: hsl(hue(@color), 35%, 77%);

这种新颜色将具有相同的色相，但具有不同的饱和度和亮度。结果将是＃c480bf，如果您只是想在十六进制中，则很难从＃e147d4到达。

组合功能

LESS允许您使用函数内部的函数，因此，如果要降低饱和度并旋转颜色，可以像这样：

@color: #c480bd;
.class {
	background-color: desaturate(spin(@color, 18), 12%);}

套料

编写CSS时，您使用级联样式。要更改博客文章中段落的边距，您只能使用以下代码。

article.post p{
	margin: 0 0 12px 0;
}

这种方法没有错，但是当您还想在同一元素内更改链接，块引用，标题，预格式化的文本等时，则需要在每个元素前加上“ article.post”前缀。这使我们的代码编写起来更加繁琐且难以阅读。

在LESS中，我们可以嵌套这些规则，从而使样式表更简短，更符合逻辑。观察一下。

article.post {
	p{
		margin: 0 0 12px 0;
	}   
	a {
		color: red; 
	}
	a:hover {
		color: blue;
	}   
	img {
		float:left; 
	}
}

看看我在那里做什么？顺便说一下，制表符不是必需的，但是它使它更加清晰易读。您可以根据自己的喜好嵌套规则，这省去了以后的麻烦。您是否曾经想过更改某物的填充，但却因为不知道它可能会影响哪些元素而感到伤痕累累？通过使用嵌套，您可以从CSS中消除很多猜测。

a {  
	color:red;
}
p {
	margin:0px;
}
article {
	a {
		color: green;       
	}    
	p { 
		color: #555;
		a { 
			color:blue; 
		}   
	}
}

混合蛋白

在更短的混入是功能，将节省您最打字。您是否曾经创建过仅将左上角和右上角进行圆角化的圆形边界？

.tab { 
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;       
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-topright: 6px; 
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

糟糕...每次...借助LESS，您可以通过创建mixin来更改所有功能。 Mixins是可重用的元素，您可以将其作为规则添加到任何其他元素中。它们的优点是无需学习其他语法。

.rounded_top {
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius-topleft: 6px; 
	-moz-border-radius-topright: 6px;
	border-top-left-radius: 6px; 
	border-top-right-radius: 6px;
}
.tab {  
	background: #333;
	color:#fff; 
	.rounded_top;
}
.submit { 
	.rounded_top;
}

在上面的代码中，我们将.rounded_top元素定义为在顶部具有圆角。当我们将其作为mixin添加到任何其他元素中时（请参见.tab ），我们基本上是在导入为此创建的规则。由于mixin的语法，您可以将任何旧元素用作mixin。

.rounded_top {   
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;       
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-topright: 6px;   
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
.tab {
	background: #333;   
	color:#fff;
	.rounded_top;
}
.submit {
	.tab;       
	background: red;
}

现在， .submit元素CSS规则将要求顶部带有圆角，白色和红色背景（原始的＃333被覆盖）。

参数混合

参数混入听起来非常复杂，但是它们以非常简单的方式解决了问题。在上面的示例中，您看到了如何定义元素的上角半径为6px的元素。如果我们希望元素的半径为3px怎么办？我们应该为所有像素值声明单独的mixin吗？答案当然不是，我们应该使用参数混合！

这些功能类似于函数，因为您不仅可以创建一个混合，而且可以在调用它时将值传递给它。让我们重写边界半径示例，看看它是如何完成的。

.rounded_top(@radius) {   
	-webkit-border-top-left-radius: @radius;
	-webkit-border-top-right-radius: @radius;   
	-moz-border-radius-topleft: @radius;
	-moz-border-radius-topright: @radius;
	border-top-left-radius: @radius;
	border-top-right-radius: @radius;
}
.tab {
	background: #333;   
	color:#fff;
	.rounded_top(6px);
}
.submit {
	.rounded_top(3px);
}

上面的代码将使tab元素的半径为6px，而Submit元素的半径为3px。

默认值

如果通常使用相同的边界半径，但在某些情况下需要使用不同的边界半径，则可以为mixin提供默认值。

.rounded_top(@radius:6px) {      
	-webkit-border-top-left-radius: @radius;
	-webkit-border-top-right-radius: @radius;   
	-moz-border-radius-topleft: @radius;
	-moz-border-radius-topright: @radius;
	border-top-left-radius: @radius;
	border-top-right-radius: @radius;
}
.tab { 
	background: #333;   
	color:#fff;
	.rounded_top;
}

.submit {
	.rounded_top(3px);
}

在此示例中，tab元素将接收默认的6px边框半径，但是Submit元素将根据需要接收3px的边框半径。

多个参数

您还可以使用多个参数来定义更复杂的混合。

.radius(@radius:6px) {
	-webkit-border-radius: @radius;     
	-moz-border-radius: @radius; 
	border-radius: @radius;
}
.button(@radius:3px, @background: #e7ba64, @padding: 4px) {
	.radius(@radius);   
	background:@background;
	border: 1px solid @background - #222;       
	padding: @padding;
}
.read_more {   
	.button(0px);
}

每当使用上述示例使用.read_more类创建元素时， .read_more使用4px填充，＃e7ba64的背景颜色和0px的边框半径格式化该元素。

一次使用所有参数

使用参数时，您还有一个选择是一次全部使用全部。 CSS中的速记属性具有多个值，一个接一个地写。

div {
	border:1px solid #bbb;
}

您可以使用函数为所有必需的元素赋予灰色边框，如下所示：

.gray_border(@width: 1px, @type: solid, @color: #bbb){
	border:@arguments;
}
div {
	.gray_border(2px, dashed);
}

@arguments是一个特殊的关键字，它将按给定的顺序一个接一个地输出所有参数。在上述情况下，您的LESS文件生成CSS代码为：

div {
	border:2px dashed #bbb;     
}

没有参数的参数混合

也可以在不实际使用任何参数的情况下使用参数混合。当您不希望mixin显示在您CSS代码中，但您确实希望将其规则应用于所使用的元素时，将使用此方法。

.alert {
	background: red;    
	color: white;
	padding:5px 12px;
}
.error_message {
	.alert;     
	margin: 0 0 12px 0;
}

上面CSS输出如下：

.alert { 
	background: red;
	color: white;       
	padding:5px 12px;
}
.error_message {
	background: red;
	color: white;
	padding:5px 12px;
	margin: 0 0 12px 0;
}

如果使用空参数集，则可以隐藏.alert类。

.alert() {
	background: red;    
	color: white;
	padding:5px 12px;
}
.error_message {
	.alert;     
	margin: 0 0 12px 0;
}

从上面的LESS代码生成CSS将是：

.error_message {       
	background: red;
	color: white; 
	padding:5px 12px;
	margin: 0 0 12px 0;
}

这对于减少CSS文件的大小非常有用。如果.alert类从不直接在任何元素上使用，则只要将其属性作为混合传递给所需的元素，就没有理由将其包含在结果样式表中。

命名空间

编程语言中的命名空间通常用于将功能包组合在一起。通过使用mixins捆绑代码，我们可以在LESS中实现相同的目的。

#my_framework {
	p {
		margin: 12px 0;
	}
	a {
		color:blue;
		text-decoration: none;
	}           
	.submit {
		background: red;
		color: white;
		padding:5px 12px; 
	}    
}

在基于您的框架的新网站上开始工作时，可以添加此#my_framework捆绑包并使用它，而不会弄乱您可能已经拥有或将来要添加的任何其他样式。

.submit_button { 
	#my_framework > .submit;
}

这也是启用快速主题更改和修改的好方法。如果您为公司开发了多个主题以按需用作模板，则可以将所有主题作为捆绑包包含在同一LESS文件中，并使用所需的主题。

#fw_1 {        
	p {
		margin: 12px 0;     
	}  
	a { 
		color:blue;
		text-decoration: none;
	} 
	.submit { 
		background: red;
		color: white;
		padding:5px 12px;
	}
}

#fw_2 { 
	p {
		margin: 8px 0;      
	}    
	a { 
		color:red;
		text-decoration: underline; 
	}
	.submit {
		background: blue;
		color: white;
		padding:8px 20px;
	}
}
.submit_button {
	#fw_2 > .submit;
}

字符串插值

字符串插值只是一个花哨的词，这意味着可以将任意字符串存储在变量中，然后在属性值中使用。

@url: "http://mycompany.com/assets/";background-image: url("@{url}/sprite.png");

当创建集中式框架并确保从正确的位置提取资源时，以上内容可能会非常有用。

转义

在某些情况下，您将需要使用无效CSS的属性或值（IE规则有人吗？）。您可能已经在我们的渐变示例中注意到，我不适合Internet Explorer用户。

如果要在IE中创建渐变，则需要执行以下操作：

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#444444');

以上是无效CSS，因此LESS处理将无法完成。在这种情况下，您可以转义该值，这将使LESS跳过它并继续前进。这样做的结果是，无需任何处理即可将其输出到CSS。

.button {
	background: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#444444));   
	background: -moz-linear-gradient(top,  #666666,  @color - #444444);
	filter:  ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#444444')";}

您需要做的就是将该部分用引号引起来，并在其前面加上波浪号字符。本部分不会通过LESS处理器，因此不会抛弃它。

输入

就像使用普通CSS一样，您可以导入文件。 LESS使您可以使用以下语法导入CSS和LESS文件：

@import "reset.min.css";
@import "framework.less";
@import "widgets";

第一次导入非常明显。这将导入reset.min.css中定义CSS规则，而无需通过LESS解析器运行它们。

第二次导入将提取framework.less的内容，并像处理其他LESS规则一样对其进行处理。

第三次导入与第二次导入基本相同。如果未提供扩展名，LESS会将其假定为LESS文件。

注释

不出所料，LESS中提供的多行注释的方式与CSS中使用的方式相同。另外，LESS允许单行注释像在PHP中一样使用；通过使用双正斜杠。

/*
	This is my main LESS file.          
	It governs how most of the site looks.
*/      
body {              
	padding:0px; // This resets the body padding 
}

少了什么东西？

尽管LESS很棒，但是当您开始使用它时，您会发现一些缺点，尽管这些缺点并不十分麻烦。我希望看到的一个功能是预处理（我同意，这没有任何意义）。

还记得如何可以对行进行转义以免它们穿过解析器吗？由于LESS当前的处理方式，我们不能真正使用具有可变颜色名称的渐变。

filter:  ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20')";

上面的方法工作得很好，但是必须对颜色进行硬编码。由于转义了该行，因此不处理变量。这将是不错的，其中指定的字符串逃过但变量处理前的输出发送到CSS文件的选项。

我希望看到的另一个功能是选择器和其他元素的变量命名，而不仅仅是值。当我们查看名称空间时，我们使用了类似于以下内容的规则来添加规则。

a {
	#my_framework > .link       
}

如果我们可以这样做，那就太好了：

@framework: "#my_framework";        
a {
	@{framework} > .link        
}

这将使我能够将所有框架添加到单个LESS文件中，然后通过简单地更改变量的值来选择一个。

很少有错误，还有其他一些缺点，但是总体而言，LESS非常有用且非常稳定。

结论

与所有新技术和方法一样，有过度使用的冲动。还记得Web 2.0时代初期的反光徽标吗？

您不必嵌套所有规则，不必为所有内容创建变量，也不必为简单边界宽度的混合创建变量。

如果您不知道何时不使用LESS的强大功能，您的LESS代码将像普通CSS一样难以读取，并且难以维护。诀窍是要知道何时使用给定的函数和方法，以及何时最好使用常规的旧CSS。

另外，我建议不要在生产中使用LESS。它没有任何问题，但是根本没有理由加载LESS文件和脚本来处理它。显然，该脚本非常快，但是我敢肯定它不会比没有它更快。我通常使用LESS开发我的所有网站，当我感到高兴时，我只是获取输出，将其缩小并在常规CSS文件中使用。

翻译自: https://webdesign.tutsplus.com/articles/get-into-less-the-programmable-stylesheet-language--webdesign-5216