移动web开发(七)—— less

1.node.js 安装

1.1node.js 在网上自行下载

下载好后,会有以下目录,x86是32位的电脑,x64 是64位的电脑

20170217110452.png

2检测nodejs是否安装好了,
a.直接在右下角时输入cmd
b.直接快捷键:win+R然后在弹窗里面输入cmd回车
c.检测是否安装完成 node –v 查看版本

20170217110651.png

出现这个就说明已经安装成功

d.通过这个node来安装我们的less (两种安装方法:1.离线 2.在线)

1.2.在线安装less:

  1. lessc –v 查看版本 是否安装成功
20170217111019.png
  1. lessc –v 查看版本 是否安装成功

1.3离线安装:

1.如果APPData是隐藏的,C>用户>当前用户目录>查看>选项

20170217111623.png
  1. 删除已安装的less 首先打开C盘>用户>459233>APPData>Roaming>npm>删除掉里面的文件(删除的是刚刚在线安装的less)>lessc –v (检测是否删除掉了)

  2. 找到npm压缩包放到npm文件中(刚刚删除的文件里面)>解压到当前文件夹>剪切npm文件里面的文件放到跟npm同级,然后在删除npm文件夹,最后如图

20170217111701.png
compare.png

less学习网站

        [官网](http://lesscss.org/)
        [中文网](http://lesscss.cn/)

2.less语法学习

2.1 变量

@mianColor #333;

body{
    color:@mainColor;
}

2.2 Mixin(混入)

/*颜色*/
.red{
  color: @mainColor;
}
.border{
  border: 1px solid #ccc;
}
.redBorder(){
  color: @mainColor;
  border: 1px solid #ccc;
}
.mixin-class{
  .red();
  .border();
}
.mixin-fuc{
  .redBorder();
}

2.3嵌套

#wjs_banner{
  .carousel-inner{
    > div.item{
      a.img_box{
        background: url("../images/slide_01_2000x410.jpg") no-repeat center center;
        height: 410px;
        /*调用redBorder mixin*/
        display: block;
        .redBorder();
        /*调用@mainColor 变量*/
        &:hover{
          color: @mainColor;
      }
      }
      a.img_mobile{
        width: 100%;
        display: block;
        img{
          width: 100%;
          display: block;
        }
      }
    }
  }
}

2.4导入(import)

@import "base";

2.4函数(fn)

函数很多,要使用的话可以到官网上自行查询

最常用函数:fade(@color, 50%); // 设定透明度为 50%

3.less在浏览器上使用

在浏览器是使用less的话我们需要添加一个js插件
less.js 解析less文件动态加载head当中
这样了引用less文件

引用代码案例:

搜狗截图20170217171217.png

注意:它是异步的加载less文件然后解析

一定要求是 使用http形式访问否则无法加载less文件

不建议使用lessjs这种形式来用less

4.bootstrap自定义

方法一:使用本地node.js的less 自行编译(不建议使用)

方法二:使用bootstrap官网上面的定制即可,然后下载。(建议使用)

5.rem和em

5.1 rem 和 em 的区别

 em的大小是根据父类元素的font-size来设置的
  rem的大小是根据 html标签的font-size来设置的

5.2 rem 和 em 设置默认大小

em 和 rem 都有一个默认的初始大小 大小为16px

5.3 rem主要运用于响应式方面

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,830评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,992评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,875评论 0 331
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,837评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,734评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,091评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,550评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,217评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,368评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,027评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,623评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2 341

推荐阅读更多精彩内容