关于scss

css、sass和scss

简单来说，css是最基本的写前端样式的语言。

而sass是一种css的预处理器，sass可以通过编译生成css文件，通过提供一系列简洁的语法，用于快捷的开发css。

有两种可以用于书写sass的语法，一种是最常用的scss语法、通常以.scss后缀，而另一种是缩进语法，常用.sass后缀。

其中最常用的就是scss语法，因为其完美兼容原生css语法。

三者语法上的区别如下：^[1]

scss的基本使用

以下许多例子来源于SASS用法指南 - 阮一峰的网络日志 (ruanyifeng.com)

本人对部分例子作了demo和官网的补充.

1 | 变量定义与使用

使用$定义和直接引用变量, 放入字符串中使用#{}包裹

$side: left;

.rounded {
    border-#{$side}-radius: 5px;
}

$blue: #1875e7;　

div {
    color: $blue;
}

2 | 继承与占位符%

使用@extend继承

.class2 {
    @extend .class1;
    font-size:120%;
    // more 
}

占位符

任何用%标注的是占位符, 占位符不属于任何类名, 但是仍可以被继承, 好处是不会造成类名污染.

一个来自官方的例子:

3 | mixin 和 @include

mixin用于生成可重用的代码块, 并支持参数和默认值

@include用于引入mixin

@mixin left($value: 10px) {
    float: left;
    margin-right: $value;
}
// usage of mixin
div {
    @include left(20px);
}
// same as
div {
    float: left;
    margin-right: 20px;
}

4 | 颜色函数

用于简单调整颜色: 传递给每个关键字参数的值添加到颜色的相应属性中，并返回调整后的颜色

常见的颜色函数与用法:

lighten(#cc3, 10%) // 更亮
darken(#cc3, 10%) // 更暗
grayscale(#cc3) // 灰阶
complement(#cc3) // 互补

更多信息参考官方文档: Sass: sass:color (sass-lang.com)

demo:

scss:

$default-color: rgb(199, 84, 80);
$sel: color;

.#{$sel} {
  background-color: $default-color;
  &-darken {
    background-color: darken($default-color, 10%);
  }
  &-lighten {
    background-color: lighten($default-color, 20%);
  }
  &-grayscale {
    background-color: grayscale($default-color);
  }
  &-complement {
    background-color: complement($default-color);
  }
}

html: (p-xx是使用了PrimeFlex (primefaces.org))

<div class="p-grid p-mt-5">
  <div class="color p-col-2">color</div>
  <div class="color-darken p-col-2">darken(color, 10%);</div>
  <div class="color-lighten p-col-2">lighten(color, 20%);</div>
</div>

<div class="p-grid p-mt-5">
  <div class="color-grayscale p-col-2">grayscale</div>
  <div class="color-complement p-col-2">complement</div>
</div>

一般项目中最常用的就是darken和lighten, 如表示focus状态或者disabled状态. 其他都是花里胡哨的..

5 | 条件和循环

@if @else

@if lightness($color) > 30% {
    background-color: #000;
} @else {
    background-color: #fff;
}

@for

@for $i from 1 to 10 {
    .border-#{$i} {
        border: #{$i}px solid blue;
    }
}

6 | @function

可以使用@function写一个自定义的函数

@function double($n) {
    @return $n * 2;
}

#sidebar {
    width: double(5px);
}

7 | 嵌套和引用父元素&

可以使用&来引用父元素, 并且scss支持嵌套

嵌套选择器

div {
    hi {
        color:red;
    }
}

嵌套属性

注意需要加:

p {
    border: {
        color: red;
    }
}
// 表示p标签下元素的border-color属性

嵌套类

.class1 {
    .class2 {
        // ..
    }
}

类前缀

继续引用一个官方的例子…

这里注意, 类前缀不会继承前缀下的样式, 具体如下图, 可以看到.accordion__copy和.accordion__copy--open不会继承.accordion下的样式.

碎碎念

想到系统的补一下这方面的知识也是看到实验室某学长的写法, 才发现一个好的工具确实可以使效率事半功倍, 下面改几个项目的常用例子来展示下scss的优势.

styled-badge

html:

<div class="p-mt-5">
  <span class="badge-success">success</span>
  <span class="badge-fail">fail</span>
  <span class="badge-pending">pending</span>
</div>

scss:

badge {
  border-radius: var(--border-radius);
  padding: .25em .5rem .25em .5rem;
  margin: 0 1em 0 1em;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .3px;
}

.badge {
  &-success {
    @extend %badge;
    background: #C8E6C9;
    color: #256029;
  }

  &-fail {
    @extend %badge;
    background: #FFCDD2;
    color: #C63737;
  }

  &-pending {
    @extend %badge;
    background: #FEEDAF;
    color: #8A5340;
  }
}

效果:

ref

1. Sass (stylesheet language) - Wikipedia) ↩