前端CSS编程之道-LESS
由于前端css编写繁琐,最近开始学习LESS,用LESS编写文件.less文件可以直接编译成我们要的.css文件
学习Less 我下面是我练习时的截图,希望小伙伴也能动手自己写一下,而不是复制粘贴模式学习。动手敲能体会不一样
1.下载国内的koala的预处理器,可以自动把less编译成css
2.使用sublime安装插件,推荐这种方式,因为我们是前端攻城狮
变量
用@来声明变量
输出
发现变量还可以引入变量的。可以看@ref的特别使用。
如果对同一个变量定义的话,在当前作用域中最后一次定义的将被使用。这个与CSS的机制类似
输出
变量不一定要声明的时候才能使用的,是按需加载的
输出
混合(Mixins)
在less中我们可以定义一些通用的属性集为一个class,然后在另外一个class中去调用这些属性
输出
任何CSS class,id属性集都可以以同样的是方式引入。
带参数混合
输出
这个我特别喜欢,因为他可以做到几个浏览器的兼容。哈哈~~不过当你用sublime Text的
时候,有一个插件,可以直接帮你生成这些前缀。很强大很牛逼的东西 sublime-autoprefixer 大家可以去了解一下
参数混合可以带默认值
输出
倘若你想隐藏通用集合,那么你可以声明一个不带参数的混合
输出
多参数混合
有点比较复杂,不过我们不要把他使用太复杂就好
输出
希望大家看懂,第一个混合被调用了,第二个也被调用了,第三个没有被调用
1.因为只有一个参数的一定会调用你声明的第一个混和 .mixin,
2.当你第二个参数有默认值,那么使用一个参数,第二个参数就会默认的,所以也会调用
3.声明的第三个声明的混合没有被调用,因为第二个参数没有默认值。
在看下面的效果,调用的混合使用两个参数
输出
看见了吧
1.第一个声明的混合没有被调用
2.第二个声明被调用了
3.第三个声明也被调用了
*在这里说明一下,多参数可以用逗号分隔也可以用分号分隔,最好使用分号分隔
@arguments变量
对于多个参数的混合,我们可以使用@arguments变量
输出
大家还可以去了解一下@rest变量的使用,在这里就不在这里讲解了
!important关键字使用
输出
Guards模式的使用
输出
大家可以看见@_可以代表任何参数,可以放入.border集合共有的属性,还有一种实现方式
就是把color的参数也放入到.border(thick,@color:#fff)这样也可以,希望大家多思考。
Gurads的表达式
这个有点像编程中if/else
输出
Guards还支持运算符操作 下面是or的操作
输出
也可以这样是下面这种情况
还可以调用函数来判断,大家看下面就不用详解了吧
几种检查类型的函数和单位的函数
大家可以去了解一下 ,when的and和取非
希望大家能掌握好。
嵌套规则
输出
另一种串联的
输出
注意 &
符号的使用 — 如果你想写串联选择器,而不是写后代选择器,就可以用到 &
了。这点对伪类尤其有用如 :hover
和 :focus
还有就是&的高级用法
输出
运算
希望大家知道怎么使用了,这个很简单,不过现在的严格模式,希望都加上括号
命名空间
其他的类可以直接按命名空间来引入
输出
Media Query查询
输出
前端CSS编程之道-LESS的更多相关文章
- [读书笔记] Web 前端开发修炼之道
原创地址:http://www.cnblogs.com/bnbqian/p/3735565.html 转载请注明出处 今天我们要读的书是Web 前端开发修炼之道 第1章 从网站重构说起 1.1 糟糕的 ...
- 《编写高质量代码--Web前端开发修炼之道》读书笔记
前言 这两周参加公司的新项目,采用封闭式开发(项目成员在会议室里开发),晚上加班到很晚,所以没时间和精力写原创博客了,今天就分享下这篇<编写高质量代码--Web前端开发修炼之道>读书笔记吧 ...
- 《编写高质量代码:Web 前端开发修炼之道》 笔记与读后感
编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...
- 【项目总结】扯一扯电商网站前端css的整体架构设计(1)
最近半忙不忙的写了一个外包网站,网站主要功能是艺术品竞拍和艺术衍生品的销售.工程已经完成了80%左右,现在前后端代码量已经50W行左右,我主要负责的是前端设计和前端布局.下面就先放一个网站的设计图吧, ...
- 编写高质量代码:Web前端开发修炼之道(一)
最近老大给我们买来一些技术方面的书籍,其实很少搬着一本书好好的完整的看完过,每每看电子档的,也是打游击式的看看这章,瞅瞅那章,在那5本书中挑了一本比较单薄的<编写高质量代码web前端开发修炼之道 ...
- 扯一扯前端css的整体架构设计:(2)base基础类的那些事儿
周一下午在实验室写了第一篇博文,有几个人捧场,那咱就得接着下去啊.然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结,所以就把标题里原来的[项目总结]给删掉了.但 ...
- Web前端-CSS必备知识点
Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...
- WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
- 前端 CSS 目录
前端 CSS 介绍 前端 CSS语法 前端 CSS 注释
随机推荐
- Eclipse 设置文件的默认打开方式
web开发中,我们在编辑JSP/xml的时候,会碰到一个非常郁闷的事,直接双击打开的JSP页面,当我们在编辑的时候会到处跳,这个我是深有体会,所以我们就用右击 open with,但是久而久之我们会感 ...
- 如何使div左右倾斜
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...
- 向html中添加节点
简单: ①,js中: (function () { var box=document.querySelector("#box"); var con1=document.create ...
- robotframework笔记2
法文件和目录 层次结构安排测试用例构建如下: 在创建测试用例 测试用例文件 . 自动创建一个测试用例文件 测试套件 包含 测试用例文件. 一个目录包含测试用例文件形成一个更高级别的测试 套件. 这样一 ...
- JS实现会动的小车
2015-06-05怎么说呢,我想要实现的功能是很简单的,但是过程中,遇到不少问题. 我要实现的功能是页面右侧有辆小车,鼠标滚动或者拉动滚动条,小车消失,在底部点击“返还顶部”按钮后,页面缓慢向上滚动 ...
- 告别node-forever,拥抱PM2
告别node-forever,拥抱PM2 返回原文英文原文:Goodbye node-forever,hello PM2 devo.ps团队对JavaScript的迷恋已经不是什么秘密了;node.j ...
- tab切换-自动、点击、内容变换
<div class="tab"> <ul class="pics"> ...
- jQuery学习小结2——动画
一.基础动画 方法名 说明 show([speed,[easing],[fn]])hide([speed,[easing],[fn]]) speed:三种预定速度之一的字符串("slow&q ...
- BZOJ1066 [SCOI2007]蜥蜴
首先...这是道(很水的)网络流 我们发现"每个时刻不能有两个蜥蜴在同一个柱子上"这个条件是没有用的因为可以让外面的先跳,再让里面的往外跳 但是还有柱子高度的限制,于是把柱子拆点为 ...
- mysql的REGEXP 和like的详细研究和解释
1 regexp ^ 匹配字符串的开始部分 $ 匹配字符串的结束部分 . 匹配任何字符(包括回车和新行) a* 匹配0或多个a字符的任何序列 a+ 匹配1个或多个a字符的任何序列 a? 匹配0个或1个 ...