本文总览
前段时间学习了Sass,像Sass这样的预处理器优点在于:变量及Mixin可以减少css中的重复问题;嵌套使父子关系更加清晰;继承可以避免代码重复问题;便捷的函数功能和自定义函数等等。
但是呢,偶然间看到这篇文章,why-i-stopped-using-sass,作者说明了不再使用Sass的原因,好奇心使我点了进去,并进行了渣翻。文中作者说明了用Sass解决了哪些问题,为什么后来不用Sass,下文会详细阐述。
本文从一篇博文出发,转述文章作者的观点,最后再加上一点我的理解。
为什么我不再使用Sass(20190101)
背景:文章作者坚持每年最少重建一次网站,在最近的重建中,他一开始没有想要将Sass代码移除,但越是看自己的Sass代码,越是产生了怀疑,Sass的使用是在为网站增色呢还是在徒增不必要的复杂度和依赖。CSS发展了很多年,起初用Sass解决的问题,现在看来都不是问题了。
Sass解决了什么问题
文章作者常用Sass解决 布局、变量、排版 的问题。
布局 Layout
使用Sass之前
.col-span-3 {
float: left;
width: 24%;
margin-left: 1%;
}
.col-span-4 {
float: left;
width: 32.3%;
margin-left: 1%;
}
.col-span-5 {
float: left;
width: 40.6%;
margin-left: 1%;
}
使用Sass的mixin
定义mixin
@mixin grid($colSpan, $gridColumns: 12, $margin: 1%,) {
$unitWidth: $gridColumns / $colSpan;
float:left;
width: (100 - $unitWidth * $margin) / $unitWidth;
margin: 0 $margin/2;
}
使用mixin
.sidebar {
@include grid(3);
}
.main-content {
@include grid(9);
}
@media only screen and (max-width: 480px) {
.sidebar {
@include grid(12);
}
.main-content {
@include grid(12);
}
}
CSS Grid
CSS Grid 的引入使得布局变得简单,不再需要使用上面的方式构建网格系统。
以下的代码实现了根据内容的最大最小宽度适配变化的响应式布局,而不是根据预设的设备大小。
.project {
display: grid;
grid-template-columns: repeat( auto-fill, minmax(12em, 1fr) );
grid-gap: 1em;
}
用Grid CSS做布局的局限性在于浏览器兼容。Grid目前支持大部分的现代浏览器和IE10+,auto-fill和auto-fit属性兼容性更低,可以通过@supports判断兼容。
变量 Variables
变量是可变化的值,对CSS来说变量是使用到才知道值是什么。作者大部分项目遵循ITCSS标准,将全局变量放在setting文件中。通常全局变量有字体,颜色,媒体查询。
/* COLORS */
$colors: (
"black": #2a2a2a,
"white": #fff,
"grey-light": #ccc7c3,
"grey-dark": #2a2a2a,
"accent": #ffa600,
"off-white": #f3f3f3,
"sky-blue": #ccf2ff
);
/* BREAKPOINTS */
$breakpoints: (
"break-mobile": 290px,
"break-phablet": 480px,
"break-tablet": 768px,
"break-desktop": 1020px,
"break-wide": 1280px
);
/* TYPOGRAPHY */
$font-stack: (
decorative: #{'oswald', Helvetica, sans-serif},
general: #{'Helvetica Neue', Helvetica, Arial, sans-serif}
);
这样使用变量使网站大幅改动变得快速简单。
使用Sass之前
.button {
background-color: #4CAF50; /* Green */
}
.button:hover {
background-color: #3F8C42; /* Dark Green */
}
.button:active {
background-color: #266528; /* Darker Green */
}
使用Sass之后
$button-colour: #4CAF50;
.button {
background-color: $button-colour;
}
.button:hover {
background-color: darken($button-colour, 20%);
}
.button:active {
background-color: darken($button-colour, 50%);
}
CSS 变量
CSS自定义变量不仅可以替换预处理器变量,还可以动态更新(JS)。CSS变量教程
CSS变量甚至可以像Sass对颜色进行操作,但是这种操作仍处于草案阶段,暂时可以用不同颜色代替。
:root {
--button-color: #4CAF50;
}
.button:hover {
color: color-mod(var(--button-color) tint(50%));
}
文字排版 Typography
之前的代码中,作者使用Sass做响应式排版和间距,使用类似下面代码的mixin:
@mixin typography($size) {
font-size: $size;
@include mq(break-desktop) {
font-size: $size * 1.2;
}
}
如今可以使用原生CSS中的calc和视口单位(viewport units)来实现这些计算。
:root {
--font-size: calc(18px + 0.25vw)
}
body {
font-size: var(--font-size);
}
CSS正在朝着内容主导的方向发展,Grid/flexbox/大小调整属性(min-content/max-content/fit-content)还有以后的SubGrid/Layout Model Level 2等。这些都让原生CSS更具吸引力。
以上是译文内容,作者使用原生CSS实现了原来用Sass实现的功能,更加简洁方便,唯一的局限性是兼容性问题,但这点未来终会解决,同时CSS也正在产生更多使用的特性,使其更具吸引力。
我的想法
我认为Sass存在它自身的优势,比如mixin、继承、占位符等用于减少重复样式代码,使样式间关系清晰;灵活的变量插值(相比较CSS变量只能作为属性值或变量值使用);数据类型多样;逻辑控制(判断、循环等);功能函数和自定义函数等等,但Sass的使用需要Ruby的依赖,且需要编译后成css后使用,确实会给项目增添依赖。
作者用到的CSS原生方法,简洁方便,但部分存在兼容性的问题,目前尚未解决,使用时需要进行兼容性判断。
Sass等CSS预处理和CSS原生各有利弊,两者都在不断发展,了解各自的特性,才能在具体的应用场景中更好的使用。