USB迷 | 专注于互联网分享

    最新消息： USBMI致力于为网友们分享Windows、安卓、IOS等主流手机系统相关的资讯以及评测、同时提供相关教程、应用、软件下载等服务。
    你的位置： 首页 > IT圈 > Less.

    Less.

    IT圈 admin 7浏览 0评论

    Less.

       Less 教程_w3cschool

    什么是less

    LESS是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。 LESS是一种动态样式表语言，扩展了CSS的功能。 LESS也是跨浏览器友好。

    CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。 它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。

    less优势

    • 跨浏览器友好
    • 编译速度比CSS预处理器更快
    • 模块化的代码，减少代码的冗余（嵌套编写）
    • 引入变量，能更好的维护代码
    • 通过规则集能更轻松的重用整个类
    • 编码更快更节省时间

    less缺点

    • 与Sass相比，框架更少
    • 由于模块之间的紧密耦合，应当采取更多的努力来重用和/或测试依赖模块。

    变量

    LESS允许使用 @ 符号定义变量。 变量分配使用冒号(:)完成。

    “@变量名：变量值”。

    @width:100px;

    什么时候使用变量

    通常看到多次重复相同的值，并且可以通过使用变量来避免。

    变量的用法

    1、变量插值

    如：作为一个普通值插入  @width:100px;   width:@width

    还可以插入在选择器名称，属性名称， URL 和 @import 语句中。

    如：#@{selector的值}，@{URL}

    2、延迟加载

    在延迟加载中，即使它们尚未声明，也可以使用变量。

    p {font-size: @a;color: #ca428b;
}
@a: @b;
@b: 25px;

    3、变量名称

    我们可以定义变量名称由一个值组成的变量。

    .myclass{@col: #ca428b;@color: "col";background-color: @@color;
}

    4、默认变量

    默认变量只有在尚未设置时才能设置变量。

    作用域

    变量将从本地作用域搜索，如果它们不可用，则编译器将从父作用域搜索。

    注释

    多行注释

    /**/    ：会被编译到CSS文件中去

    单行注释

    //      ：不会被编译到CSS文件中去

    导入

    用于将其他less文件导入到本less文件中

    语法

    @import“file_name.less"导入文件

    @import "//www.w3cschool.cn/less/myfile.less";

    可以将@import 语句放在代码中的任何位置。

    导入选项

    1REFERENCE 它使用一个LESS文件作为参考，不会输出它。
    2inline 它使您能够将CSS复制到输出而不进行处理。
    3less 它会将导入的文件视为常规LESS文件，尽管可能是文件扩展名。
    4css 它会将导入的文件视为常规CSS文件，尽管可能是文件扩展名。
    5once 它将只导入一次文件。
    6multiple 它会多次导入文件。通过 @import(multiple)，您可以导入具有相同名称的多个文件。
    7optional即使找不到要导入的文件，它仍会继续编译。

    允许在 @import 语句中使用多个关键字，但必须使用逗号分隔关键字。

    例如：

    @import (less, optional) "custom.css";

    混合

    Mixins

    混合类似于编程语言中的函数。

    Mixins是一组CSS属性，混合就是将一系列属性从一个规则集引入到另一个规则集

    在LESS中，可以使用类或id选择器以与CSS样式相同的方式声明mixin。 它可以存储多个值，并且可以在必要时在代码中重复使用。

    混合方式

    1、普通混合

    定义一个类是 .a{}的形式

    less文件

    .a{
padding-left: 100px;
}
.myclass{
background : #64d9c0;
.a;
}

    css文件

    .a{
padding-left: 100px;
}
​
.myclass {
background: #64d9c0;
padding-left: 100px;
}

    2、不带输出的混合

    定义一个类，是 .a(){}的形式

    less文件

    .a(){padding-left: 100px;
}
.myclass{background : #64d9c0;.a;
}

    css文件

    .myclass {background: #64d9c0;padding-left: 100px;
}

    3、带参数的混合

    .mixin(@color; @padding) {
color: @color;
padding: @padding;
}

    4、带参数并且有默认值的混合

    .mixin(@color:red; @padding:2) {
color: @color;
padding: @padding;
}

    5、命名参数

    Mixins通过使用它们的名称提供参数值而不是位置。 参数没有放置值的任何顺序，它们可以通过名称引用。

    .mixin(@color: black; @fontSize: 10px) {
color: @color;
font-size: @fontSize;
}
.class1 {
.mixin(@fontSize: 20px; @color: #F5A9D0);
}
.class2 {
.mixin(#F79F81; @fontSize: 20px);
}

    6、匹配模式

    类似于重载，优先找到匹配的值

    Ø第一个参数找到方法中匹配度最高，若匹配度相同，将会全部选择，存在样式覆盖

    Ø如果匹配的参数是变量，则会匹配（@__）

    @__：任意参数都符合条件

    .triangle(top,@width:20px,@color:#000){border-color:transparent transparent @color transparent;
}
.triangle(right,@width:20px,@color:#000){border-color:transparent @color transparent transparent;
}
.triangle(bottom,@width:20px,@color:#000){border-color:@color transparent transparent transparent;
}
.triangle(left,@width:20px,@color:#000){border-color:transparent transparent transparent @color;
}
.triangle(@_,@width:20px,@color:#000){border-style: solid;border-width: @width;
}
​
#main{.triangle(left, 50px #999);
}

    7、@arguments

    @arguments:包含了所有传进来的参数

    .bor(@x,@y,@z){border:@arguments;
}

    8、可变参数

    .mixin(@x; ...) {···}

    Mixin Guards(条件判断)

    1、逻辑比较运算符，搭配when进行比较

            when () and () => &&

            when not() => !

            when () , () => ||

    2、比较运算符，如【> < >= <= =】

    3、使用JS函数判断，

            如：isnumber,iscolor,isstring,isurl,iskeyword

            判断单位：

                    是否为px：ispixel

                    是否为pt：ispercentage（1point == 1/72英寸）

                    是否为em：isem

    例子：

    .mixin(@a) when(lightness(@a)>=50%) {background-color: black;
}
​
.mixin(@a) when(lightness(@a)<=50%) {background-color: whitesmoke;
}
​
.box1 {.wh();.mixin(#ddd);
}

    Less Css Guards

    与Mixins Guards类似

    嵌套

    嵌套作用

            嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而减少代码量

            允许把具有层级关系的类名/选择器进行嵌套使用，注意需要用花括号进行包裹

    嵌套规则

            1、直接嵌套表示的是后代关系

            2、&：表示包裹它的选择器

    扩展

    Extend是一个LESS伪类，它通过使用:extend 选择器在一个选择器中扩展其他选择器样式。

    相当于变成一个分组选择器，在类名后增加了一个","

     

     

    扩展性能比混合高，灵活度比混合低

    运算

    可以进行 + - * / 运算，只需要一个值带单位即可

    转义

    在将LESS代码编译为CSS代码之后，〜“some_text"中的任何内容将显示为 some_text 。

    当需要引入无效的 CSS 语法或 Less 不能识别的字符，就需要使用转义字符

    p {color: ~"green";
}

    命名规范

    子方法可以使用上一层传进的方法；

    必须先引进命名的空间才能使用方法；

    选择器>前面的父元素不能加括号

     

    属性拼接

    less合并

    +_表示空格，+表示逗号

    // 属性拼接 +
.boxShadow1() {box-shadow+: inset 0 0 10px #666;
}
​
.main {.boxShadow1();box-shadow+: 0 0 20px pink;
}
​
// +_
.Animation() {transform+_: scale(1);
}
​
.main {.Animation();transform+_: rotate(16deg);
}

    参考：   Less 教程_w3cschool

    Less.

       Less 教程_w3cschool

    什么是less

    LESS是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。 LESS是一种动态样式表语言，扩展了CSS的功能。 LESS也是跨浏览器友好。

    CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。 它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。

    less优势

    • 跨浏览器友好
    • 编译速度比CSS预处理器更快
    • 模块化的代码，减少代码的冗余（嵌套编写）
    • 引入变量，能更好的维护代码
    • 通过规则集能更轻松的重用整个类
    • 编码更快更节省时间

    less缺点

    • 与Sass相比，框架更少
    • 由于模块之间的紧密耦合，应当采取更多的努力来重用和/或测试依赖模块。

    变量

    LESS允许使用 @ 符号定义变量。 变量分配使用冒号(:)完成。

    “@变量名：变量值”。

    @width:100px;

    什么时候使用变量

    通常看到多次重复相同的值，并且可以通过使用变量来避免。

    变量的用法

    1、变量插值

    如：作为一个普通值插入  @width:100px;   width:@width

    还可以插入在选择器名称，属性名称， URL 和 @import 语句中。

    如：#@{selector的值}，@{URL}

    2、延迟加载

    在延迟加载中，即使它们尚未声明，也可以使用变量。

    p {font-size: @a;color: #ca428b;
}
@a: @b;
@b: 25px;

    3、变量名称

    我们可以定义变量名称由一个值组成的变量。

    .myclass{@col: #ca428b;@color: "col";background-color: @@color;
}

    4、默认变量

    默认变量只有在尚未设置时才能设置变量。

    作用域

    变量将从本地作用域搜索，如果它们不可用，则编译器将从父作用域搜索。

    注释

    多行注释

    /**/    ：会被编译到CSS文件中去

    单行注释

    //      ：不会被编译到CSS文件中去

    导入

    用于将其他less文件导入到本less文件中

    语法

    @import“file_name.less"导入文件

    @import "//www.w3cschool.cn/less/myfile.less";

    可以将@import 语句放在代码中的任何位置。

    导入选项

    1REFERENCE 它使用一个LESS文件作为参考，不会输出它。
    2inline 它使您能够将CSS复制到输出而不进行处理。
    3less 它会将导入的文件视为常规LESS文件，尽管可能是文件扩展名。
    4css 它会将导入的文件视为常规CSS文件，尽管可能是文件扩展名。
    5once 它将只导入一次文件。
    6multiple 它会多次导入文件。通过 @import(multiple)，您可以导入具有相同名称的多个文件。
    7optional即使找不到要导入的文件，它仍会继续编译。

    允许在 @import 语句中使用多个关键字，但必须使用逗号分隔关键字。

    例如：

    @import (less, optional) "custom.css";

    混合

    Mixins

    混合类似于编程语言中的函数。

    Mixins是一组CSS属性，混合就是将一系列属性从一个规则集引入到另一个规则集

    在LESS中，可以使用类或id选择器以与CSS样式相同的方式声明mixin。 它可以存储多个值，并且可以在必要时在代码中重复使用。

    混合方式

    1、普通混合

    定义一个类是 .a{}的形式

    less文件

    .a{
padding-left: 100px;
}
.myclass{
background : #64d9c0;
.a;
}

    css文件

    .a{
padding-left: 100px;
}
​
.myclass {
background: #64d9c0;
padding-left: 100px;
}

    2、不带输出的混合

    定义一个类，是 .a(){}的形式

    less文件

    .a(){padding-left: 100px;
}
.myclass{background : #64d9c0;.a;
}

    css文件

    .myclass {background: #64d9c0;padding-left: 100px;
}

    3、带参数的混合

    .mixin(@color; @padding) {
color: @color;
padding: @padding;
}

    4、带参数并且有默认值的混合

    .mixin(@color:red; @padding:2) {
color: @color;
padding: @padding;
}

    5、命名参数

    Mixins通过使用它们的名称提供参数值而不是位置。 参数没有放置值的任何顺序，它们可以通过名称引用。

    .mixin(@color: black; @fontSize: 10px) {
color: @color;
font-size: @fontSize;
}
.class1 {
.mixin(@fontSize: 20px; @color: #F5A9D0);
}
.class2 {
.mixin(#F79F81; @fontSize: 20px);
}

    6、匹配模式

    类似于重载，优先找到匹配的值

    Ø第一个参数找到方法中匹配度最高，若匹配度相同，将会全部选择，存在样式覆盖

    Ø如果匹配的参数是变量，则会匹配（@__）

    @__：任意参数都符合条件

    .triangle(top,@width:20px,@color:#000){border-color:transparent transparent @color transparent;
}
.triangle(right,@width:20px,@color:#000){border-color:transparent @color transparent transparent;
}
.triangle(bottom,@width:20px,@color:#000){border-color:@color transparent transparent transparent;
}
.triangle(left,@width:20px,@color:#000){border-color:transparent transparent transparent @color;
}
.triangle(@_,@width:20px,@color:#000){border-style: solid;border-width: @width;
}
​
#main{.triangle(left, 50px #999);
}

    7、@arguments

    @arguments:包含了所有传进来的参数

    .bor(@x,@y,@z){border:@arguments;
}

    8、可变参数

    .mixin(@x; ...) {···}

    Mixin Guards(条件判断)

    1、逻辑比较运算符，搭配when进行比较

            when () and () => &&

            when not() => !

            when () , () => ||

    2、比较运算符，如【> < >= <= =】

    3、使用JS函数判断，

            如：isnumber,iscolor,isstring,isurl,iskeyword

            判断单位：

                    是否为px：ispixel

                    是否为pt：ispercentage（1point == 1/72英寸）

                    是否为em：isem

    例子：

    .mixin(@a) when(lightness(@a)>=50%) {background-color: black;
}
​
.mixin(@a) when(lightness(@a)<=50%) {background-color: whitesmoke;
}
​
.box1 {.wh();.mixin(#ddd);
}

    Less Css Guards

    与Mixins Guards类似

    嵌套

    嵌套作用

            嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而减少代码量

            允许把具有层级关系的类名/选择器进行嵌套使用，注意需要用花括号进行包裹

    嵌套规则

            1、直接嵌套表示的是后代关系

            2、&：表示包裹它的选择器

    扩展

    Extend是一个LESS伪类，它通过使用:extend 选择器在一个选择器中扩展其他选择器样式。

    相当于变成一个分组选择器，在类名后增加了一个","

     

     

    扩展性能比混合高，灵活度比混合低

    运算

    可以进行 + - * / 运算，只需要一个值带单位即可

    转义

    在将LESS代码编译为CSS代码之后，〜“some_text"中的任何内容将显示为 some_text 。

    当需要引入无效的 CSS 语法或 Less 不能识别的字符，就需要使用转义字符

    p {color: ~"green";
}

    命名规范

    子方法可以使用上一层传进的方法；

    必须先引进命名的空间才能使用方法；

    选择器>前面的父元素不能加括号

     

    属性拼接

    less合并

    +_表示空格，+表示逗号

    // 属性拼接 +
.boxShadow1() {box-shadow+: inset 0 0 10px #666;
}
​
.main {.boxShadow1();box-shadow+: 0 0 20px pink;
}
​
// +_
.Animation() {transform+_: scale(1);
}
​
.main {.Animation();transform+_: rotate(16deg);
}

    参考：   Less 教程_w3cschool

    继续浏览有关 的文章

    与本文相关的文章

    发布评论

    评论列表 (0)

    1. 暂无评论