前端知识体系之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三 ...
随机推荐
- Head First Python 1-4章学习感悟
一.学习知识总结 (1)迭代 range(起始值,结束值,步长):包含起始值,不包含结束值,步长为正数 (2)导入模块 from datetime import datetime (3 ...
- GoWeb开发_Iris框架讲解(四):Iris框架设置操作
路由组的使用 在实际开发中,我们通常都是按照模块进行开发,同一模块的不同接口url往往是最后的一级url不同,具有相同的前缀url.因此,我们期望在后台开发中,可以按照模块来进行处理我们的请求,对于这 ...
- (转)System.Web.Mvc.UrlHelper的学习与使用
转载自http://www.cnblogs.com/longgel/archive/2010/02/06/1664884.html 上一次学习了HtmlHelper帮助类,这次我们学习一下UrlHel ...
- 在Eclipse中使用Maven创建Web工程
在Eclipse中使用Maven创建Web工程 1.创建maven Project工程,使用maven-archetype-webapp 2.在pom.xml文件中,设置打包类型为war <pa ...
- 帝都Day5——依旧是数据结构
/*Day1.Day2我尽量整理吧*/ 树状数组 树状数组滋瓷单点修改和前缀查询 加特技可以使得树状数组支持更多操作. c[2n+1]=a[2n+1](奇数就是它本身) c[2n]≠a[2n](偶数不 ...
- POJ1045 Bode Plot
题目来源:http://poj.org/problem?id=1045 题目大意: 如图所示的交流电路,假设电路处于稳定状态,Vs为电源电压,w是频率,单位为弧度每秒,t表示时间. 则:V1 = Vs ...
- Keepalived + Nginx + Tomcat 高可用负载均衡架构
环境: 1.centos7.3 2.虚拟ip:192.168.217.200 3.192.168.217.11.192.168.217.12上分别部署Nginx Keepalived Tomcat并进 ...
- Codeforces Round #565 (Div. 3) B. Merge it!
链接: https://codeforces.com/contest/1176/problem/B 题意: You are given an array a consisting of n integ ...
- Pandas处理数据常用方法
# -*- coding: utf-8 -*-import pandas as pd"""(1)利用pandas读取csv文件"""def ...
- Android的网络通信
Android平台有三种网络接口可以使用,他们分别是:java.net.*(标准Java接口).Org.apache接口和Android.net.*(Android网络接口).大多数的Android应 ...