【化繁为简】非前端开发者的福音---CSS的预处理语言 Less&Sass
LESS的介绍
第一个,less是单独的一种文件,可以理解为css的升级版,完全按照css写也没问题,不过它提供了很多便利的东 西, 可以省好多代码量。
第二个,html只认css,所以需要配套一些软件将less解析成css,引用时候,直接引用css 就好。gulp,koala 都是常用的,Koala好像简单且方便一点。 多种方式能平滑的将写好的代码转化成标准的CSS代码。
SASS是什么?
Sass(Syntactically Awesome Style Sheets)是一个相对新的编程语言,Sass为web前端开发而生,可以用它来定 义一套新的语法规则和函数,以加强和提升CSS。通过这种新的编程语言,你可以使用最高效的方式,以少量的代 码创建复杂的设计。它改进并增强了CSS的能力,增加了变量,局部和函数这些特性。而这只使Sass一部分利器!
LESS和Sass的主要不同就是他们的实现方式,LESS是基于JavaScript,所以,是在客户端处理的。
另一方面,Sass是基于Ruby的,然后是在服务器端处理的。
第一部分:Less
第二部分:Sass
Sass:可以用来开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。
【化繁为简】非前端开发者的福音---CSS的预处理语言 Less&Sass的更多相关文章
- Web 前端开发者必知CSS 属性
1. 圆角效果 如今的Web设计在不断跟进最新的开发技术,纷纷采用HTML5来开发多样性的Web应用.HTML5的优势之一,就是之前必须用图片实现的元素,现在可以用代码来实现. “border-ra ...
- 前端精选文摘:css之GFC 神奇背后的原理(整理)
CSS3 Grid Layout Web页面的布局,我们常见的主要有“浮动布局(float)”.“定位布局(position)”.“行内块布局(inline-block)”.“CSS3的多栏布局(Co ...
- 「前端开发者」如何把握住「微信小程序」这波红利?
由于前两周一直在老家处理重要事情,虽然朋友圈被「微信小程序」刷爆了,但并没有时间深入了解. 昨天回广州之后,第一件事情就是把「微信小程序」相关的文章.开发文档.设计规范全部看了一遍,基本上明白了「微信 ...
- 前端总结·基础篇·CSS(三)补充
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...
- 12个实用的 JavaScript 框架分享给前端开发者
JavaScript库是预先编写的 JavaScript 工具代码,让开发者可以更容易开发 JavaScript 应用.这个列表我们列出了2017年1月份功能丰富的 JavaScript 库,可以帮助 ...
- 一个web前端开发者的日常唠叨
时间飞逝,距离上一次更新博客已经过去了三个月,上一篇博客的发布时间停留在了4月4日. 近来三个月没有更新博客,深感抱歉和愧疚.停更博客就意味着学习的越来越少,作为一个普通的前端开发者来说这是万万不可取 ...
- Web 前端之HTML和CSS
Web 前端之HTML和CSS HTML被称为超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,标记语言是一套标记标签,HTML使用标记标签 ...
- 最受Web前端开发者欢迎的五大开发工具
工其事,必利于器.好的开发工具毋容置疑会帮助Web前端开发者事半功倍,51CTO在上期主办的技术沙龙<大型网站PHP开发之道> 对现场的百余位Web开发者做了问卷调查,后经51CTO调研小 ...
- web前端面试试题总结---css篇
CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(m ...
随机推荐
- testng相关的Annotation注释方法,
2 - Annotation这里是TestNG中用到的annotation的快速预览,还有它们的属性. @BeforeSuite: 被注释的方法将在所有测试运行前运行,方法将只运行一次@AfterSu ...
- 玩转JS系列之代码加载篇
从前我们这样写js <script type="text/javascript"> function a(){ console.log('a init');}funct ...
- HTK语音识别示例(Ubuntu)
一.简介 HTK(Hidden Markov Model Toolkit)是一款语音识别工具包,诞生于Cambridge University Engineering Department (CUED ...
- awk 使用案例
1.输出占用率超过60%的分区 df -h | awk 'BEGIN{print "Full Partition"}NR>1{gsub("%"," ...
- 创建Windows服务(C++)
这次我们来创建一个windows本地服务,需要有以下功能: 安装服务. 卸载服务. 手动启动服务. 开机自动启动服务. 控制服务(停止.暂停.恢复.启动). 服务概念及介绍 看下图,一切尽在不言中了( ...
- <花儿与少年>之一些很喜欢的台词收藏
花儿与少年... ================= 作为一个普通观众,现在这样的花少冒险之旅很好,有旅行.有冒险.有不和.有理解,有时候节目为了效果要制造一些争锋相对的场面,但是除此之外,整个节目质 ...
- java web轻量级开发面试教程摘录,java web面试技巧汇总,如何准备Spring MVC方面的面试
本内容摘自 java web轻量级开发面试教程 https://baike.baidu.com/item/Java%20Web%E8%BD%BB%E9%87%8F%E7%BA%A7%E5%BC%80% ...
- 关于原根的存在性及个数(Primitive Root Theorem)
我在RSA学习总结的第三部分关于Mille-Rabin素数测试的正确性证明里需要用到此定理,由于证明太长,故另开一章于此.(为啥我说话突然文绉绉了Orz,可能是这周辩论打多了) 结论是对素数p,mod ...
- 【Java学习笔记之二十九】Java中的"equals"和"=="的用法及区别
Java中的"equals"和"=="的用法及区别 在初学Java时,可能会经常碰到下面的代码: String str1 = new String(" ...
- Ubuntu & GitLab CI & Docker & ASP.NET Core 2.0 自动化发布和部署(1)
相关博文: Ubuntu 简单安装和配置 GitLab Ubuntu 简单安装 Docker Ubuntu Docker 简单安装 GitLab Ubuntu Docker 安装和配置 GitLab ...