前端学习之路---移动web开发（二）

接＝＝＝》移动ｗｅｂ开发（一）下一篇 node.js

less

Less环境安装

安装nodejs

在部分win8系统当中无法安装

（解决办法的是已管理员权限运行cmd然后再按写命令切换到安装包目录，直接命令执行）

前端学习之路---移动web开发（二）

安装完成nodejs之后

检测是否安装完成 node –v 查看版本

然后检测 npm是否自带 npm –v 查看版本

在线安装

然后运行 npm install –g less (部分电脑要 sudo 管理权限)

前端学习之路---移动web开发（二）
Lessc –v 查看版本是否安装成功
学习less

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

[中文网](http://lesscss.cn/) http://www.1024i.com/demo/less/

Webstrom 插件

Lessc less.less less.css 编译less文件成css
简介

CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。

作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。
LESS 原理及使用方式

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。
语法

变量

Mixin混入

嵌套

Import

函数（内置函数运算）
变量

LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。
```
/*-----------------变量-----------------*/
@mainColor:#E93223;
body{     
    color: @mainColor;
}
           
```
Mixin混入

Mixin（混入）功能对用开发者来说并不陌生，很多动态语言都支持 Mixin（混入）特性，它是多重继承的一种实现，在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。
```
/*-----------------mixin 混入----------------*/
/*颜色*/
.red{
  color: @mainColor;
}
.border{
  border: 1px solid #ccc;
}
.redBorder(){
  color: @mainColor;
  border: 1px solid #ccc;
}
.mixin-class{
  .red();
  .border();
}
.mixin-fuc{
  .redBorder();
}
           
```

嵌套

在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式

/*------------------嵌套------------------*/
/*轮播图*/
#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;
        }
      }
    }
  }
}

Import 导入

/*---------------------Import 引入------------------------*/
@import "base";
.f_left{
  float: @right;
}

运算及函数

在我们的 CSS 中充斥着大量的数值型的 value，比如 color、padding、margin 等，这些数值之间在某些情况下是有着一定关系的，那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢？

http://www.1024i.com/demo/less/reference.html

escape(@string); // 通过 URL-encoding 编码字符串
e(@string); // 对字符串转义
%(@string, values...); // 格式化字符串
unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位
color(@string); // 将字符串解析为颜色值
data-uri([mimetype,] url); // * 将资源内嵌到css中，可能回退到url()
ceil(@number); // 向上取整
floor(@number); // 向下取整
percentage(@number); // 将数字转换为百分比，例如 0.5 -> 50%
round(number, [places: 0]); // 四舍五入取整
sqrt(number); // * 计算数字的平方根
abs(number); // * 数字的绝对值
sin(number); // * sin函数
asin(number); // * arcsin函数
cos(number); // * cos函数
acos(number); // * arccos函数
tan(number); // * tan函数
atan(number); // * arctan函数
pi(); // * 返回PI
pow(@base, @exponent); // * 返回@base的@exponent次方
mod(number, number); // * 第一个参数对第二个参数取余
convert(number, units); // * 在数字之间转换
unit(number, units); // * 不转换的情况下替换数字的单位
color(string); // 将字符串或者转义后的值转换成颜色
rgb(@r, @g, @b); // 转换为颜色值
rgba(@r, @g, @b, @a); // 转换为颜色值
argb(@color); // 创建 #AARRGGBB 格式的颜色值
hsl(@hue, @saturation, @lightness); // 创建颜色值
hsla(@hue, @saturation, @lightness, @alpha); // 创建颜色值
hsv(@hue, @saturation, @value); // 创建颜色值
hsva(@hue, @saturation, @value, @alpha); // 创建颜色值
hue(@color); // 从颜色值中提取 hue 值（色相）
saturation(@color); // 从颜色值中提取 saturation 值（饱和度）
lightness(@color); // 从颜色值中提取 'lightness' 值（亮度）
hsvhue(@color); // * 从颜色中提取 hue 值，以HSV色彩空间表示（色相）
hsvsaturation(@color); // * 从颜色中提取 saturation 值，以HSV色彩空间表示（饱和度）
hsvvalue(@color); // * 从颜色中提取 value 值，以HSV色彩空间表示（色调）
red(@color); // 从颜色值中提取 'red' 值（红色）
green(@color); // 从颜色值中提取 'green' 值（绿色）
blue(@color); // 从颜色值中提取 'blue' 值（蓝色）
alpha(@color); // 从颜色值中提取 'alpha' 值（透明度）
luma(@color); // 从颜色值中提取 'luma' 值（亮度的百分比表示法）
saturate(@color, 10%); // 饱和度增加 10%
desaturate(@color, 10%); // 饱和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 透明度增加 10%
fadeout(@color, 10%); // 透明度降低 10%
fade(@color, 50%); // 设定透明度为 50%
spin(@color, 10); // 色相值增加 10
mix(@color1, @color2, [@weight: 50%]); // 混合两种颜色
greyscale(@color); // 完全移除饱和度，输出灰色
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 如果 @color1 的 luma 值 > 43% 输出 @darkcolor，否则输出 @lightcolor
multiply(@color1, @color2);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);
iscolor(@colorOrAnything); // 判断一个值是否是颜色
isnumber(@numberOrAnything); // 判断一个值是否是数字（可含单位）
isstring(@stringOrAnything); // 判断一个值是否是字符串
iskeyword(@keywordOrAnything); // 判断一个值是否是关键字
isurl(@urlOrAnything); // 判断一个值是否是url
ispixel(@pixelOrAnything); // 判断一个值是否是以px为单位的数值
ispercentage(@percentageOrAnything); // 判断一个值是否是百分数
isem(@emOrAnything); // 判断一个值是否是以em为单位的数值
isunit(@numberOrAnything, "rem"); // * 判断一个值是否是指定单位的数值

例子

/*-------------------运算和函数--------------------------*/
@back:#333;
.test{
  border: 1px solid @back*2;
  background: lighten(#000, 10%);
  color:darken(#000, 10%);
}

Less在浏览器上使用的方法

<link rel="stylesheet/less" type="text/css" href="styles.less" target="_blank" rel="external nofollow"  />
<script src="less.js" type="text/javascript"></script>

1.less无法在浏览器端直接使用

2.浏览器不识别

3.必须解析成css代码

4.通过less解析插件（javascript）

5.引入less文件需要加上 type="text/less"

6.less.watch(); 无刷新预览样式

7.以http形式打开网页预览

rem-认识

<!DOCTYPE html>
<html  style="font-size: 50px">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            line-height: 1;
            font-size: 50px;
        }
        .em{
            font-size: 2em;
        }
        .rem{
            font-size: 2rem;
        }
        /*1.rem是相对单位*/
        /*2.em大小是基于父元素的字体大小*/
        /*3.rem的大小是基于？？？*/
        /*4.浏览器默认的字体大小是16px*/
        /*5. r 意思 root 根元素，html标签 */
        /*6. rem的大小是基于html元素的字体大小*/

    </style>
</head>
<body>

<div class="em">AAAAA</div>
<div class="rem">AAAAA</div>

</body>
</html>

rem-适配

<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <style>
        /*假设的设备  320px 414px 640px */
        @media (min-width: 320px) {
            html{
                font-size: 50px;
            }
        }
        @media (min-width: 414px) {
            html{
                font-size: 64.6875px;
            }
        }
        @media (min-width: 640px) {
            html{
                font-size: 100px;
            }
        }
        body{
            margin: 0;
            padding: 0;
            font-size: 14px;
        }
        /*流式容器*/
        header{
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            font-size: 0.32rem;
            text-align: center;
            background: green;
            color: #fff;
        }
    </style>
</head>
<body>
<!--1.伸缩布局   flex -->
<!--2.流式布局  百分比 -->
<!--3.响应布局  媒体查询 （超小屏设备的时候：流式布局）-->
<!--共同点：元素只能做宽度的适配（排除图片）-->
<!--适配方案rem：宽度和高度都能做到适配（等比缩放）-->
<!--4.rem布局-->
<!--通过控制html上的字体大小去控制页面上所有已rem为单位的基准值控制尺寸-->
<!--4.1 把页面上px单位转换成rem单位-->
<!--4.2 页面制作的时候 psd 上的量取的px转成rem使用-->
<!--4.3 怎么换算？？？预设一个基准值 方便计算 100px -->
<!--4.4 适配的时候设置基准值  320px  50px 怎么算：（640px 100px ===320px 50px）-->
<!--4.5 换算公式：当前rem基准值 = 预设的基准值 / 设计稿宽度 * 当前设备的宽度 -->
<!--4.6 怎么去改变 （js换算，媒体查询推荐）-->
<header>购物车</header>
</body>
</html>

前端学习之路---移动web开发（二）

接＝＝＝》移动ｗｅｂ开发（一）下一篇 node.js

继续阅读

CSS中伪类和伪元素的区别

Vue项目 - 单文件组件和Vue中的路由

左耳朵耗子：程序员如何拿到年薪60万的岗位？

聊一聊Swagger-UI的那些事情软件简介Swagger 原生Bootstrap-ui Bootstrap的UIKnife4j Bootstrap的升级版的UI

javascript console对象解读

React中less的引用初窥

没救了! 困扰程序员一辈子的5个魔咒, 改掉比登天还难！

[转]如何成长为一名全栈工程师全栈工程师

underscore模板功能的使用和学习

CSS之折叠菜单

web开发之前后端渲染

JavaScript的那些坑之事件代理事件代理事件阶段

ACS基本配置-权限等级管理

vue （vue2.0）使用总结(从大体结构总结)

父子组件间传值的实现父子组件间传值的实现

vue搭建过程及出现问题

前端学习之路---移动web开发（二）

接＝＝＝》移动ｗｅｂ开发（一） 下一篇 node.js

继续阅读

接＝＝＝》移动ｗｅｂ开发（一）下一篇 node.js