5分钟学会SCSS？
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
让我们用 5 分钟学习 SCSS 的基础知识。SCSS 的全称是 Sassy CSS，它是一个 CSS 预处理器，可以让你使用一些原生 CSS 所不具备的实用功能。
变量
要创建变量，只需$在变量名后添加一个符号，然后像设置普通 CSS 属性一样设置它们即可。
//color palette for a project to maintain consistency
$product-dark-blue: #324e85;
$product-light-blue: #4c7396;
.element {
coloe: $product-dark-blue;
}
筑巢
SCSS 可以帮助你编写更简洁、更清晰的 CSS 代码。
.container {
width: 100%;
color: grey;
background-color: green;
div {
border: 1px solid black;
a {
text-decoration: none;
color: white;
&::hover {
color: #b59a9a;
}
}
}
}
遗产
@extends帮助你继承另一个类的属性。
.header {
color: grey;
}
.sub-header{
@extend .header;
font-size: 40px;
}
@Mixin
Mix 是 SCSS 实现继承的另一种方式@mixin。
// create mixin
@mixin red-color {
color: grey;
}
.header {
@include red-color; /*add mixin*/
}
操作员
SCSS 提供了多种可在 CSS 中使用的运算符，例如 +、-、*、/ 等算术运算符。
@mixin top-margin ($margin){
margin-top: 30px + $margin;
}
.container {
width: 800px -80px;
@include top-margin(10px);
}
循环
得益于 SCSS，我们可以在 CSS 中使用 for 循环。您可以创建实用类来控制颜色、字体大小以及许多其他属性。
/* generate utility classes for font-size */
@for $x from 1 through 70 {
.font-size-#{$x} {
font-size: 0px + $x;
}
}
状况
scss 的另一个很棒的功能是能够在 CSS 中使用 if/else 语句。
$bg: pink;
$bg-mobile: red;
p{
@if $bg == pink {
color: blue;
} @else if $bg-mobile == red {
color: green;
} @else {
color: grey;
}
}
搞定了！
现在你们对SCSS有了一些了解。
⚡感谢阅读 | 祝您编程愉快🤩
订阅每周新闻简报，获取我本周发布的精彩文章、优惠信息和公告。点击此处订阅。
