Less小总结

 

=

导航

 

• 顶部
• 变量
• 混合
• 继承
• 函数

 

• 顶部
• 变量
• 混合
• 继承
• 函数

Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，让你的Css更具维护性，主题性，扩展性。

Less要CSS语法的基础上进行了扩展，主要包含：Variables，Mixins、Nested Rules、Functions & Operations、Client-side usage、Server-side usage等等

官网 教程2 教程3 教程4

1.变量——Variables

    Less中的变量有以下规则：
    以@作为变量的起始标识，变量名由字母、数字、_和-组成
    没有先定义后使用的规定；
    以最后定义的值为最终值；
    可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接；
    定义时 "@变量名: 变量值;" 的形式；引用时采用 "@变量名" 或 "@{变量名}" 的形式；
    存在作用域，局部作用域优先级高于全局作用域。
    

                /*======== 定义变量===========*/
				@color: #4d926f;
				/*======== 应用到元素中 ========*/
				#header {
					color: @color;
				}
				h2 {
					color: @color;
				}
   

Less中的变量还具有计算功能

                @nice-blue: #5b83ad;
				@light-blue: @nice-blue + #111;
				#header {
					color: @light-blue;
				}
    

我们还可以定义一个变量名为变量,在Less中的变量实际上就是一个“常量”，因为它们只能被定义一次。后的@color可以覆盖前面的@color

            @color: #253636;
			@highlight: "color";
			#header {color: @@highlight;}
    

混入——Mixins

混入其实就是一种嵌套，它充许你将一个类嵌入到另一个类中，而被嵌入的这个类也称为是一个变量。换句话说，你可以用一个类定义CSS，然后把整个为当作一个变量来使用，嵌入到另一个类中当作他的属性；另外混入也像一个带有参数的functions.这样任何CSS的类或ID下的样式都可以当作变量，使用混入模式用来当作另一个元素的属性值。

                .roundedCorners(@radius:5px) {
					-moz-border-radius: @radius;
					-webkit-border-radius: @radius;
					border-radius: @radius;
				}
				/*＝＝＝＝＝＝＝＝＝＝ 定义的类应用到另个一个类中 ＝＝＝＝＝＝＝＝＝＝＝*/
				＃header {
					.roundedCorners; //等同于.roundedCorners();
				}
				#footer {
					.roundedCorners(10px);
				}
    

还有一种方法就是给Mixins不定我任何参数，特别是在你想隐藏输出的CSS规则，但又想在别的规则中包含他的属性，使用这种不带参数的Mixins将非常有用的

                .wrap(){
					text-wrap: wrap;
					white-space: pre-wrap;
					white-space: -moz-pre-wrap;
					word-wrap: break-word;
				}
				pre {
					.wrap; !important; //对pre引用内的都加上 !important
				}
    

                .wrap(){
					text-wrap: wrap;
					white-space: pre-wrap;
					white-space: -moz-pre-wrap;
					word-wrap: break-word;
                   &:hover
                   {
                   color:red;
                   }
				}
				pre {
					.wrap;  //这里 也包含有pre的hover样式
				}
    

        .aa()
        {
            .inn
            {
             color:blue;
            }
        }
        .cc
        {
            .aa > .inn; //可以这样引用，以下都是等价的
            .aa > .inn();
            //.aa.inn();
            //.aa.inn
        }
    

        .mixin(@color) {
          color-1: @color;
        }
        .mixin(@color; @padding:2) {
          color-2: @color;
          padding-2: @padding;
        }
        .mixin(@color; @padding; @margin: 2) {
          color-3: @color;
          padding-3: @padding;
          margin: @margin @margin @margin @margin;
        }
        .some .selector div {
          .mixin(#008000);
        }

        //输出：
        .some .selector div {
        color-1: #008000;
        color-2: #008000;
        padding-2: 2;
        }
        //如果是.mixin(#008000,4);
        //输出：
        .some .selector div {
         color-2: #008000;
         padding-2: 4;
         color-3: #008000;
         padding-3: 4;
         margin: 2 2 2 2;
        }
    

上面这个不是太好理解，可以使用命名参数

        .mixin(@color: black; @margin: 10px; @padding: 20px)
        {
          color: @color;
          margin: @margin;
          padding: @padding;
        }
        .class1 {
          .mixin(@margin: 20px; @color: #33acfe);
        }
        .class2 {
          .mixin(#efca44; @padding: 40px);
        }
    

@argument在混合中有特殊的意义，它包含了所有的参数传递。这是有用的，如果你不想处理个别参数

        .box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
        -webkit-box-shadow: @arguments;
        -moz-box-shadow: @arguments;
        box-shadow: @arguments;
       }
        .big-block {
        .box-shadow(2px; 5px);
        }
        //如下
        .big-block {
        -webkit-box-shadow: 2px 5px 1px #000;
        -moz-box-shadow: 2px 5px 1px #000;
        box-shadow: 2px 5px 1px #000;
        }
    

对于...的参数形式，表示不定个数的参数

        .mixin(...) {        // matches 0-N arguments
        .mixin() {           // matches exactly 0 arguments
        .mixin(@a: 1) {      // matches 0-1 arguments
        .mixin(@a: 1; ...) { // matches 0-N arguments
        .mixin(@a; ...) {    // matches 1-N arguments
        .mixin(@a; @rest) {  //使用这个变量名后，将这些参数分配给变量。
    

还有一个@switch进行复合利用

        .mixin(dark; @color) {
          color: darken(@color, 10%);
        }
        .mixin(light; @color) {
          color: lighten(@color, 10%);
        }
        .mixin(@_; @color) { //匹配任意
          display: block;
        }

        @switch:light;
        .class
        {
        .mixin(@switch;#999);
        }
        //得到
        .class {
            color: #a2a2a2;
             display: block;
        }
    

作为函数的混合形式

        .mixin() {
         @width:  100%;  //这个体只是用来定义变量，
         @height: 200px;
        }

        .caller {
         .mixin();
         width:  @width;
         height: @height;
        }
        //得到
        .caller {
         width:  100%;
         height: 200px;
        }
    

         .average(@x, @y) {
          @average: ((@x + @y) / 2);
          }

           div {
           .average(16px, 50px); // "call" the mixin
           padding: @average;    // use its "return" value
         }
        //得到
        div {
        padding: 33px;
        }
    

导入less：标准的css必须提前导入再使用，但less不要求，可以在后面导入

        .foo {
         background: #900;
        }
        @import "dssd/.less";
    

less分支判断
.dd (@a) when (@a){}

.dd (@a) when (@a>=3){...}
.mixin (@a) when (@a > 10), (@a < -10) { ... }
.max (@a; @b) when (@a < @b) { width: @b }
.mixin (@a; @b: 0) when (isnumber(@b)) { ... }
default()函数只是剩余分支的情况
.mixin (@a) when (@a > 0) { ... }
.mixin (@a) when (default()) { ... } // 这里就是 when @a <= 0
when not进行反转
.mixin (@b) when not (@b > 0) { ... }

循环:珊格

        .generate-columns(4);
        .generate-columns(@n;@i:1) when (@i=<@n)
        {
           .column-@{i}
            {
               width:(@i*100%/@n);
            }
          .generate-columns(@n,(@i+1));
        }

        //得到
        .column-1 {
         width: 25%;
        }
        .column-2 {
          width: 50%;
        }
        .column-3 {
          width: 75%;
        }
        .column-4 {
          width: 100%;
        }
    

合并特性：性能够聚合多个属性从而形成一个用逗号分隔的单一属性

        .mixin() {
          box-shadow+: inset 0 0 10px #555;
        }
        .myclass {
          .mixin();
          box-shadow+: 0 0 20px black;
        }

        // 为了避免意外的合并，merge 需要在每个需要合并的属性名后面添加一个 + 以作标示
        // 输出
        .myclass {
            box-shadow: inset 0 0 10px #555, 0 0 20px black;
        }
    

父选择器&

        a
        {
          color: blue;
          &:hover {
            color: green;
           }
         }
        // 又如
        .button
        {
            &-ok {
             background-image: url("ok.png");
            }

            &-cancel {
              background-image: url("cancel.png");
            }

            &-custom {
              background-image: url("custom.png");
            }
        }

        //又如
         .link
        {
           & + & {
             color: red;
           }

           & & {
            color: green;
           }

           && {
             color: blue;
           }

           &, &ish {
           color: cyan;
           }
        }
        //等于于
        .link + .link {
             color: red;
            }

            .link .link {
              color: green;
            }

            .link.link {
              color: blue;
            }

            .link, .linkish {
              color: cyan;
            }
    

对于多个&

       .grand
        {
            .parent
           {
             & > & {
             color: red;
            }
        }
        //等于于
       .grand .parent > .grand .parent {
             color: red;
            }
    

多项组合

        p,a
        {
        border:1px solid #222;
         &+&
         {
          color:red;
         }
        }
        //等价于
        p,a
        {
        border:1px solid #222;
        }
        p+p
        {
        color:red;
        }
        p+a
        {
        color:red;
        }
        a+p
        {
        color:red;
        }
        a+a
        {
        color:red;
        }
    

继承 &：extend()

        .e:extend(.f) {}
        .e:extend(.g) {}

        //等价于
        .e:extend(.f, .g) {}

        对于
        pre:hover,
          .some-class {
          &:extend(div pre);
        }
        //等价于
        pre:hover:extend(div pre),
        .some-class:extend(div pre) {}

        对于
        .my-inline-block() {
        display: inline-block;
        font-size: 0;
        }
        .thing1 {
         .my-inline-block;
        }
        .thing2 {
        .my-inline-block;
        }

        //输出
        .thing1 {
            display: inline-block;
            font-size: 0;
        }
        .thing2 {
            display: inline-block;
            font-size: 0;
        }

        //而这还不是最简的
         .my-inline-block() {
            display: inline-block;
            font-size: 0;
        }
        .thing1 {
           &：extend(.my-inline-block);
        }
        .thing2 {
           &：extend(.my-inline-block);
        }
        //输出
        .my-inline-block,
        .thing1,
        .thing2 {
            display: inline-block;
            font-size: 0;
        }
    

函数

杂项函数 字符串函数 列表函数 数学函数 类型函数 颜色函数

1.杂项函数

1.color:将代表颜色的字符串转换为颜色值.color("#aaa")

2.将数字从一种单位转换到另一种单位

convert(9s, "ms")
convert(14cm, mm)
convert(8, mm)

3.data-uri:将资源内联进样式表

data-uri('../data/image.jpg');
输出： url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
浏览器端输出： url('../data/image.jpg');

4.deafult()

.mixin(1) {x: 11}
.mixin(2) {y: 22}
.mixin(@x) when (default()) {z: @x}

5.unit:删除或更换单位。

unit(5, px) 输出 5px
unit(5em) 输出 5

2.字符串函数

1.escape:对字符串中的特殊字符做 URL-encoding 编码

这些字符不会被编码：,, /, ?, @, &, +, ', ~, ! and $。
被编码的字符是：\<space\>, #, ^, (, ), {, }, |, :, >, <, ;, ], [ and =。

2.%： 格式化占位符

3.replace：用一个字符串替换一段文本。

//字符串 要换的 新的 规则（正则）
replace("Hello, Mars?", "Mars\?", "Earth!");
replace("One + one = 4", "one", "2", "gi");
replace('This is a string.', "(string)\.$", "new $1.");
replace(~"bar-1", '1', '2');

3.列表函数

1.length:返回列表中元素的个数

@list: "banana", "tomato", "potato", "peach";
n: length(@list);

2.extract:返回列表中指定位置的元素。

@list: apple, pear, coconut, orange;
value: extract(@list, 3);

4.数学函数

1.ceil：向上取整。ceil(2.5)=3

2.floor:向下取整。floor(2.5)=2

3.percentage:将浮点数转换为百分比字符串。percentage(0.5)=50%

4.round:四舍五入取整。精度默认为0.round(1.67)=2 round(1.67, 1)=1.7

5.sqrt:计算一个数的平方根，并原样保持单位。sqrt(25cm)=5cm

6.abs:计算数字的绝对值，并原样保持单位。

7.sin:正弦函数。asin/cos/acos/tan/atan

8.pi:返回圆周率 π pi()=3.141592653589793

9.pow:设第一个参数为A，第二个参数为B，返回A的B次方。

10.mod:返回第一个参数对第二参数取余的结果。

11.min:返回一系列值中最小的那个。min(3px, 42px, 1px, 16px)=1px /max

5.类型函数

1.isnumber：如果待验证的值为数字则返回 true ，否则返回 false 。

isnumber(#ff0); // false
isnumber(blue); // false
isnumber("string"); // false
isnumber(1234); // true
isnumber(56px); // true
isnumber(7.8%); // true
isnumber(keyword); // false
isnumber(url(...)); // false

2.isstring:如果待验证的值是字符串则返回 true ，否则返回 false 。

isstring(#ff0); // false
isstring(blue); // false
isstring("string"); // true
isstring(1234); // false
isstring(56px); // false
isstring(7.8%); // false
isstring(keyword); // true
isstring(url(...)); // true

3.iscolor:如果待验证的值为颜色则返回 true ，否则返回 false 。

iscolor(#ff0); // true
iscolor(blue); // true
iscolor("string"); // false
iscolor(1234); // false
iscolor(56px); // false
iscolor(7.8%); // false
iscolor(keyword); // false
iscolor(url(...)); // false

4.iskeyword:如果待验证的值为关键字则返回 true ，否则返回 false 。

iskeyword(#ff0); // false
iskeyword(blue); // false
iskeyword("string"); // false
iskeyword(1234); // false
iskeyword(56px); // false
iskeyword(7.8%); // false
iskeyword(keyword); // true
iskeyword(url(...)); // false

5.isurl:如果待验证的值为 url 则返回 true ，否则返回 false 。

isurl(#ff0); // false
isurl(blue); // false
isurl("string"); // false
isurl(1234); // false
isurl(56px); // false
isurl(7.8%); // false
isurl(keyword); // false
isurl(url(...)); // true

6.ispixel:如果待验证的值为像素数则返回 true ，否则返回 false 。

ispixel(#ff0); // false
ispixel(blue); // false
ispixel("string"); // false
ispixel(1234); // false
ispixel(56px); // true
ispixel(7.8%); // false
ispixel(keyword); // false
ispixel(url(...)); // false

7.isem:如果待验证的值的单位是 em 则返回 true ，否则返回 false 。

isem(#ff0); // false
isem(blue); // false
isem("string"); // false
isem(1234); // false
isem(56px); // false
isem(7.8em); // true
isem(keyword); // false
isem(url(...)); // false

8.ispercentage:如果待验证的值为百分比则返回 true ，否则返回 false 。

ispercentage(#ff0); // false
ispercentage(blue); // false
ispercentage("string"); // false
ispercentage(1234); // false
ispercentage(56px); // false
ispercentage(7.%); // true
ispercentage(keyword); // false
ispercentage(url(...)); // false

9.isunit:如果待验证的值为指定单位的数字则返回 true ，否则返回 false 。

isunit(11px, px); // true
isunit(2.2%, px); // false
isunit(33px, rem); // false
isunit(4rem, rem); // true
isunit(56px, "%"); // false
isunit(7.8%, '%'); // true
isunit(1234, em); // false
isunit(#ff0, pt); // false
isunit("mm", mm); // false

6.颜色函数

1.rgb/rgba

2.rgnb:创建格式为 #AARRGGBB 的十六进制颜色值 (注意不是 #RRGGBBAA！)

argb(rgba(90, 23, 148, 0.5)),这种格式被用于 IE 、.NET 和 Android 的开发中

3.hsl/hsla:通过色相 (hue)，饱和度 (saturation)，亮度 (lightness) 三种值 (HSL) 创建不透明的颜色对象

hsl(90, 100%, 50%),hsla(90, 100%, 50%, 0.5)

4.hsv/hsva:通过色相 (hue)、饱和度 (saturation)、色调 (value) 三种值 (HSV) 创建不透明的颜色对象。

hsv(90, 100%, 50%),hsva(90, 100%, 50%, 0.5)

5.red/green/blue：从颜色对象中提取颜色通道值

green(rgb(10, 20, 30))

6.alpha:从颜色对象中提取 alpha 通道值 alpha(rgba(10, 20, 30, 0.5))=0.5

7.saturate/desaturate:增加/减少颜色饱和度 saturate(hsl(90, 80%, 50%), 20%)=#80ff00

8.lighten/darken:增加/减少颜色亮度 lighten(hsl(90, 80%, 50%), 20%)=#b3f075

9.fadeout/fadein:增加/减少透明度fadein(hsla(90, 90%, 50%, 0.5), 10%)=hsla(90, 90%, 50%, 0.6)

10.fade:设置透明度fade(hsl(90, 90%, 50%), 10%)=hsla(90, 90%, 50%, 0.1)

11.spin:在任一方向旋转颜色的色调角 @c: spin(saturate(#aaaaaa, 10%), 10);

12.multiply：正片叠底 multiply(#ff6600, #cccccc);

13.screen：变色/滤色 screen(#ff6600, #666666);

14.overlay：叠加 overlay(#ff6600, #000000);

15.softlight：柔光 softlight(#ff6600, #333333);

16.hardlight:强光 hardlight(#ff6600, #666666);

17.difference：排除 difference(#ff6600, #333333);

18.average：分别对 RGB 的三种颜色值取平均值，然后输出结果。average(#ff6600, #ff0000);