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%;
}
@mixin grid($colSpan, $gridColumns: 12, $margin: 1%,) {
$unitWidth: $gridColumns / $colSpan;
float:left;
width: (100 - $unitWidth * $margin) / $unitWidth;
margin: 0 $margin/2;
}
.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网格
.project {
display: grid;
grid-template-columns: repeat( auto-fill, minmax(12em, 1fr) );
grid-gap: 1em;
}
变量
/* 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}
);
.button {
background-color: #4CAF50; /* Green */
}
.button:hover {
background-color: #3F8C42; /* Dark Green */
}
.button:active {
background-color: #266528; /* Darker Green */
}
$button-colour: #4CAF50;
.button {
background-color: $button-colour;
}
.button:hover {
background-color: darken($button-colour, 20%);
}
.button:active {
background-color: darken($button-colour, 50%);
}
:root {
--button-color: #4CAF50;
}
.button {
background-color: var(--button-color);
}
header
.button {
--button-color: #000000;
background-color: var(--button-color);
}
:root {
--button-color: #4CAF50;
}
.button:hover {
color: color-mod(var(--button-color) tint(50%));
}
.button {
background: var(--colour-dark);
}
.button:hover {
background: var(--colour-bright);
text-decoration: underline;
}
排版
@mixin typography($size) {
font-size: $size;
@include mq(break-desktop) {
font-size: $size * 1.2;
}
}
:root {
--font-size: calc(18px + 0.25vw)
}
body {
font-size: var(--font-size);
}
未来
原文：https://cathydutton.co.uk/posts/why-i-stopped-using-sass/
作者 | Cathy Dutton
译者 | 姜松浩，责编 | 屠敏
服务热线 19970861797
