如果你是个前端设计师,很多时候我们都在写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的更多相关文章

  1. web前端知识体系总结

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  2. 自己总结的web前端知识体系大全【欢迎补充】

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  3. web前端知识体系大全

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  4. web前端知识体系小结(转)

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  5. Web前端知识体系精简

    Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...

  6. 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!

    前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...

  7. web前端知识体系大全【欢迎补充】

    大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人 ...

  8. web前端知识体系大全【转载】

    自己总结的web前端知识体系大全[欢迎补充]   1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在 ...

  9. Web前端知识体系

    看到一篇不错的文章,拿来收藏和分享. 原文:http://mp.weixin.qq.com/s/UFTfdE7LYhHquWEzwZKLCQ Web前端技术由html.css和 javascript三 ...

随机推荐

  1. Cef3 学习资料

    fanfeilong/cefutil CEF General Usage(CEF3预览) CEF General Usage(CEF3预览) 介绍 CEF全称Chromium Embedded Fra ...

  2. Python小世界:项目虚拟环境配置的N种方法

    前言 和其他大多数现代编程语言一样,Python对包和 模块的下载.存储以及管理有其自己的一套方法.但是当我们同时开发多个项目工程的时候,不同的项目会将第三方的包存放在相同的路径下.这就意味着,如果有 ...

  3. 洛谷P3582 [POI2015]KIN

    题目描述 共有\(m\)部电影,编号为\(1--m\),第\(i\)部电影的好看值为\(w[i]\).在\(n\)天之中(从\(1~n\)编号)每天会放映一部电影,第\(i\)天放映的是第\(f[i] ...

  4. web性能优化--缓存

     什么是缓存? 缓存(Web缓存)是指代理服务器和客户端本地磁盘保存的资源副本.当 web 缓存发现请求的资源已经被存储,它会拦截请求,返回该资源的拷贝,而不会去源服务器重新下载. 缓存大致可以分为私 ...

  5. PAT甲级——1101 Quick Sort (快速排序)

    本文同步发布在CSDN:https://blog.csdn.net/weixin_44385565/article/details/90613846 1101 Quick Sort (25 分)   ...

  6. Gdiplus的使用 gdi+

    使用步骤: 1.包括相应的头文件及引入相应的lib 1 #include <GdiPlus.h> 2 #pragma comment(lib, "gdiplus.lib" ...

  7. vue框架学习笔记1

    vue1-2:MVVM M:Model 数据模型,负责数据存储 V:View 视图,负责页面的显示 VM:View Model 负责业务处理,对数据进行加工,之后交给视图 下载地址: <!--中 ...

  8. angular学习笔记【ng2-charts】插件添加

    原文:https://segmentfault.com/a/1190000008077830 1. 安装 ng2-charts npm install ng2-charts --save2. 还必须引 ...

  9. ubuntu搭建mediawiki

    1.搭建lamp环境,lamp指的是: Linux+Apache+Mysql/MariaDB+Perl/PHP/Python (我们安装的是Linux+apache2+postgresql+php) ...

  10. UnityError 动画系统中anystate跳转重复播放当前动画解决方案