前端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 注释
随机推荐
- 转!论if else与switch的效率高低问题
转 下面来详细描述switch与ifelse的区别. switch...case与if...else的根本区别在于,switch...case会生成一个跳转表来指示实际的case分支的地址,而这个跳转 ...
- hiho_1086_browser_caching
题目 浏览器有一个cache,可以存放M(M <= 5000) 个url地址(url为长度小于30的字符串).现在进行N(N <= 20000)次访问,每一个访问,如果访问的url在cac ...
- 为什么删不掉date模块
显示是field pending deletion一看report里面的field list并没有xxx_date_xxx,只好跑到数据库才看到一个field_date_test当时并没有把这个字段当 ...
- Hive优化
hive.optimize.cp=true:列裁剪hive.optimize.prunner:分区裁剪hive.limit.optimize.enable=true:优化LIMIT n语句hive.l ...
- centos7 安装mariaDB 以及 phpmyadmin的安装
centos7 安装mariaDB 以及 phpmyadmin的安装 一:安装mariadb, mariadb 是 mysql 的一个分支,基本和mysql一样的 1. yum -y install ...
- dede如何新建一个ajax服务端输出文件
<?phprequire_once(dirname(__FILE__)."/include/common.inc.php");AjaxHead(); $dsql-> ...
- 简单的css居中问题(日常记录)
1.今天遇到了一个奇怪的问题:因为网页要适配大小分辨屏幕,需要把一张图片放到div中,我的初始思路是把图放在div中绝对对位给top50%left50%,但是不行,因为当网页调窄时图片就因为显得太大了 ...
- Android Studio Gradle构建脚本
Gradle是一种依赖管理工具,基于Groovy语言,面向Java应用为主,它抛弃了基于XML的各种繁琐配置,取而代之的是一种基于Groovy的内部领域特定(DSL)语言. 构建工具就是对你的项目进行 ...
- js(引用类型和setTimeout scope)
题目是群中小伙伴出的. var a = [1,2,3]; c= a //todo 限制条件 c 不能出现在 = 左边 console.log(a) console.log(c) console.log ...
- hdu-------(1698)Just a Hook(线段树区间更新)
Just a Hook Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...