由于前端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的更多相关文章

  1. [读书笔记] Web 前端开发修炼之道

    原创地址:http://www.cnblogs.com/bnbqian/p/3735565.html 转载请注明出处 今天我们要读的书是Web 前端开发修炼之道 第1章 从网站重构说起 1.1 糟糕的 ...

  2. 《编写高质量代码--Web前端开发修炼之道》读书笔记

    前言 这两周参加公司的新项目,采用封闭式开发(项目成员在会议室里开发),晚上加班到很晚,所以没时间和精力写原创博客了,今天就分享下这篇<编写高质量代码--Web前端开发修炼之道>读书笔记吧 ...

  3. 《编写高质量代码:Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  4. 【项目总结】扯一扯电商网站前端css的整体架构设计(1)

    最近半忙不忙的写了一个外包网站,网站主要功能是艺术品竞拍和艺术衍生品的销售.工程已经完成了80%左右,现在前后端代码量已经50W行左右,我主要负责的是前端设计和前端布局.下面就先放一个网站的设计图吧, ...

  5. 编写高质量代码:Web前端开发修炼之道(一)

    最近老大给我们买来一些技术方面的书籍,其实很少搬着一本书好好的完整的看完过,每每看电子档的,也是打游击式的看看这章,瞅瞅那章,在那5本书中挑了一本比较单薄的<编写高质量代码web前端开发修炼之道 ...

  6. 扯一扯前端css的整体架构设计:(2)base基础类的那些事儿

    周一下午在实验室写了第一篇博文,有几个人捧场,那咱就得接着下去啊.然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结,所以就把标题里原来的[项目总结]给删掉了.但 ...

  7. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  8. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  9. 前端 CSS 目录

    前端 CSS 介绍 前端 CSS语法 前端 CSS 注释

随机推荐

  1. Eclipse 设置文件的默认打开方式

    web开发中,我们在编辑JSP/xml的时候,会碰到一个非常郁闷的事,直接双击打开的JSP页面,当我们在编辑的时候会到处跳,这个我是深有体会,所以我们就用右击 open with,但是久而久之我们会感 ...

  2. 如何使div左右倾斜

    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...

  3. 向html中添加节点

    简单: ①,js中: (function () { var box=document.querySelector("#box"); var con1=document.create ...

  4. robotframework笔记2

    法文件和目录 层次结构安排测试用例构建如下: 在创建测试用例 测试用例文件 . 自动创建一个测试用例文件 测试套件 包含 测试用例文件. 一个目录包含测试用例文件形成一个更高级别的测试 套件. 这样一 ...

  5. JS实现会动的小车

    2015-06-05怎么说呢,我想要实现的功能是很简单的,但是过程中,遇到不少问题. 我要实现的功能是页面右侧有辆小车,鼠标滚动或者拉动滚动条,小车消失,在底部点击“返还顶部”按钮后,页面缓慢向上滚动 ...

  6. 告别node-forever,拥抱PM2

    告别node-forever,拥抱PM2 返回原文英文原文:Goodbye node-forever,hello PM2 devo.ps团队对JavaScript的迷恋已经不是什么秘密了;node.j ...

  7. tab切换-自动、点击、内容变换

    <div class="tab">                    <ul class="pics">               ...

  8. jQuery学习小结2——动画

    一.基础动画 方法名 说明 show([speed,[easing],[fn]])hide([speed,[easing],[fn]]) speed:三种预定速度之一的字符串("slow&q ...

  9. BZOJ1066 [SCOI2007]蜥蜴

    首先...这是道(很水的)网络流 我们发现"每个时刻不能有两个蜥蜴在同一个柱子上"这个条件是没有用的因为可以让外面的先跳,再让里面的往外跳 但是还有柱子高度的限制,于是把柱子拆点为 ...

  10. mysql的REGEXP 和like的详细研究和解释

    1 regexp ^ 匹配字符串的开始部分 $ 匹配字符串的结束部分 . 匹配任何字符(包括回车和新行) a* 匹配0或多个a字符的任何序列 a+ 匹配1个或多个a字符的任何序列 a? 匹配0个或1个 ...