less_lessc - CSDN
less 订阅
less 是江南布衣旗下高端女性服饰品牌 展开全文
less 是江南布衣旗下高端女性服饰品牌
信息
所属公司
杭州江南布衣服饰有限公司 [1]
所属行业
服装
中文名称
江南布衣旗下品牌 [1]
创立时间
1995
英文名称
less
lessLESS品牌
品牌价值观:生活态度决定品质追求。品牌定位:高端的设计师女装品牌。秉承以设计为核心的创新理念,用专业的思维方式将自然与科技、传统与革新、技艺与时尚三者良好融合,着重面料材质与软式廓型的品质互动,更好的诠释“less ismore”的设计理念。品牌理念:自然、科技、都会、优雅,以少呈多。卖场风格:呈现空间与服装的契合点。目标群体:28岁以上,追求创新衣着观念与个性穿着体验的知性女性。搭配理念:强调在基本的基调上加上夺目的款式及色彩组合,再加上细节和品质上的高要求,以展现完全不同的效果 产品的开发理念:“自然、科技、都会、优雅”是less品牌所追求的核心理念。以自然材质为主,精心选择特殊工艺织造的高支、高密的天然纤维作为面料的基调——桑蚕丝、丝毛交织、丝绵混纺、高支棉、羊绒纱线、美丽诺羊毛大衣呢、滚涂绵羊皮、富有视效的牛皮及皮毛一体构成面料细腻而富质感的主轴,配以人造纤维混纺及功能性材料强化面料结构;从“人、面料、服装、时尚度”四者的关系出发,科学考量服装款式、廓形、比例、色彩以及制做工艺的综合效应,以求开发更为科学合理的个性产品;精心构架服装的系列感与灵动 的组合方式,以求塑造当下都会女性简约、个性、独立的高品质生活态度。最终创 造出属于LESS的独一无二的女性形象。品牌的平台背景:2011年12月,LESS品牌正式成为江南布衣服饰有限公司体系在中国大陆商业运作的高端设计师女装品牌。公司将运用江南布衣的优势资源,并秉承一贯以设计为核心的创新理念,力求打造出兼具设计创新与高品质生活对接的高端女装品牌。
收起全文
精华内容
参与话题
  • less语法详解

    千次阅读 多人点赞 2019-06-26 14:52:18
    Less为什么出现? 作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往...

    Less为什么出现?

    作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,造成这些困难的很大原因源于 CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。
    Less有助于你学习Sass。

    了解Less

    它是一门CSS预处理,扩充了CSS,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充,Less 也可以运行在 Node 或浏览器端。
    总结:让CSS更具维护性、主题性、扩展性!

    Less注释符

    在less中,注释符为“ // ”,与JavaScript等语言注释符相同。
    在less中,如果注释符为“ /**/ ”(CSS注释符),则代表less文件编译成css文件后,在其css文件里显示的注释。

    style.less:

    //我只能在less文件中显示,经过编译后,css文件里不显示!
    /*我只能在css文件中显示,经过编译后,less文件里不显示!*/
    

    编译模式

    因为less不像css一样,直接被浏览器解析渲染,所以需要通过编译软件(我推荐koala)进行编译。
    koala有两种常用编译模式,分别为normal与compress。

    (1)normal(默认):
    编译成css格式,不压缩为一行。(利于更新和维护)
    (2)compress:
    编译成压缩的CSS格式,只有一行,紧凑贴紧,对浏览器更加友好,且大小相比未压缩要小一些(推荐发布使用)

    延时加载特性

    (1)变量不需要预先声明
    (2)变量可以在任意位置出现

    一、变量

    一个属性值经常用到?不妨试试赋给变量!
    语法:@变量名:值;

    //定义变量(全局变量)
    @COLOR:rgb(255,0,0);
    @WIDTH:200px;
    
    header{
      background:@COLOR;
    }
    div{
      background:@COLOR;
      padding:@WIDTH;
    }
    

    生成的css代码:

    header{
      background: #ff0000;
    }
    div{
      background: #ff0000;
      padding: 200px;
    }
    

    变量写在class里,会变为局部变量,无法继续复用!
    我们来证实这一点:

    header{
      // @COLOR为局部变量,作用域只在header
      @COLOR:rgb(255,0,0);
      background:@COLOR;
    }
    div{
      // 出错,@COLOR不存在!
      background:@COLOR;
    }
    

    当header类执行完成后,@COLOR变量会立刻销毁,所以会导致div{background的值}出错,其特性和其他语言类似。

    二、变量用作属性名

    一个属性名太长?嫌弃background-color?

    语法:@变量名:属性名;

    //定义变量(属性名)
    @bg-img:background-image;
    
    div{
      @{bg-img}:路径;
    }
    

    生成的css代码:

    div {
      background-image: 路径;
    }
    

    也许使用路径二字,更能让你快速认识less。

    三、变量用作类名

    把变量用作类名?当然可以!
    语法:@属性名:类名;

    //定义
    @demo:newClass;
    
    .@{demo}-new{ // "-new"在类名基础上,新的类名 newClass-new
       @bg:rgb(0,0,0);
       background:@bg;
    }
    //div使用此类名
    <div class="newClass-new">
    	<p>demo</p>
    </div>
    

    生成的css代码:

    .newClass-new {
      background: #000000;
    }
    

    四、变量用作链接

    语法:@变量:路径;

    //链接可以为任何链接*注意放置的位置
    @bg-img:"路径";
    
    header{
      background:url(@bg-img);
    }
    

    生成的css代码:

    header {
      background: url("路径");
    }
    

    使用路径两个字,加深对less的认识,灵活运用变量!

    五、定义多个变量

    less会从当前作用域中从下往上搜索,这个行为类似于css的定义:始终使用最后定义的属性值!
    当然,定义同一变量名称(名字)两次或多次后,less只会选择最后定义的!

    @bg-img:"路径1";
    @bg-img:"路径2";
    @bg-img:"路径3";
    
    header{
        background:url(@bg-img);
    }
    //结果为:background: url("路径3");
    
    header{
        background:url(@bg-img);
    }
    
    @bg-img:"路径1";
    @bg-img:"路径2";
    @bg-img:"路径3";
    //结果为:background: url("路径3");
    

    这点充分证明了less规定,只会选择最后所定义的!

    六、混合

    语法:.规则集名称{…}
    将一系列属性从一个规则集中引入到另一个规则集方式。
    简单说就是less中定义的类可以直接放到其他类中,复用性极强。

    //定义规则集
    .public{
        @COLOR:rgb(245,200,110);
        background:@COLOR;
    }
    
    div{
        .public;
    }
    

    生成的css代码:

    .public {
      background: #f5c86e;
    }
    div {
      background: #f5c86e;
    }
    

    不难发现“ .public ”这个规则集在css代码中也有显示,这显然不是我们需要的“ 简洁代码 ”。
    方法很简单,只需要在此规则集中加入“ () ”,如.public(){…}。

    七、混合(带选择器)

    在规则集中,你可以放入选择器。
    语法:.规则集名称{&:选择器}

    //定义规则集,包含:hover伪类选择器
    .public(){
        &:hover{
            @COLOR:rgb(245,200,110);
            background:@COLOR;
        } 
    }
    
    header{ //此时&:hover父级元素变为header
        .public;
    }
    div{ //此时&:hover父级元素变为div
        .public;
    }
    

    生成的css代码:

    header:hover {
      background: #f5c86e;
    }
    div:hover {
      background: #f5c86e;
    }
    

    总结:” &:选择器 “,选择当前所在规则集(类)的父元素。

    八、混合(带参数)

    像函数一样,传递参数!
    语法:.规则集名称(形参1,形参2,…){…}

    .public(@COLOR;@WIDTH){
        background:@COLOR;
        width:@WIDTH;
    }
    
    header{
        .public(red;100%); //red传给@CLOLR形参 100%传给@WIDTH形参
    }
    

    生成的css代码:

    header {
      background: red;
      width: 100%;
    }
    

    形参也可以使用默认值,如上述例子:@COLOR → @COLOR:red,这样就不需要传递实参了。

    九、混合(多个参数)

    实参存在多个值,如:1px solid green,这些都需要传入形参,那么该如何分隔?

    .public(@width;@demo){
        border:@demo;
        width:@width;
    }
    
    header{
        .public(1px solid red;100%);
    }
    

    生成的css代码:

    header {
      border: 1px solid red;
      width: 100%;
    }
    

    总结:根据属性值的语法使用即可。

    一个组合可以带多个参数,参数之间使用逗号或分号进行分割。
    (1).public(@COLOR;@WIDTH)
    (2).public(@COLOR,@WIDTH)
    注意:
    (1)由于逗号可解释为mixins参数分隔符或css列表分隔符,所以尽量使用分号。
    (2)如果参数是多个的话,使用逗号分隔开,然后分号代表结束。
    (3)如果传参的括号里面全部都是以逗号分割,那么会依次传给各个参数值。
    (4)如果传参的括号里既有逗号,又有分号,则分号之前的当作一个整体,发给第一个参数。

    十、arguments变量

    argument代表所有的可变参数,按照形参列表先后顺序。

    .public(@demo1:1px;@demo2:solid;@demo3:red){
        border:@arguments;
    }
    
    div{
        .public();
    }
    

    生成的css代码:

    div {
      border: 1px solid red;
    }
    

    注意:值要一一对应

    十一、匹配模式

    .f_l(){
        float:left;
    }
    .f_r{
        float:right;
    }
    
    div{
        .f_l;
    }
    

    生成的css代码:

    div {
      float: left;
    }
    

    十二、得到混合变量的返回值

    在规则集中进行运算,返回值由使用该规则集的类,通过传递参数并返回。

    .public(@pd1;@pd2){
        @s:(@pd1+@pd2)
    }
    
    div{
        .public(10;10);
        padding:@s;    
    }
    

    生成的css代码:

    div {
      padding: 20;
    }
    

    十三、嵌套规则

    HTML代码:

    <header>
    	<ul>
    		<li><a href="#">demo1</a></li>
    		<li><a href="#">demo2</a></li>
    		<li><a href="#">demo3</a></li>
    	</ul>
    </header>
    

    Less代码:

    header{
            border:1px solid rgb(0,0,255);
        ul{
            list-style:none;
        }
        li{
            background:rgb(255,255,0);
            a{
                text-decoration:none;
            }
        }
    }
    

    生成的css代码:

    header {
      border: 1px solid #0000ff;
    }
    header ul {
      list-style: none;
    }
    header li {
      background: #ffff00;
    }
    header li a {
      text-decoration: none;
    }
    

    试用方法非常简单,与HTML结构相似,从而使得CSS结构清晰、更加利于后期维护和扩展。

    十四、父元素选择器&

    使用 & 运算符来引用父选择器。

    a {
      color: rgb(0,0,0);
      &:hover {
        background-color: red;
      }
    }
    

    生成的css代码:

    a {
      color: rgb(0,0,0);
    }
    a:hover {
      background-color: red;
    }
    

    这样也是可以的:

    .header{
      &>p{
        color:red;
      }
      &+.content{
        color:yellow;
      }
      & div{
        color:red;
      }
      &~p{
        color:green;
      }
      &&{
        color:green;
      }
      &>&{
        color:blue;
      }
    }
    

    生成的css代码:

    .header > p {
      color: red;
    }
    .header + .content {
      color: yellow;
    }
    .header div {
      color: red;
    }
    .header ~ p {
      color: green;
    }
    .header.header {
      color: green;
    }
    .header > .header {
      color: blue;
    }
    

    十五、改变 & 顺序及生成所有可能的选择器列表

    将&后置,将当前的选择器提到父级。

    .side{
      div&{
        color:cyan;
      }
    }
    #side{
      div&{
        color:green;
      }
    }
    
    ul{
      li{
        .item{
          div &{
            color:orange;
          }
        }
      }
    }
    

    生成的css代码:

    div.side {
      color: cyan;
    }
    div#side {
      color: green;
    }
    div ul li .item {
      color: orange;
    }
    

    生成所有可能的选择器列表
    当多个同级选择器用“,”隔开时,其子级使用连续多个&时,例如&+&或&-&或& &等,会生成所有可能的组合。

    div,p,a,li{
      &+&{
        color:green;
      }
    }
    

    生成的css代码:

    div + div,
    div + p,
    div + a,
    div + li,
    p + div,
    p + p,
    p + a,
    p + li,
    a + div,
    a + p,
    a + a,
    a + li,
    li + div,
    li + p,
    li + a,
    li + li {
      color: green;
    }
    

    十六、运算

    less会为你自动推断数值的单位,所以你不必每一个值都加上单位,但最好有一个。
    任何数值,颜色和变量都可以进行运算。

    .div{
       padding:500px + 300;
    }
    

    生成的css代码:

    .div{
      padding:800px;
    }
    

    注意:运算符与值之间必须以空格分开,涉及优先级时可以以()进行优先级运算。

    十七、命名空间

    将一些需要的混和组合在一起,可以通过嵌套多层id或者class来实现。
    当我们拥有了大量选择器的时候,特别是团队协同开发时,如何保证选择器之间重名问题?

    #mynamespace() { //加 () 表示不输出到css
       .home {...}
       .user {...}
    }
    

    这样我们就定义了一个名为 mynamespace 的命名空间,如果我们要复用 user 这个选择器的时候,在需要混入这个选择器的地方,只需使用 #mynamespace > .user 就可以了。

    将一个选择集其中的一部分拿出来,只采用这一部分数据操作

    #bgcolor(){ // 加()默认不输出
        background: #ffffff;
        .a{
            color: #888888;
            &:hover{
                color: green;
            }
            .b{
                background: red;
            }
        }
    }
    .bgcolor1{
        background: yellow;
        #bgcolor>.a;    // >符号表示选中混合中的每一个样式
    }
    .bgcolor2{
        // #bgcolor>.a>.b;
        #bgcolor .a .b;  // 省略写法:将>换成空格即可
    }
    

    生成的css代码:

    .bgcolor1 {
      background: yellow;
      color: #888888;
    }
    .bgcolor1:hover {
      color: green;
    }
    .bgcolor1 .b {
      background: red;
    }
    .bgcolor2 {
      background: red;
    }
    

    作用域:首先会在局部查找变量和混合,如果没找到,编译器会在父作用域中查找,以此类推。

    引入(importing):你可以引入一个或者多个less文件,这些文件中的所有变量都可以在当前的less项目中使用
    引入方式:@import “main.less”; 必须有;结尾,最好写上后缀名
    注意:应用.css文件会被原样输出到编译的文件中,所以无法对其进行加工,无法运用里面的样式
    可以带参数:

    默认是once,一次
    import (reference) “mian.less”; 这样引用的那个文件编译后的css文件只会采用计算后的变量值,原样的css样式不会输出
    inline 原样输出到css文件中,不能在less文件中取变量等操作
    less 将文件作为less对象,而不管事什么文件扩展名
    css 将文件作为css对象,而不管是什么文件扩展名
    multiple 允许引入多次文件名相同的文件,和once对立

    @import "main.css";  // 原样输出,无法用里面的变量等
    @import "main.less"; //可以用里面的变量
    @import (reference) "main"; // 引用less文件,但不输出原本的内
    @import (inline) "main.less";// 必须添加后缀名,否则报错,引用less文件,但不能操作
    @import (once) "main.less"; // 原样输出,且进行加工,只能使用一次
    @import (less) "main.css";  // 将css文件作为less文件使用,原样输出,并加工一次
    @import (css) "main.less";  // 将less文件作为css文件使用,只能原样输出,并不能操作
    @import (multiple) "main.less"; // 引用几次就输出几次
    @import (multiple) "main.less";     
    @import (multiple) "main.less";   
    

    十八、Less函数

    点击这里查看函数库大全。

    展开全文
  • less的基本用法

    千次阅读 2019-02-14 17:17:22
    title: less的基本用法 copyright: true date: 2019-02-14 14:58:00 tags: less的基本用法 keywords: less的基本用法 description: less的基本用法,对less的理解,less的由来等 less的基本用法 欢迎访问我的博客,...

    欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

    1 前言

    当我们用多了CSS的时候,特别是由后端转前端的道友们用CSS的时候,会发现CSS简单易懂,但是毫无逻辑,我们来看看下面几种情况:

    1. 常常一个颜色的值能出现很多很多次,或者一个宽度的值能出现很多次;
    2. 大量的选择器在代码中,一会用那个,一会用这个,毫无逻辑,无层次,不美观,不易维护;
    3. 每一个新属性的诞生又会带来大量浏览器兼容性的问题;
    4. 此外,CSS虽然易学,好用,但其短板不可忽视,于是就引入了预处理语言

    2 预处理语言

    我了解到的是lesssass,这里在后面会主要说less,欢迎道友补充指正

    2.1 sass

    sass诞生于2007年,是一个将脚本解析成CSS的脚本语言,最开始叫缩进语法,较新的叫SCSS,使用和CSS一样的块语法,即使用大括号将不同的规则分开,使用分号将不同的样式分开,通常扩展名为.sass或者.scss包含变量,嵌套,混入等,和less类似,下面看less,学会了less的基本语法,对sass就能有一定程度的掌握了

    2.2 less

    less是一门CSS预处理语言,它扩充了CSS,增加了我们前面提到的能够使得代码更有逻辑性的东西,例如变量,混入,函数等,后缀名为.less,同时,less可以运行在Node或者浏览器端

    2.2.1 less 初体验

    使用 less 方案一

    1. 引包:在页面中直接引入less.js,可去官网下载放到自己的依赖包文件中,或者利用CDN在线引入
    <script src="/libs/less.js/2.7.2/less.min.js"></script>
    
    1. 引入自己写好的less文件link 标签一定要在 Less.js 之前引入,并且 link 标签的rel 属性要设置为stylesheet/less
    <link rel="stylesheet/less" href="/less/style.less">
    <script src="/libs/less.js/2.7.2/less.min.js"></script>
    
    1. 书写CSS文件看看
    /* style.css */
    div {
      background: #e92323;
    }
    a:hover {
      color: #e92323;
    }
    .box {
      color: #e92323;
    }
    
    1. 我们用less语法去书写和上面CSS同样功能的代码来看看
    /* style.less */
    @mainColor:#e92323;
    @className:box;
    
    div{
      background: @mainColor;
    }
    a:hover{
      color: @mainColor;
    }
    //变量用于字符拼接使用方法
    .@{className}{
      color: @mainColor;
    }
    
    1. 总结:很显然,我们看出将经常出现的#e92323的值存储在一个变量中,这样清晰直观,假如需要修改某个网站的主题色,那么直接修改这个变量即可,我们.box这个类选择器也储存在一个变量中,同样的道理,易于维护
    2. 到这里,你可能已经爱上它了

    使用 less 方案二

    1. 使用包管理工具npm直接安装less
    npm i less -g
    
    1. 使用命令,将less文件编译成css文件
    lessc style.less > style.css
    
    1. webpack打包工具中可以使用less-loader处理

    2.2.2 编译工具

    在这里可以选用VSCode或者Sublime Text 3,在使用less之前,建议大家先给自己的开发工具安装一个牛逼轰轰的插件,在VSCode中,可以Ctrl + Shift + X到左侧扩展商店里安装Easy LESS插件,在Sublime中安装Less2Css插件,他们有什么用呢?他们可以实时编译less文件为CSS文件,方便及时修改和查看,另外sublime安装插件的方法,请移步sublime安装插件&常用的sublime插件

    效果大概如下图

    variables

    2.2.3 变量

    关于less中变量、函数等,其实就和我们接触到的其他语法中的理解起来差不多,下面来举例理解

    变量:想想js里面的变量,是干什么的?存储值,防止同一个值重复出现,提高代码维护效率,这里其实差不多

    /* style.less */
    
    @charset "UTF-8";
    /*注释:在css当中可以使用,所有编译的过程当中生成在css文件*/
    //注释:css不支持,不会编译在css文件
    
    /*变量*/
    //必须@前缀,:是等于的以上,必须分号结束;
    //不能以数组开头,不能包含特殊字符,区分大小写
    @mainColor:#e92323;
    @className:box;
    
    div{
      background: @mainColor;
    }
    a:hover{
      color: @mainColor;
    }
    //变量用于字符拼接使用方法
    .@{className}{
      color: @mainColor;
    }
    
    /* style.css */
    @charset "UTF-8";
    /*注释:在css当中可以使用,所有编译的过程当中生成在css文件*/
    /*变量*/
    div {
      background: #e92323;
    }
    a:hover {
      color: #e92323;
    }
    .box {
      color: #e92323;
    }
    

    2.2.4 嵌套

    十分神奇,写完它,你会觉得样式代码层次感十足,逻辑分明,主要是看着爽,选择器便于查找,易于维护

    这是我做的一个防微金所小项目里的一段代码

    @charset "UTF-8";
    .wjs_app{
      display: block;
      img{
        display: none;
      }
      // 需要连接的情况使用 &
      &:hover{
        img{
          display: block;
          position: absolute;
          left: 50%;
          margin-left:-60px;
          border: 1px solid #ccc;
          border-top: none;
          top:40px;
          z-index: 100000;
        }
      }
      >div{
        display: block;
      }
      &::before{
        content: "";
      }
    }
    
    @charset "UTF-8";
    .wjs_app {
      display: block;
    }
    .wjs_app img {
      display: none;
    }
    .wjs_app:hover img {
      display: block;
      position: absolute;
      left: 50%;
      margin-left: -60px;
      border: 1px solid #ccc;
      border-top: none;
      top: 40px;
      z-index: 100000;
    }
    .wjs_app > div {
      display: block;
    }
    .wjs_app::before {
      content: "";
    }
    

    看看以上的代码,less文件中是不是层次感十足,这里说几点问题

    1. &,当需要连接时使用&,代表上层选择器的名字,这里代表.wjs_app,例如可以写&:active&::before&:hover等等
    2. 其他选择器,例如>,即与父元素有直接的血缘关系的子元素,在后面直接接上就行
    2.2.4.1 媒体查询@media

    媒体查询,在响应式布局上应用十分广泛,那么在CSS中我们往往需要将一个类分开写,例如下面这样

          .container{
            width:750px;
          }
          @media screen and (max-width:768px){
            .container{
              background: red;
            }
          }
    

    而在less中,可以利用嵌套,将他们写在一块

          /* Less */
          .container{
              width: 750px;
        
              @media screen{
                  @media (max-width:768px){
                    background-color: red;
                  }
              }
              @media tv {
                background-color: yellow;
              }
          }
    
          @media screen and (maxwidth:768px){
           .container{
                background-color: red; 
            }
          }
          @media tv{
            .container{
              background-color: yellow;
            }
          }
    

    2.2.5 函数

    2.2.5.1 一些内置函数

    判断isnumberiscolorisurl,分别判断是否是一个数字,颜色,url

    颜色操作lighten增加颜色亮度,darken降低颜色亮度,fade增加透明度,mix根据比例混合两种颜色,saturate增加颜色饱和度等等

    数学函数ceil向上取整,floor向下取整,round四舍五入,sqrt平方根,abs绝对值,pow幂,percentage浮点数转化为百分比字符串等

    2.2.5.2 自己写个函数来用用
    .fun() {
      width: 100px;
    }
    
    .container {
      .fun();
    }
    
    .container {
      width: 100px;
    }
    

    2.2.6 混入

    1. 组合样式混入
    2. 类混入
    3. 函数混入
    @charset "UTF-8";
    /*混入*/
    /*组合样式的例子*/
    .w50{
     width: 50%;
    }
    .f_left{
     float: left;
    }
    .f_right{
     float: right;
    }
    /*类混入*/
    .w50-f_left{
     .w50();
     .f_left();
    }
    
    /*函数混入*/
    /*定义函数*/
    .w50(){
      width: 50%;
    }
    /*定义函数包含参数*/
    .f_left(){
     float: left;
    }
    .f_right(){
     float: right;
    }
    /*
    1.定义了参数(没有默认值),调用的时候必须传参
    2.怎么定义默认值 和定义变量值是一样的
    3.定义了参数(有默认值),可传可不传
    */
    .f(@direction:left){
      float: @direction;
    }
    .borderRadius(@width:100px){
      border-radius: @width;
      -webkit-border-radius:@width;
      -moz-border-radius:@width;
      -o-border-radius:@width;
      -ms-border-radius:@width;
    }
    .w50-f_left{
      .w50();
      .f(right);
      .borderRadius(20px);
    }
    
    
    @charset "UTF-8";
    /*混入*/
    /*组合样式的例子*/
    .w50 {
      width: 50%;
    }
    .f_left {
      float: left;
    }
    .f_right {
      float: right;
    }
    /*类混入*/
    .w50-f_left {
      width: 50%;
      float: left;
    }
    /*函数混入*/
    /*定义函数*/
    /*定义函数包含参数*/
    /*
    1.定义了参数(没有默认值),调用的时候必须传参
    2.怎么定义默认值 和定义变量值是一样的
    3.定义了参数(有默认值),可传可不传
    */
    .w50-f_left {
      width: 50%;
      float: right;
      border-radius: 20px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      -o-border-radius: 20px;
      -ms-border-radius: 20px;
    }
    
    

    2.2.7 继承 extend

    能够继承所匹配的所有样式,但不会继承其子元素的内容

          .container {
          	width: 100px;
          	.other {
          		color: red;
          	}
          }
          .content {
          	&:extend(.container);
          }
          .span {
          	&:extend(.container .other);
          }
    
    .container,
    .content {
      width: 100px;
    }
    .container .other,
    .span {
      color: red;
    }
    
    

    2.2.8 运算

    less语法中可以进行简单的运算,首先我们来看下面一段代码

    @num:9;
    ul{
      width: 100%*@num;
      li{
        width: 100%/@num;
        color: red+yellow+blue;
        background: gray*0.7;
        /*内置函数*/
        border-color: darken(red,20%);
      }
    }
    
    ul {
      width: 900%;
    }
    ul li {
      width: 11.11111111%;
      color: #ffffff;
      background: #5a5a5a;
      /*内置函数*/
      border-color: #990000;
    }
    

    其实看到这里,我们可以引申一点,bootstrap的栅格布局原理,这是其中之一了,当然只是引申,想要了解全部的,请移步Web前端中的几种流行布局

    2.2.9 导入

    那么学了以上那些内容,其实就可以将我们平常写的CSS文件,大概分为变量、函数、等等,然后导入到一个具主要处理的文件中,再通过嵌套、混入、运算等写一个完整的层叠样式表了,这样写的好处是,功能分明,易于维护

    1. 导入less文件,可省略后缀
    @charset "UTF-8";
    
    @import "variables";
    
    @import "mixins";
    
    @import "topBar";
    
    @import "banner";
    
    @charset "UTF-8";
    /*注释:在css当中可以使用,所有编译的过程当中生成在css文件*/
    /*变量*/
    div {
      background: #e92323;
    }
    a:hover {
      color: #e92323;
    }
    .box {
      color: #e92323;
    }
    
    .w50-f_left {
      width: 50%;
      float: right;
      border-radius: 20px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      -o-border-radius: 20px;
      -ms-border-radius: 20px;
    }
    .wjs_app {
      display: block;
    }
    .wjs_app img {
      display: none;
    }
    .wjs_app:hover img {
      display: block;
      position: absolute;
      left: 50%;
      margin-left: -60px;
      border: 1px solid #ccc;
      border-top: none;
      top: 40px;
      z-index: 100000;
    }
    .wjs_app > div {
      display: block;
    }
    .wjs_app::before {
      content: "";
    }
    

    是不是很爽?

    1. @import 的位置可随意放置
    .container {
        width: 100px;
    }
    
    @import "style";
    
    2.2.9.1 reference

    引入的 Less 文件,但不编译

    @import (reference) "style";
    
    2.2.9.2 once

    less文件只导入一次,其余导入的该less文件都不会被解析

    @import (once) "style.less"; // 文件会被解析
    @import (once) "style.less"; // 该文件不会被解析
    
    2.2.9.3 multiple

    允许导入多个同名文件,但是都会被解析

    @import (multiple) "style.less"; // 文件会被解析
    @import (multiple) "style.less"; // 文件也会被解析
    

    2.3 less 和 sass 的区别

    lesssass最大的区别在于其实现方式不同

    less是基于javascript运行,所以less也常用语客户端处理

    sass是基于Ruby,常在服务端处理

    3 参考文章

    展开全文
  • less的四种使用方法介绍

    千次阅读 2018-05-25 21:11:27
    1、直接引入less.js使用步骤:1、到less官网,下载less文件2、在编译器中新建一个less文件,引入到我们的html页面中(注意下面的和css的引入方式稍微有些不同哦,看rel)&lt;link href="css/style.less&...

    1、直接引入less.js

    使用步骤:

    1、到less官网,下载less文件

    2、在编译器中新建一个less文件,引入到我们的html页面中(注意下面的和css的引入方式稍微有些不同哦,看rel)

    <link href="css/style.less" rel="stylesheet/less"/>

    3、引入我们下载的less文件

    <script src="js/less.min.js"></script>
    然后就可以使用了

    好处:能获取到客户端的数据,从而进一步计算

    坏处:在客户端解析less,造成性能浪费,不利于维护(不推荐)

    2、koala编译器

    使用步骤:

    1、在koala-app.com中下载软件就可以

    2、打开koala软件,然后将我们的less所在的文件夹拖拽到软件中

    3、koala会自动读到less文件,然后点击less文件,单击右键,选择输出的路径以及编译后的css文件名,之后在右侧菜单栏点击执行编译即可(上面的选项,只要把自动编译勾选即可,输出方式可以选择normal也可以选择compress(压缩)的方式,搜可以,其他的不需要管)

    4、编译成功,会在我们指定的文件夹中生成一个css文件,之后将这个css文件引入我们的html文件中即可

    (推荐小白使用)

    3、在服务器环境编译  利用node中的包管理器

    使用步骤:

    1、需要下载安装node环境,检测安装成功的方法在命令行输入npm,如果安装成功就会有一些信息,错了,就会报错

    简单说一下打开命令行的方法(windows系统)win+R——输入cmd——enter——进入命令行——输入npm——按enter键

    安装less:在命令行输入命令:npm i  -g less@lateast之后按回车即可(检验是否安装成功,在命令行输入lessc,然后回车,安装成功会有一些信息,失败也会报错)

    然后在命令行中进入我们存放less文件所在的文件夹,进入之后输入(如果我们的less文件名为style.less)lessc  style.less > index.css(大于号后面是我们想要style.less编译为的css的文件名,我们这里把它命名为index.css)之后点击回车,我们的文件夹就会多一个index.css文件,之后也是引入css文件即可

    4、在编译器中实时编译(配置稍微麻烦,但本人比较喜欢这一种)

    这种方法也需要安装node,之后用npm安装less,和上面的安装方法一样

    win+R——输入cmd——enter——进入命令行——输入npm——按enter键——npm i  -g less@lateast之后按回车即可

    然后打开我们的编译器(以webstorm为例,其他的也都大同小异)

    点击文件(File)——找到Tools——File Watchers——找到右侧有个加号(+)——单击加号找到less选择less——弹出一个菜单,找到Program:后面让选择程序,找到我们安装的less程序

    注:找到程序的方法:先找到C盘——users——用户(也可能是你的名字,自己起的)——AppData(如果这里找不到的话,可以找到这个菜单上面几个图标中的最后一个(Show Hidden Files and Directiories)即可找到)——Roaming——npm——lessc.cmd,选中之后,其它的不用管直接点击ok,然后再点ok即可

    之后我们再去建一个less文件,它就会自动生成一个同名的css文件,把这个css文件引入我们的HTML文件中即可

    我比较喜欢第四种,在实际的项目中,比较推荐的也是最后两种方法,对于初学者可能稍微麻烦,但熟悉之后就特别简单了

    展开全文
  • linux中cat、more、less命令区别详解

    万次阅读 多人点赞 2013-11-22 09:40:08
    众所周知linux中命令cat、more、less均可用来查看文件内容,主要区别有: cat是一次性显示整个文件的内容,还可以将多个文件连接起来显示,它常与重定向符号配合使用,适用于文件内容少的情况; more和less一般用于...

    众所周知linux中命令cat、more、less均可用来查看文件内容,主要区别有:
    cat是一次性显示整个文件的内容,还可以将多个文件连接起来显示,它常与重定向符号配合使用,适用于文件内容少的情况;
    more和less一般用于显示文件内容超过一屏的内容,并且提供翻页的功能。more比cat强大,提供分页显示的功能,less比more更强大,提供翻页,跳转,查找等命令。而且more和less都支持:用空格显示下一页,按键b显示上一页。下面详细介绍这3个命令。

    cat

    1、命令格式
    cat [选项]... [文件]...
    2、命令功能
    将[文件]或标准输入组合输出到标准输出。
    cat主要有三大功能:
    1).一次显示整个文件:cat filename
    2).从键盘创建一个文件:cat > filename 只能创建新文件,不能编辑已有文件.
    3).将几个文件合并为一个文件:cat file1 file2 > file
    3、常用参数列表
      -A, --show-all            等于-vET
      -b, --number-nonblank 对非空输出行编号
      -e                        等于-vE
      -E, --show-ends           在每行结束处显示"$"
      -n, --number          对输出的所有行编号
      -s, --squeeze-blank       不输出多行空行
      -t                        与-vT 等价
      -T, --show-tabs           将跳格字符显示为^I
      -u                        (被忽略)
      -v, --show-nonprinting    使用^ 和M- 引用,除了LFD和 TAB 之外
          --help                显示此帮助信息并退出
          --version             显示版本信息并退出

    4、实例

    对非空输出行编号



    输出所有行号:



    more

    more命令,功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上。 more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 b 键就会往回(back)一页显示,而且还有搜寻字串的功能 。more命令从前向后读取文件,因此在启动时就加载整个文件。

    1、命令格式
     more [-dlfpcsu] [-num] [+/pattern] [+linenum] [file ...]
    2、命令功能
    more命令和cat的功能一样都是查看文件里的内容,但有所不同的是more可以按页来查看文件的内容,还支持直接跳转行等功能。
    3、常用参数列表
         -num  一次显示的行数
         -d    在每屏的底部显示友好的提示信息
         -l    忽略 Ctrl+l (换页符)。如果没有给出这个选项,则more命令在显示了一个包含有 Ctrl+l 字符的行后将暂停显示,并等待接收命令。
         -f     计算行数时,以实际上的行数,而非自动换行过后的行数(有些单行字数太长的会被扩展为两行或两行以上)
         -p     显示下一屏之前先清屏。
         -c    从顶部清屏然后显示。
         -s    文件中连续的空白行压缩成一个空白行显示。
         -u    不显示下划线
         +/    先搜索字符串,然后从字符串之后显示
         +num  从第num行开始显示
    4、常用操作命令
    Enter    向下n行,需要定义。默认为1行
    Ctrl+F   向下滚动一屏
    空格键   向下滚动一屏
    Ctrl+B   返回上一屏
    =        输出当前行的行号
    :f      输出文件名和当前行的行号
    v        调用vi编辑器
    !命令    调用Shell,并执行命令 
    q        退出more
    

    less

    less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux正统查看文件内容的工具,功能极其强大。less 的用法比起 more 更加的有弹性。在 more 的时候,我们并没有办法向前面翻, 只能往后面看,但若使用了 less 时,就可以使用 [pageup] [pagedown] 等按键的功能来往前往后翻看文件,更容易用来查看一个文件的内容!除此之外,在 less 里头可以拥有更多的搜索功能,不止可以向下搜,也可以向上搜。

    1.命令格式:
    less [参数]  文件 
    2.命令功能:
    less 与 more 类似,但使用 less 可以随意浏览文件,而 more 仅能向前移动,却不能向后移动,而且 less 在查看之前不会加载整个文件。
    3.命令参数:
    -b <缓冲区大小> 设置缓冲区的大小
    -e  当文件显示结束后,自动离开
    -f  强迫打开特殊文件,例如外围设备代号、目录和二进制文件
    -g  只标志最后搜索的关键词
    -i  忽略搜索时的大小写
    -m  显示类似more命令的百分比
    -N  显示每行的行号
    -o <文件名> 将less 输出的内容在指定文件中保存起来
    -Q  不使用警告音
    -s  显示连续空行为一行
    -S  行过长时间将超出部分舍弃
    -x <数字> 将“tab”键显示为规定的数字空格
    /字符串:向下搜索“字符串”的功能
    ?字符串:向上搜索“字符串”的功能
    n:重复前一个搜索(与 / 或 ? 有关)
    N:反向重复前一个搜索(与 / 或 ? 有关)
    b  向后翻一页
    d  向后翻半页
    h  显示帮助界面
    Q  退出less 命令
    u  向前滚动半页
    y  向前滚动一行
    空格键 滚动一页
    回车键 滚动一行
    

    参考:

    http://www.cnblogs.com/peida/archive/2012/10/30/2746968.html

    http://www.cnblogs.com/peida/archive/2012/11/02/2750588.html

    http://www.cnblogs.com/peida/archive/2012/11/05/2754477.html


    展开全文
  • less入门和使用(一)

    千次阅读 2018-03-28 14:59:09
    下载less.js文件到本地。2.在页面中引入自己的.less文件。&lt;link rel="stylesheet/less" href="styles.less" /&gt;3.引入下载的less.js文件。 &lt;script src="less.js"...
  • less

    2020-06-27 11:40:01
    1安装less依赖npm install less less-loader --save 2 修改webpage.base.config.js文件 { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, 3既可以使用使用其他的less文件 在style中@...
  • less笔记-Less安装与基础使用

    万次阅读 2016-09-13 11:14:33
    一、安装Less npm为Node.js的包管理器,通过npm可简易的安装Less。 Node.js下载地址:https://nodejs.org/en/ 下载的Node.js为msi文件,双击安装,选择安装npm即可。之后通过cmd进入安装目录(node.exe所在目录),...
  • less和css区别

    万次阅读 2018-07-16 19:31:48
    如果你没用过,恭喜,这是一个...首先,我们得知道Less能干什么。如: @width:300px; @fonts:12px bold "宋体,Verdana"; .block-header{ color:#5c5c5c; .elem-title{ font:@fonts; width:@width...
  • 看懂 Serverless,这一篇就够了

    万次阅读 多人点赞 2019-05-29 16:16:48
    文章目录1. 无服务器(Serverless)计算是什么2. 理解Serverless技术---FaaS和BaaS2.1 Faas(Function as a Service,函数即服务)2.2 Baas(Backend as a Service,后端即服务)3. 无服务器(Serverless)计算如何...
  • 首先我们需要先安装node.js在安装Less 网址:http://nodejs.cn/download/ 1.1 打开网址选择需要的版本下载 这里小编是win1064位 所以选择win10安装包(.msi)64位 根据自己的电脑配置选择需要的版本 1.2 打开下载的...
  • less的使用总结

    2019-07-04 16:28:00
    简单执行less 一、使用npm全局安装less: npm install -g less 二、创建less文件 三、执行命令将less文件转换成css文件 lessc less/style.less css/style.css less语法概括 参考文档:...
  • less 使用指南

    千次阅读 2018-01-08 15:50:48
    less 中文网 less 快速入门 less 指南 # 简介 Less is More, Than CSS - 少即是多,比如CSS。 Less 是一门 CSS 预处理语言。 Less 是一种由Alexis Sellier设计的动态层叠样式表语言,受Sass所影响,同时也...
  • react配置less或者sass

    万次阅读 2020-06-19 10:32:48
    react如何配置less(sass与less配置的方法基本一致,如果还是不会的朋友可以私信我) 接下来笔者会一步一步的跟朋友们一起去做配置 生成react项目, create-react-app <你的项目名> 可以将src目录中的文件删...
  • dvaJS项目配置less

    万次阅读 2020-06-19 10:31:18
    在.webpackrc或者.webpackrc.js文件里添加 disableCSSModules: true, ...我们写一个less文件并且用上less的语法看看我们配置成功了没有。 现在我们已经发现我们已经配置成功了,可以happy的写less语法了! ...
  • LESS 使用方法

    千次阅读 2017-12-24 17:47:30
    第一章 LESS简介 第一节 变量 第二节 混合 第三节 嵌套规则 第四节 函数 运算 第二章 使用 第一节 客户端使用 第二节 服务端使用 第三章 语法 第一节 变量 第二节 混合用法 第三节 带参数混合 第四节 嵌套规则 第五...
  • 使用Less

    千次阅读 2017-04-17 21:00:45
    为什么要使用预处理CSS在使用CSS过程中会遇到一个非常头疼的问题,因为CSS中没有像java/C++或者PHP等程序语言一样有有自己的变量、常量、条件语句以及一些编程语法,只是一行行单纯的属性描述,写起来相当的费事,...
  • Vue-cli中安装并使用Less

    万次阅读 2018-12-18 17:14:15
    首先安装vue-cli,网站教程...npm install less less-loader --save-dev 等待安装成功即可,接下里我们可以在vue项目中的package.json中看到less的相关依赖 接下来找到bulid目录下的webpack.base.conf.js并打...
  • 初学Less

    千次阅读 2016-08-15 16:40:06
    Less入门
  • LESS详解之编译LESS

    万次阅读 2013-10-31 10:00:56
    掌握LESS,必须先掌握LESS的编译。因为LESS是CSS预处理语言的一种,是一种动态语言。LESS可以运行在各种语言和环境中,包括浏览器端、服务器端等。就因为是一种CSS预处理语言,所以需要编译。下面为大家介绍一下编译...
  • 项目中安装 lessless-loader 命令

    万次阅读 2019-01-03 17:05:28
    npm install less less-loader --save-dev 或者 yarn命令如下: yarn add less less-loader --dev 建议安装在本地依赖,没必要装全局环境,安装成功后 package.json 如下:   要安装全局的话,直接参考less...
1 2 3 4 5 ... 20
收藏数 466,282
精华内容 186,512
关键字:

less