Heim > Web-Frontend > HTML-Tutorial > less语法_html/css_WEB-ITnose

less语法_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:35:53
Original
1270 Leute haben es durchsucht

摘自 http://www.bootcss.com/p/lesscss/#docs 

LESS 语法

LESS 做为 CSS 的一种形式的扩展,它并没有阉割 CSS 的功能,而是在现有的 CSS 语法上,添加了很多额外的功能,所以学习 LESS 是一件轻而易举的事情,果断学习之!

变量

很容易理解:

@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header { color: @light-blue; }
Nach dem Login kopieren

输出:

#header { color: #6c94be; }
Nach dem Login kopieren

甚至可以用变量名定义为变量:

@fnord: "I am fnord.";@var: 'fnord';content: @@var;
Nach dem Login kopieren

解析后:

content: "I am fnord.";
Nach dem Login kopieren

请注意 LESS 中的变量为完全的 ‘常量’ ,所以只能定义一次.

混合

在 LESS 中我们可以定义一些通用的属性集为一个class,然后在另一个class中去调用这些属性. 下面有这样一个class:

.bordered {  border-top: dotted 1px black;  border-bottom: solid 2px black;}
Nach dem Login kopieren

那如果我们现在需要在其他class中引入那些通用的属性集,那么我们只需要在任何class中像下面这样调用就可以了:

#menu a {  color: #111;  .bordered;}.post a {  color: red;  .bordered;}
Nach dem Login kopieren

.bordered class里面的属性样式都会在 #menu a 和 .post a中体现出来:

#menu a {  color: #111;  border-top: dotted 1px black;  border-bottom: solid 2px black;}.post a {  color: red;  border-top: dotted 1px black;  border-bottom: solid 2px black;}
Nach dem Login kopieren

任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入.

带参数混合

在 LESS 中,你还可以像函数一样定义一个带参数的属性集合:

.border-radius (@radius) {  border-radius: @radius;  -moz-border-radius: @radius;  -webkit-border-radius: @radius;}
Nach dem Login kopieren

然后在其他class中像这样调用它:

#header {  .border-radius(4px);}.button {  .border-radius(6px);  }
Nach dem Login kopieren

我们还可以像这样给参数设置默认值:

.border-radius (@radius: 5px) {  border-radius: @radius;  -moz-border-radius: @radius;  -webkit-border-radius: @radius;}
Nach dem Login kopieren

所以现在如果我们像这样调用它的话:

#header {  .border-radius;  }
Nach dem Login kopieren

radius的值就会是5px.

你也可以定义不带参数属性集合,如果你想隐藏这个属性集合,不让它暴露到CSS中去,但是你还想在其他的属性集合中引用,你会发现这个方法非常的好用:

.wrap () {  text-wrap: wrap;  white-space: pre-wrap;  white-space: -moz-pre-wrap;  word-wrap: break-word;}pre { .wrap }
Nach dem Login kopieren

输出:

pre {  text-wrap: wrap;  white-space: pre-wrap;  white-space: -moz-pre-wrap;  word-wrap: break-word;}
Nach dem Login kopieren

@arguments 变量

@arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {  box-shadow: @arguments;  -moz-box-shadow: @arguments;  -webkit-box-shadow: @arguments;}.box-shadow(2px, 5px);
Nach dem Login kopieren

将会输出:

  box-shadow: 2px 5px 1px #000;  -moz-box-shadow: 2px 5px 1px #000;  -webkit-box-shadow: 2px 5px 1px #000;
Nach dem Login kopieren

模式匹配和导引表达式

有些情况下,我们想根据传入的参数来改变混合的默认呈现,比如下面这个例子:

.mixin (@s, @color) { ... }.class {  .mixin(@switch, #888);}
Nach dem Login kopieren

如果想让.mixin根据不同的@switch值而表现各异,如下这般设置:

.mixin (dark, @color) {  color: darken(@color, 10%);}.mixin (light, @color) {  color: lighten(@color, 10%);}.mixin (@_, @color) {  display: block;}
Nach dem Login kopieren

现在,如果运行:

@switch: light;.class {  .mixin(@switch, #888);}
Nach dem Login kopieren

就会得到下列CSS:

.class {  color: #a2a2a2;  display: block;}
Nach dem Login kopieren

如上,.mixin就会得到传入颜色的浅色。如果@switch设为dark,就会得到深色。

具体实现如下:

  • 第一个混合定义并未被匹配,因为它只接受dark做为首参
  • 第二个混合定义被成功匹配,因为它只接受light
  • 第三个混合定义被成功匹配,因为它接受任意值
  • 只有被匹配的混合才会被使用。变量可以匹配任意的传入值,而变量以外的固定值就仅仅匹配与其相等的传入值。

    我们也可以匹配多个参数:

    .mixin (@a) {  color: @a;}.mixin (@a, @b) {  color: fade(@a, @b);}
    Nach dem Login kopieren

    Now if we call .mixin with a single argument, we will get the output of the first definition, but if we call it with two arguments, we will get the second definition, namely @a faded to @b.

    引导

    当我们想根据表达式进行匹配,而非根据值和参数匹配时,导引就显得非常有用。如果你对函数式编程非常熟悉,那么你很可能已经使用过导引。

    为了尽可能地保留CSS的可声明性,LESS通过导引混合而非if/else语句来实现条件判断,因为前者已在@media query特性中被定义。

    以此例做为开始:

    .mixin (@a) when (lightness(@a) >= 50%) {  background-color: black;}.mixin (@a) when (lightness(@a) < 50%) {  background-color: white;}.mixin (@a) {  color: @a;}
    Nach dem Login kopieren

    when关键字用以定义一个导引序列(此例只有一个导引)。接下来我们运行下列代码:

    .class1 { .mixin(#ddd) }.class2 { .mixin(#555) }
    Nach dem Login kopieren

    就会得到:

    .class1 {  background-color: black;  color: #ddd;}.class2 {  background-color: white;  color: #555;}
    Nach dem Login kopieren

    导引中可用的全部比较运算有: > >= = =< <。此外,关键字true只表示布尔真值,下面两个混合是相同的:

    .truth (@a) when (@a) { ... }.truth (@a) when (@a = true) { ... }
    Nach dem Login kopieren

    除去关键字true以外的值都被视示布尔假:

    .class {  .truth(40); // Will not match any of the above definitions.}
    Nach dem Login kopieren

    导引序列使用逗号‘,’?分割,当且仅当所有条件都符合时,才会被视为匹配成功。

    .mixin (@a) when (@a > 10), (@a < -10) { ... }
    Nach dem Login kopieren

    导引可以无参数,也可以对参数进行比较运算:

    @media: mobile;.mixin (@a) when (@media = mobile) { ... }.mixin (@a) when (@media = desktop) { ... }.max (@a, @b) when (@a > @b) { width: @a }.max (@a, @b) when (@a < @b) { width: @b }
    Nach dem Login kopieren

    最后,如果想基于值的类型进行匹配,我们就可以使用is*函式:

    .mixin (@a, @b: 0) when (isnumber(@b)) { ... }.mixin (@a, @b: black) when (iscolor(@b)) { ... }
    Nach dem Login kopieren

    下面就是常见的检测函式:

  • iscolor
  • isnumber
  • isstring
  • iskeyword
  • isurl
  • 如果你想判断一个值是纯数字,还是某个单位量,可以使用下列函式:

  • ispixel
  • ispercentage
  • isem
  • 最后再补充一点,在导引序列中可以使用and关键字实现与条件:

    .mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
    Nach dem Login kopieren

    使用not关键字实现或条件

    .mixin (@b) when not (@b > 0) { ... }
    Nach dem Login kopieren

    嵌套规则

    LESS 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS:

    #header { color: black; }#header .navigation {  font-size: 12px;}#header .logo {   width: 300px; }#header .logo:hover {  text-decoration: none;}
    Nach dem Login kopieren

    在 LESS 中, 我们就可以这样写:

    #header {  color: black;  .navigation {    font-size: 12px;  }  .logo {    width: 300px;    &:hover { text-decoration: none }  }}
    Nach dem Login kopieren

    或者这样写:

    #header        { color: black;  .navigation  { font-size: 12px }  .logo        { width: 300px;    &:hover    { text-decoration: none }  }}
    Nach dem Login kopieren

    代码更简洁了,而且感觉跟DOM结构格式有点像.

    注意 & 符号的使用?如果你想写串联选择器,而不是写后代选择器,就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus.

    例如:

    .bordered {  &.float {    float: left;   }  .top {    margin: 5px;   }}
    Nach dem Login kopieren

    会输出

    .bordered.float {  float: left;  }.bordered .top {  margin: 5px;}
    Nach dem Login kopieren

    运算

    任何数字、颜色或者变量都可以参与运算. 来看一组例子:

    @base: 5%;@filler: @base * 2;@other: @base + @filler;color: #888 / 4;background-color: @base-color + #111;height: 100% / 2 + @filler;
    Nach dem Login kopieren

    LESS 的运算已经超出了我们的期望,它能够分辨出颜色和单位。如果像下面这样单位运算的话:

    @var: 1px + 5;
    Nach dem Login kopieren

    LESS 会输出 6px.

    括号也同样允许使用:

    width: (@var + 5) * 2;
    Nach dem Login kopieren

    并且可以在复合属性中进行运算:

    border: (@width * 2) solid black;
    Nach dem Login kopieren

    Color 函数

    LESS 提供了一系列的颜色运算函数. 颜色会先被转化成 HSL 色彩空间, 然后在通道级别操作:

    lighten(@color, 10%);     // return a color which is 10% *lighter* than @colordarken(@color, 10%);      // return a color which is 10% *darker* than @colorsaturate(@color, 10%);    // return a color 10% *more* saturated than @colordesaturate(@color, 10%);  // return a color 10% *less* saturated than @colorfadein(@color, 10%);      // return a color 10% *less* transparent than @colorfadeout(@color, 10%);     // return a color 10% *more* transparent than @colorfade(@color, 50%);        // return @color with 50% transparencyspin(@color, 10);         // return a color with a 10 degree larger in hue than @colorspin(@color, -10);        // return a color with a 10 degree smaller hue than @colormix(@color1, @color2);    // return a mix of @color1 and @color2
    Nach dem Login kopieren

    使用起来相当简单:

    @base: #f04615;.class {  color: saturate(@base, 5%);  background-color: lighten(spin(@base, 8), 25%);}
    Nach dem Login kopieren

    你还可以提取颜色信息:

    hue(@color);        // returns the `hue` channel of @colorsaturation(@color); // returns the `saturation` channel of @colorlightness(@color);  // returns the 'lightness' channel of @color
    Nach dem Login kopieren

    如果你想在一种颜色的通道上创建另一种颜色,这些函数就显得那么的好用,例如:

    @new: hsl(hue(@old), 45%, 90%);
    Nach dem Login kopieren

    @new 将会保持 @old的 色调, 但是具有不同的饱和度和亮度.

    Math 函数

    LESS提供了一组方便的数学函数,你可以使用它们处理一些数字类型的值:

    round(1.67); // returns `2`ceil(2.4);   // returns `3`floor(2.6);  // returns `2`
    Nach dem Login kopieren

    如果你想将一个值转化为百分比,你可以使用percentage 函数:

    percentage(0.5); // returns `50%`
    Nach dem Login kopieren

    命名空间

    有时候,你可能为了更好组织CSS或者单纯是为了更好的封装,将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用:

    #bundle {  .button () {    display: block;    border: 1px solid black;    background-color: grey;    &:hover { background-color: white }  }  .tab { ... }  .citation { ... }}
    Nach dem Login kopieren

    你只需要在 #header a中像这样引入 .button:

    #header a {  color: orange;  #bundle > .button;}
    Nach dem Login kopieren

    作用域

    LESS 中的作用域跟其他编程语言非常类似,首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,直到找到为止.

    @var: red;#page {  @var: white;  #header {    color: @var; // white  }}#footer {  color: @var; // red }
    Nach dem Login kopieren

    注释

    CSS 形式的注释在 LESS 中是依然保留的:

    /* Hello, I'm a CSS-style comment */.class { color: black }
    Nach dem Login kopieren

    LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:

    // Hi, I'm a silent comment, I won't show up in your CSS.class { color: white }
    Nach dem Login kopieren

    Importing

    你可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带:

    @import "lib.less";@import "lib";
    Nach dem Login kopieren

    如果你想导入一个CSS文件而且不想LESS对它进行处理,只需要使用.css后缀就可以:

    @import "lib.css";
    Nach dem Login kopieren

    这样LESS就会跳过它不去处理它.

    字符串插值

    变量可以用类似ruby和php的方式嵌入到字符串中,像@{name}这样的结构:

    @base-url: "http://assets.fnord.com";background-image: url("@{base-url}/images/bg.png");
    Nach dem Login kopieren

    避免编译

    有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.

    要输出这样的值我们可以在字符串前加上一个 ~, 例如:

    .class {  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";}
    Nach dem Login kopieren

    我们可以将要避免编译的值用 “”包含起来,输出结果为:

    .class {  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();}
    Nach dem Login kopieren

    JavaScript 表达式

    JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号的方式使用:

    @var: `"hello".toUpperCase() + '!'`;
    Nach dem Login kopieren

    输出:

    @var: "HELLO!";
    Nach dem Login kopieren

    注意你也可以同时使用字符串插值和避免编译:

    @str: "hello";@var: ~`"@{str}".toUpperCase() + '!'`;
    Nach dem Login kopieren

    输出:

    @var: HELLO!;
    Nach dem Login kopieren

    它也可以访问JavaScript环境:

    @height: `document.body.clientHeight`;
    Nach dem Login kopieren

    如果你想将一个JavaScript字符串解析成16进制的颜色值, 你可以使用 color 函数:

    @color: color(`window.colors.baseColor`);@darkcolor: darken(@color, 10%);
    Nach dem Login kopieren

    Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage