前端学习之路---移动web开发(二)
-
接===》移动web开发(一) 下一篇 node.js
- less
Less环境安装
安装nodejs
在部分win8系统当中无法安装
(解决办法的是 已管理员权限运行cmd然后再按写命令切换到安装包目录,直接命令执行)安装完成nodejs之后
检测是否安装完成 node –v 查看版本
然后检测 npm是否自带 npm –v 查看版本
在线安装
然后 运行 npm install –g less (部分电脑要 sudo 管理权限)
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" /> <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 lang="en" 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 lang="en"> <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>