由于前端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. 转!论if else与switch的效率高低问题

    转 下面来详细描述switch与ifelse的区别. switch...case与if...else的根本区别在于,switch...case会生成一个跳转表来指示实际的case分支的地址,而这个跳转 ...

  2. hiho_1086_browser_caching

    题目 浏览器有一个cache,可以存放M(M <= 5000) 个url地址(url为长度小于30的字符串).现在进行N(N <= 20000)次访问,每一个访问,如果访问的url在cac ...

  3. 为什么删不掉date模块

    显示是field pending deletion一看report里面的field list并没有xxx_date_xxx,只好跑到数据库才看到一个field_date_test当时并没有把这个字段当 ...

  4. Hive优化

    hive.optimize.cp=true:列裁剪hive.optimize.prunner:分区裁剪hive.limit.optimize.enable=true:优化LIMIT n语句hive.l ...

  5. centos7 安装mariaDB 以及 phpmyadmin的安装

    centos7 安装mariaDB 以及 phpmyadmin的安装 一:安装mariadb, mariadb 是 mysql 的一个分支,基本和mysql一样的 1. yum -y install ...

  6. dede如何新建一个ajax服务端输出文件

    <?phprequire_once(dirname(__FILE__)."/include/common.inc.php");AjaxHead();    $dsql-> ...

  7. 简单的css居中问题(日常记录)

    1.今天遇到了一个奇怪的问题:因为网页要适配大小分辨屏幕,需要把一张图片放到div中,我的初始思路是把图放在div中绝对对位给top50%left50%,但是不行,因为当网页调窄时图片就因为显得太大了 ...

  8. Android Studio Gradle构建脚本

    Gradle是一种依赖管理工具,基于Groovy语言,面向Java应用为主,它抛弃了基于XML的各种繁琐配置,取而代之的是一种基于Groovy的内部领域特定(DSL)语言. 构建工具就是对你的项目进行 ...

  9. js(引用类型和setTimeout scope)

    题目是群中小伙伴出的. var a = [1,2,3]; c= a //todo 限制条件 c 不能出现在 = 左边 console.log(a) console.log(c) console.log ...

  10. hdu-------(1698)Just a Hook(线段树区间更新)

    Just a Hook Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...