这是CSS,还有更多内容。
与Node.js一起使用:
npm install -g less
> lessc styles.less styles.css
或浏览器:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>
与Node.js一起使用:
npm install -g less
> lessc styles.less styles.css
或浏览器:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>
Less(代表Leaner样式表)是CSS的向后兼容语言扩展。这是Less(语言)和Less.js(将您的Less样式转换为CSS样式的JavaScript工具)的官方文档。
因为Less看起来就像CSS,所以学习起来很容易。Less不仅为CSS语言增加了一些方便的补充,这也是可以如此快速地学习它的原因之一。
Less会为CSS增加什么?这是功能的快速概述。
这些是不言自明的:
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
输出:
#header {
width: 10px;
height: 20px;
}
混合是一种将一组属性从一个规则集中包含(“混入”)到另一规则集中的方式。假设我们有以下课程:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
我们想在其他规则集中使用这些属性。好吧,我们只需要在需要属性的类的名称中输入,如下所示:
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}
.bordered
该类的属性现在将同时出现在#menu a
和中.post a
。(请注意,您也可以将其#ids
用作mixin。)
更少使您能够使用嵌套而不是级联或与级联结合使用。假设我们有以下CSS:
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
在Less中,我们也可以这样写:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
结果代码更加简洁,并且模仿了HTML的结构。
您也可以使用此方法将伪选择器与mixin捆绑在一起。这是经典的clearfix hack,重写为mixin(&
代表当前选择器父对象):
.clearfix {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
诸如@media
或的规则@supports
可以与选择器嵌套的方式嵌套。该规则置于最上方,并且相对于同一规则集中其他元素的相对顺序保持不变。这称为起泡。
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
width: 800px;
}
}
输出:
.component {
width: 300px;
}
@media (min-width: 768px) {
.component {
width: 600px;
}
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
.component {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
.component {
width: 800px;
}
}
算术运算+
,-
,*
,/
可以在任意数量,颜色或可变的操作。如果可能,数学运算会在加,减或比较它们之前考虑单位并转换数字。结果具有最左侧明确说明的单位类型。如果转换是不可能的或没有意义,则忽略单位。不可能的转换示例:px转换为cm或rad转换为%。
// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px
// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%
乘法和除法不会转换数字。在大多数情况下,这是没有意义的-长度乘以长度即可得出一个区域,而css不支持指定区域。Less会按原样对数字进行运算,并为结果明确指定单位类型。
@base: 2cm * 3mm; // result is 6cm
您还可以对颜色进行算术运算:
@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355
但是,您可能会发现Less's Color函数更有用。
发布了v3.0.0
为了CSS兼容性,calc()
不评估数学表达式,但将评估嵌套函数中的变量和数学。
@var: 50vh/2;
width: calc(50% + (@var - 20px)); // result is calc(50% + (25vh - 20px))
转义允许您将任意字符串用作属性或变量值。除插值外,里面的任何东西~"anything"
或~'anything'
按原样使用。
@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}
结果是:
@media (min-width: 768px) {
.element {
font-size: 1.2rem;
}
}
注意,从Less 3.5开始,您可以简单地编写:
@min768: (min-width: 768px);
.element {
@media @min768 {
font-size: 1.2rem;
}
}
在3.5+版本中,不需要以前需要“引用转义”的许多情况。
Less提供了各种功能,可以转换颜色,操纵字符串和进行数学运算。它们在功能参考中有完整记录。
使用它们非常简单。下面的示例使用百分比将0.5转换为50%,将基本色的饱和度增加5%,然后将背景色设置为变亮25%并旋转8度的背景色:
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
(不要与CSS@namespace
或名称空间选择器混淆)。
有时,出于组织目的或为了提供一些封装,您可能希望对混合包进行分组。您可以在Less中直观地做到这一点。假设您要将的一些mixin和变量捆绑在下#bundle
,以便以后重用或分发:
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white;
}
}
.tab { ... }
.citation { ... }
}
现在,如果我们想混入我们的.button
类#header a
,我们可以这样做:
#header a {
color: orange;
#bundle.button(); // can also be written as #bundle > .button
}
注意:如果不想让它出现在CSS输出中()
(例如#bundle()
),请追加到您的名称空间(例如)#bundle .tab
。
从Less 3.5开始,您还可以将mixin和规则集用作值的映射。
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
预期输出:
.button {
color: blue;
border: 1px solid green;
}
Less中的作用域与CSS非常相似。首先在本地查找变量和mixin,如果找不到它们,则它们是从“父”作用域继承的。
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
像CSS自定义属性一样,mixin和变量定义不必放在引用它们的行之前。因此,以下Less代码与前面的示例相同:
@var: red;
#page {
#header {
color: @var; // white
}
@var: white;
}
可以使用块样式注释和嵌入式注释:
/* One heck of a block
* style comment! */
@var: red;
// Get in line!
@var: white;
导入几乎可以预期。您可以导入.less
文件,并且其中的所有变量都将可用。扩展名是为.less
文件指定的。
@import "library"; // library.less
@import "typo.css";