logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

less学习笔记

 昵称37203473 2016-10-15

目录

  1. 变量　　
    1. (@value)
  2. 混合      
    1. 继承
    2. 带参数混合
    3. arguments变量
  3. 嵌套规则
    1. &可嵌套串联选择器
  4. 函数&运算
  5. 模式匹配和导引表达式(mixin)  *
    1. 根据传入参数来改变混合的默认呈现
    2. 根据不同@switch值表现各异
  6. 引导表达式(mixin)  *
    1. 根据表达式进行匹配(when关键字)
    2. 运算符:  >  >=  =  <=><  true="">
    3. 基于值的类型 is*
    4. 与and, 非not
  7. Color函数
  8. Math函数
    1. round ceil floor percentage
  9. 命名空间
  10. 作用域
  11. 注释 (/**/ 或 //)
  12. Importing 文件引入
  13. 字符串插值   (@{value})
  14. 避免编译  ~
  15. JavaScript表达式(反引号)

　　less是一种动态样式语言,

　　LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

　　我编译less就是用了一款前端预处理器语言图形编译工具----koala, 非常好用

 

1. 变量:

　　变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

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

1
2
3
4
5
6
7
8
9
10
  // LESS
@color: #4D926F;
#header {
  color: @color;
}
h2 {
  color: @color;
}

2. 混合:

　　混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// LESS
.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

　　带参数混合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px); 
}
/*---------------------------------*/

/* 还可以给参数设置默认值*/
.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
/* 则直接可以 */
#header { .border-radius; }

　　@arguments 变量

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

1
2
3
4
5
6
.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);

　

3. 嵌套规则

　　我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// LESS
#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

4. 函数 & 运算

　　运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

　　任何数字、颜色或者变量都可以参与运算

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// LESS
@the-border: 1px;
@base-color: #111;
@red:        #842210;
#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer {
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

5. 模式匹配和导引表达式(mixin)

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

1
2
3
4
5
.mixin (@s, @color) { ... }
.class {
  .mixin(@switch, #888);
}

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

1
2
3
4
5
6
7
8
9
.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}

　　现在，如果运行:

1
2
3
4
5
@switch: light;
.class {
  .mixin(@switch, #888);
}

　　就会得到下列CSS:

1
2
3
4
.class {
  color: #a2a2a2;
  display: block;
}

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

　　具体实现如下：

  • 第一个混合定义并未被匹配，因为它只接受dark做为首参
  • 第二个混合定义被成功匹配，因为它只接受light
  • 第三个混合定义被成功匹配，因为它接受任意值

　　只有被匹配的混合才会被使用。变量可以匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的传入值。

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

1
2
3
4
5
6
.mixin (@a) {
  color: @a;
}
.mixin (@a, @b) {
  color: fade(@a, @b);
}

6. 引导(mixin)

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

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

　　以此例做为开始：

1
2
3
4
5
6
7
8
9
.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) <>50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

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

1
2
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

　　就会得到:

1
2
3
4
5
6
7
8
.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

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

1
2
.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }

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

1
2
3
.class {
  .truth(40); // Will not match any of the above definitions.
}

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

1
.mixin (@a) when (@a > 10), (@a <>-10) { ... }

　　导引可以无参数，也可以对参数进行比较运算：

 

1
2
3
4
5
6
7
@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 }

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

1
2
.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }

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

  • iscolor
  • isnumber
  • isstring
  • iskeyword
  • isurl

　　如果你想判断一个值是纯数字，还是某个单位量，可以使用下列函式：

  • ispixel
  • ispercentage
  • isem

　　最后再补充一点，在导引序列中可以使用and关键字实现与条件：

1
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

　　使用not关键字实现或条件 

1
.mixin (@b) when not (@b > 0) { ... }

7. Color函数

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color
saturate(@color, 10%);    // return a color 10% *more* saturated than @color　　//饱和
desaturate(@color, 10%);  // return a color 10% *less* saturated than @color
fadein(@color, 10%);      // return a color 10% *less* transparent than @color　　//透明度
fadeout(@color, 10%);     // return a color 10% *more* transparent than @color
fade(@color, 50%);        // return @color with 50% transparency
spin(@color, 10);         // return a color with a 10 degree larger in hue than @color //色度,色调
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color
mix(@color1, @color2);    // return a mix of @color1 and @color2

　　使用:

1
2
3
4
5
6
@base: #f04615;
.class {
  color: saturate(@base, 5%);
  background-color: lighten(spin(@base, 8), 25%);
}

　　还可以提取颜色信息:

1
2
3
hue(@color);        // returns the `hue` channel of @color
saturation(@color); // returns the `saturation` channel of @color
lightness(@color);  // returns the 'lightness' channel of @color

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

1
@new: hsl(hue(@old), 45%, 90%);　　　　//code>'variable'>@newcode> 将会保持 code>'variable'>@oldcode>的 色调, 但是具有不同的饱和度和亮度.

8. Math函数: 

1
2
3
4
round(1.67); // returns `2`
ceil(2.4);   // returns `3`
floor(2.6);  // returns `2`
percentage(0.5); // returns `50%`

9. 命名空间

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

1
2
3
4
5
6
7
8
9
10
#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

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

1
2
3
4
#header a {
  color: orange;
  #bundle > .button;
}　

10. 作用域

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

1
2
3
4
5
6
7
8
9
10
11
12
@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
#footer {
  color: @var; // red 
}

11. 注释

　　CSS 形式的注释在 LESS 中是依然保留的. 也支持双斜线注释, 但是编译成CSS的时候自动过滤掉

12. Importing

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

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

1
2
3
4
@import 'lib.less';
@import 'lib';
@import 'lib.css';    //这样LESS就会跳过它不去处理它.

13. 字符串插值

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

1
2
@base-url: 'http://assets.';
background-image: url('@{base-url}/images/bg.png');

14. 避免编译

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

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

1
2
3
.class {
  filter: ~'ms:alwaysHasItsOwnSyntax.For.Stuff()';
}

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

复制代码
.class { filter: ms:alwaysHasItsOwnSyntax.For.Stuff();}
复制代码

15. JavaScript表达式

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

复制代码
@var: `'hello'.toUpperCase() + '!'`;
复制代码

　　输出

复制代码
@var: 'HELLO!';
复制代码

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

1
2
@str: 'hello';
@var: ~`'@{str}'.toUpperCase() + '!'`;

　　输出

复制代码
@var: HELLO!;
复制代码

　　它也可以访问JavaScript环境:

1
@height: `document.body.clientHeight`;

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

1
2
@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);

　　

 

来源: less

　　

　

　

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 昵称37203473 > 《less基础学习笔记》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多