css-preprocessors
what ?
预处理器是css 能够使用 变量、操作符、函数、mixins、interpolations 等类似于js 功能的一种语言。
目前比较常用是三种:SASS、less 、stylus 。
Why ?
css 是古老的、不完整的。(哪天要是CSS 自己支持这些,就不用这些啦!)创建函数、重复使用一个变量、继承,css 都是不支持的。对一些大型的、复杂的项目,维护是一个非常困难的事情。(一直重构真的不是好选择)
为了更好地书写css,css作出的努力有:将声明定义到一个个单独的文件中,然后在主文件中import 他们。
这种方式可以处理组件化的问题,但是无法解决代码复用和后期维护的问题。
又出现了另一个方法:面向对象CSS编程(OOCSS),在OOCSS 中,对一个元素声明一个或多个class名称。每种class名称生成一种样式,这样增加了class 的复用性,但是也增加了维护成本。(划分为颗粒级别的class)
预处理器可以在CSS中实现 可复用性、可维护性、和可扩展性。通过使用预处理器,你可以提高工作效率,减少项目的代码工作。
新的功能
和其他编程语言一样,预处理器有很多不同的语法,但都不是很分离的。所有的预处理器都支持原生css风格,并且她们的语法也和原生的css 一样。sass 和 stylus 都一些额外的样式。sass支持省略大括号和分号。(省略以后不好看,而且还不好维护)在stylus中你还可以省略冒号。这些功能在sass 和stylus 中都是可选的。
变量
- sass
$
$font-size: 16px;
div {
font-size: $font-size;
}
- less
@
@font-size: 16px;
div {
font-size: @font-size;
}
- stylus
=
font-size = 16px;
div
font-size: font-size
- css
div {
font-size: 16px;
}
嵌套 (最喜欢的功能点之一)
css 在子选择器中缺乏明显的继承关系。你必须另起一行,写父子选择器的关系。嵌套提供了一种类似于HTML的可视化的继承关系,增加了可读性。在一些情况下,嵌套扩展了属性的范围,形成了类似于“选择器链”的东西,它是非常智能的。
- sass
less 、stylus 都是一样的
$link-color: #999;
$link-hover: #229ed3;
ul {
margin: 0;
li {
float: left;
}
a {
color: $link-color;
}
}
- css
ul { margin: 0; }
ul li { float: left; }
ul a { color: #999; }
ul a:hover { color: #229ed3; }
Mixins(混合)
混合是根据一些参数或静态规则编译生成的一系列定义。利用他们,你可以非常容易的写出跨浏览器的渐变背景色 、CSS箭头等。
(感觉类似于函数)
- sass
@mixin bordered($width) {
border: $width solid #ddd;
$: hover {
border-color: #999;
}
}
h1 {
@include bordered(5px);
}
- less
.bordered (@width) {
border: @width solid #ddd;
&:hover {
border-color: #999;
}
}
h1 {
.bordered(5px);
}
- stylus
bordered(w)
border: n solid #ddd
&:hover
border-color: #999
h1
bordered(5px)
- css
h1 { border: 5px solid #ddd; }
h1:hover { border-color: #999; }
扩展
sass将会扩展extend 的选择器的每一个实例,包括它的子选择器和继承属性。在less 中,你可以通过加上“all”属性来扩展选择器的每个实例,或者你也可以只选择主要的实例。Extends也是链式的。
颜色操作
略,感觉不会去用。
If/Else 声明
- sass
@if lightness($color) > 30% {
background-color: black;
}
@else {
background-color: white;
}
- less
.mixin (@color) when (lightness(@color) > 30%) {
background-color: black;
}
.mixin (@color) when (lightness(@color) =<; 30%) {
background-color: white;
}
- stylus
完全跟js 的写法一样
if lightness(color) > 30%
background-color black
else
background-color white
循环
- sass
@for $i from 1px to 3px {
.border-#{i} {
border: $i solid blue;
}
}
- less
.loop(@counter) when (@counter > 0){
.loop((@counter - 1));
.border-@{counter} {
border: 1px * @counter solid blue;
}
}
- stylus
for num in (1..3)
.border-{num}
border 1px * num solid blue
函数
三种都是一样的
1cm * 1em => 1 cm * em
2in * 3in => 6in
(1cm / 1em) * 4em => 4cm
2in + 3cm + 2pc => 5.181in
3in / 2in => 1.5in
Imports
都是一样的 @
(这个原生的css 就支持了)
结论
这里的三种CSS预处理器都或多或少有相似的特性。根据你的代码习惯选择一种吧。
参考文献:
https://htmlmag.com/article/an-introduction-to-css-preprocessors-sass-less-stylus
css-preprocessors的更多相关文章
- [AngularJS + Webpack] Requiring CSS & Preprocessors
Making your CSS modular is a difficult thing to do, but using Webpack makes this so much easier. By ...
- 开始编写CSS
本文由大漠根据Krasimir Tsonev的<Starting to Write CSS>所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点.如需转载此译文, ...
- CSS Questions:Front-end Developer Interview Questions
Describe what a "reset" CSS file does and how it's useful. What Is A CSS Reset? A CSS Rese ...
- CSS 预处理器中的循环
本文由 nzbin 翻译,黄利民 校稿.未经许可,禁止转载! 英文出处:css-tricks.com 发表地址:http://web.jobbole.com/91016/ 如果你看过老的科幻电影,你一 ...
- 【转】Facebook React 和 Web Components(Polymer)对比优势和劣势
原文转自:http://segmentfault.com/blog/nightire/1190000000753400 译者前言 这是一篇来自 StackOverflow 的问答,提问的人认为 Rea ...
- Awesome Go
A curated list of awesome Go frameworks, libraries and software. Inspired by awesome-python. Contrib ...
- dfsdf
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】
缘起 哈喽大家好,兜兜转转终于来到了Vue实战环节,前边的 6 篇关于Vue基础文章我刚刚简单看了看,感觉写的还是不行呀,不是很系统,所以大家可能看上去比较累,还是得抽时间去润润色,修改修改语句和样式 ...
- 基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
- vue cli 3.0创建项目
.npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...
随机推荐
- 如何创建一个 mongo 数据库并为它添加一个认证用户?
0.登录 admin 库,开启一个 mongo shell mongo --port 27017 -u "adminUser" -p "adminPass" - ...
- 用js实现随机选取10–100之间的10个数字,存入一个数组,并排序
var iArray = []; function getRandom(istart, iend) { var iChoice = iend - istart + 1; //加1是为了取到100 va ...
- idea+spring-boot+devtools热部署
idea+spring-boot+devtools热部署 标签: spring-boot 2017-03-20 14:45 2635人阅读 评论(1) 收藏 举报 分类: spring-boot m ...
- 【CSS3】transition过渡和animation动画
转自:http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135 写在前面的话: 最近写css动画发现把tansition和animation弄 ...
- django知识点回顾(上)
Django---知识点: 1. 配置文件: media: avatar = models.FileField(upload_to='avatar')#数据库里的model MEDIA_ROOT=os ...
- MessageQueue 相关概念
/** * Implements a thread-local storage, that is, a variable for which each thread * has its own v ...
- Swift开发实例:苹果Swift编程语言新手教程中文版+FlappyBird,2048游戏源代码
源代码: 用IOS Swift语言实现的Flappy Bird源代码:http://download.csdn.net/detail/estellise/7449547 用IOS Swift实现的游戏 ...
- 完美解决centos安装linux后不能上网的问题
vi / etc /sysconfig/network-scripts/ifcfg-eth0 配置ip地址 DEVICE=eth0 HWADDR=00:0C:29:8C:F7:6F TYPE=Ethe ...
- esp8266(0) AT指令
http://www.shaoguoji.cn/2017/01/15/ESP8266-usage/ 注意事项 使用WiFi模块的一些细节及注意事项 模块使用3.3V供电,一定注意电源的稳定,一些USB ...
- Spring中实现多数据源事务管理
文章转自 https://www.2cto.com/kf/201507/424229.html 前言 由于项目中引入了多个数据源,并且需要对多个数据源进行写操作,那么多数据源的事务管理自然成了不可避 ...