前端知识体系之CSS及其预处理器SASS/LESS
如果你是个前端设计师,很多时候我们都在写CSS,CSS是定义页面样式的脚本,并不是一种编程语言,只是一行行单纯的描述页面元素的样子,如果对英语熟练的话,它像说话一样简单,这里举个简单的例子:
body{
color: #000000;
background: #ffffff;
}
描述的是元素body,背景色白色,文字颜色黑色,写CSS是一项简单而繁琐的工作。
PS:很多人把CSS和CSS3相提并论,寻找异同,其实就像html和html5一样,css3是css的一个版本,它已经被ie9以上的遵循W3C标准的现代浏览器所支持。
上面说道,写CSS是一项简单而繁琐的工作,那么能不能从把前端从枯燥无味的工作中解放出来,去做较复杂的工作呢,答案就在下面,诞生了一种叫CSS预处理器的语言。
CSS预处理器(css preprocessor)。它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。
一、什么是CSS预处理器
CSS预处理器定义了一种新的语言,基本的思想是用一种专门的编程语言,开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码的编写过程的同时,它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。
二、种类
目前最主流的三个预处理器 Less、Sass 和 Stylus
三、用法
前端知识体系之CSS及其预处理器SASS/LESS的更多相关文章
- web前端知识体系总结
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
- 自己总结的web前端知识体系大全【欢迎补充】
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
- web前端知识体系大全
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
- web前端知识体系小结(转)
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
- Web前端知识体系精简
Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...
- 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!
前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...
- web前端知识体系大全【欢迎补充】
大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人 ...
- web前端知识体系大全【转载】
自己总结的web前端知识体系大全[欢迎补充] 1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在 ...
- Web前端知识体系
看到一篇不错的文章,拿来收藏和分享. 原文:http://mp.weixin.qq.com/s/UFTfdE7LYhHquWEzwZKLCQ Web前端技术由html.css和 javascript三 ...
随机推荐
- 解决Navicat 连接服务器数据库报10060问题
1.登录mysql,授予远程登录权限(确保mysql表里的登录user对应的host为 % 即可:若不是 % ,使用mysql的update更新对应host) mysql> use mysql; ...
- 使用java画一张海报
PS: 没找到合适的海报背景,就随便找了一张,使用技术都是相同的 1. 添加依赖 这俩其实跟本章节的核心技术没有关系,是为了获取QQ昵称和QQ头像而引入的. <!-- jsoup --> ...
- 让你的Kivy支持中文字符
前言 默认Kivy字体不支持中文,本文简单描述如何让你的应用支持中文字符 代码 from kivy.app import App from kivy.core.text import LabelBas ...
- Linux 查询服务器序列号命令
1.查看服务器型号:dmidecode | grep 'Product Name' 2.查看主板的序列号:dmidecode |grep 'Serial Number' 3.查看系统序列号:dmi ...
- Jquery 实现表单验证,所有验证通过方可提交
1. [代码]Jquery 实现表单验证,所有验证通过方可提交 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...
- AnkhSVN使用手册
(一) 安装: Subversion客户端安装------AnkhSVN AnkhSVN是一款在VS中管理Subversion的插件,您可以在VS中轻松的提交.更新.添加文件,而不用在命令行或资源管理 ...
- 【Java密码学】Java SE 6中XML数字签名的实现
package test.xml.signature; import java.io.File; import java.io.FileInputStream; import java.io.File ...
- 【Unity3D】Tags和Layers
Tags和Layers分别表示是Unity引擎里面的标签和层,他们都是用来对GameObject进行标识的属性,Tags常用于单个GameObject,Layers常用于一组的GameObject.添 ...
- spring开发配置编码
在pom.xml中添加属性project.build.sourceEncoding就可以设置工程的编码 <properties> <!-- 文件拷贝时的编码 --> <p ...
- docker exit status 255解决
一 windows开发整docker就是痛苦,在公司win7电脑想拿起几年没再用的docker 结果直接报错 Error getting IP address: ssh command error: ...