web前端基础篇⑥
LESS.
①是一种拓展技术,基于css。
②包含变量、混合、函数、运算。
③简化css代码、降低维护成本
④目前用的解析器(koala)
变量(值可变)
@变量名:值
步骤:
①建立文件夹
②建html和less两个文件
③启动koala
④配置路径
⑤输入一部分less-刷新koala
⑥生成用less命名的css文件
⑦在html里面引入的是css文件(不用建css文件)
less里引入文件
@important 可引入{less 可变的/css不可变的。
变量
@变量名:具体的值
混合(mixins)只有3类
class类/id类/元素类。
带参数的混合
.名称(参数){
属性名(参数)
给参数设置默认值(建议不用)
在上面的参数后直接加冒号,固定值
多参数混合
.mixin(@margin,@padding)
web前端基础篇⑥的更多相关文章
- web前端基础篇⑨
1.web端.app端 目前实现响应式布局,主要用以下两种方式.CSS原生代码响应式布局 @media screen.bootstrap移动设备优先.自带框架. 兼容性 用原生代码的话 根据不同的屏幕 ...
- web前端-基础篇
该篇仅是本人学习前端时,做的备忘笔记: 一.背景图片设置: 设置背景图时的css代码:background-image:url(图片的url路径); ps:设置好这个背景后请一定要设置该背景图片的大小 ...
- web前端基础篇⑧
1.伪类选择器 都以冒号开始.:focus 焦点的地方加样式:first-child 向元素的第一个子元素添加样式锚伪类:a:link {color:red} 未访问的链接 a:visited {co ...
- web前端基础篇①
html1.html5和css3在IE上都不支持2.超过1100px以上的宽度,就会出现滚动条3.<!doctype html>解析模式 分为 标准模式 混杂模式 非标准模式-针对IE6o ...
- web前端基础篇⑩
1.960栅格式布局法屏幕分辨率为1024*768.采用接 main宽为960px的布局方式12列式:每格60px 间距20px 3 6 3版 三格式布局(最常用)16列式:每格40px 间距20px ...
- web前端基础篇⑦
1.img src/url后一般接地址信息 标题为<h1>-<h6> 字体依次变小 预文本格式<pre></pre> 2.a标签实现跳转 例:<a ...
- web前端基础篇⑤
1.雪碧图技术(精灵图)sprite cpmpass-合并2.兼容性:1.reset充值技术,normalize技术2.加前缀-webkit —mom -ms— -o-3.<!Doctype&g ...
- web前端基础篇④
1.BFC-块级元素-块级格式化上下文布局规则:独立区域,与外部毫不相关内部box会在垂直方向,一个个放置box垂直方向距离由margin决定BFC的区域不会与float box重叠计算BFC高度时, ...
- web前端基础篇③
1.video视频 audio音频 controls出现控件 loop循环 autoplay自动播放例:<video/audio src=“地址” controls=“controls” loo ...
随机推荐
- 十分钟学会mysql数据库操作
Part1:写在最前 MySQL安装的方式有三种: ①rpm包安装 ②二进制包安装 ③源码安装 这里我们推荐二进制包安装,无论从安装速度还是用于生产库安装环境来说,都是没问题的.现在生产库一般采用My ...
- Tomcat 发布war包提示war包超出大小修改
error信息: java.lang.IllegalStateException: org.apache.tomcat.util.http.fileupload.FileUploadBase$Size ...
- miniUI datagrid 获取序号
获取每一个row以后,其中的row._index字段和页面上显示的序号虽然看起来一样, 但是实际上不是同一个东西,如果用客户端排序模式,排序后,row._index和页面显示的序号就对不上了. 正确的 ...
- noi 2718 移动路线
题目链接: http://noi.openjudge.cn/ch0206/2718/ 右上角的方案数 f(m,n) = f(m-1,n) + f(m,n-1); http://paste.ubuntu ...
- 2016年12月19日 星期一 --出埃及记 Exodus 21:14
2016年12月19日 星期一 --出埃及记 Exodus 21:14 But if a man schemes and kills another man deliberately, take hi ...
- HierarchyViewer for iOS 2.0 BETA Introduction
We know HierarchyViewer is an useful tool in Android SDK. The developer and tester, who haven't the ...
- python 的 from import 机制
[A.py] from B import D class C:pass [B.py] from A import C class D:pass 为什么执行A的时候不能加载D呢? 如果将A.py改为:i ...
- Cheatsheet: 2015 12.01 ~ 12.31
Mobile Setting Up the Development Environment iOS From Scratch With Swift: How to Test an iOS Applic ...
- python model对象转为dict数据
在接口通讯里经常遇到这种需求,需要将对象的字段名和值均传至接口,user = User.objects.get(id=1)笨方法1,没错,我这样写过:di = {}di['username'] = u ...
- python打怪之路【第三篇】:利用Python实现三级菜单
程序: 利用Python实现三级菜单 要求: 打印省.市.县三级菜单 可返回上一级 可随时退出程序 coding: menu = { '北京':{ '朝阳':{ '国贸':{ 'CICC':{}, ' ...