SCSS的基本使用

SCSS / SASS 是 CSS的预编译语言，帮助我们能够更便捷，更有效率地编写 CSS 。官网直通车

SCSS与SASS的故事

SCSS 是 SASS 之后诞生的一门预编译语言。既然是后诞生的语言，肯定是和SASS有一定的区别。我们可以先看看SASS代码：

// SASS
!primary-color= hotpink

=border-radius(!radius)
    -webkit-border-radius= !radius
    -moz-border-radius= !radius
    border-radius= !radius

.my-element
    color= !primary-color
    width= 100%
    overflow= hidden

.my-other-element
    +border-radius(5px)

如果你是没接触过CSS预编译语言，然后看到这个语法的话肯定不知所云，为什么会有这些什么=，!，+这些怪异的符号，关键为什么连{}都没了！这就对于刚接触的同学来说就很不适应了，所以在2010年5月，ruby公司就又推出了SCSS，来看下SCSS的语法：

// SCSS
$primary-color: hotpink;

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.my-element {
    color: $primary-color;
    width: 100%;
    overflow: hidden;
}

.my-other-element {
    @include border-radius(5px);
}

是不是相比SASS诡异的符号看起来好多了，如果你第一次接触SCSS，你也可以理解为，SCSS你也可以写一样的原先CSS语法，但是它可以提供更多的功能，帮助我们更快的写CSS。好了，废话不多说，接下来来举例介绍SCSS提供了哪些便利的功能吧。

变量

变量的SCSS写法

$primary-color:red;
body{
    background-color:$primary-color;
}

编译完的CSS

body {
  background-color: red;
}

变量的作用是存储需要在CSS中复用的信息，用$符号去声明。 比如你写一个项目，它的主题色是红色，你肯定给各个元素都设置好了对应的color，这些CSS遍布大大小小的各种文件，这时候，产品可能突然一拍脑袋想换个主题色，如果你用SCSS的话那就是改个变量的事儿！

嵌套

嵌套的SCSS写法

.father {
    color: red;
    .son {
        color: green;
        .grandSon {
            color: blue;
        }
    }
}

编译完的CSS

.father {
    color: red;
}
.father .son {
    color: green;
}
.father .son .grandSon {
    color: blue;
}

嵌套可以帮助我们避免多次重复书写选择器，使得代码结构更清晰。 想起之前没用SCSS的时候，为了避免自己的CSS影响全局，会给class手动带上一串儿的父级的class，就像下面那样：

.main>.grandFather>.father>.son>.grandSon{ color : red };

用嵌套语法的话就可以终于不用这样写这样痛苦地写CSS层级了，不过要注意的是，SCSS的嵌套层级不要太深，过度的使用嵌套会让代码很难维护，之前维护一个同事的代码看他代码嵌套了7层，内心难免有点小波动。

继承

嵌套的SCSS写法

//弹性布局
%flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.wrap {
    width:500px;
    height:500px;
    @extend %flex-center;
}

.container {
    width:500px;
    height:500px;
    @extend %flex-center;
}

编译完的CSS

.container, .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrap {
  width: 500px;
  height: 500px;
}

.container {
  width: 500px;
  height: 500px;
}

继承可以实现对其它类的引用，从而达到样式类的复用。 在写样式的过程中，总会遇到某部分样式写了很多遍，这时候可以将这部分样式作为一个类单独提取出来，作为一个通用样式，然后我们在需要用这个通用样式的地方通过@extend引入即可。

混合

混合的SCSS写法

//渐变
@mixin linear($direction,$color1,$color2){
    background: -webkit-linear-gradient($direction,$color1, $color2); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient($direction,$color1, $color2); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient($direction,$color1, $color2); /* Firefox 3.6 - 15 */
    background: linear-gradient($direction,$color1, $color2); /* 标准的语法 */
}
.wrap {
    width:500px;
    height:500px;
    @include linear(left,red,green);
}

编译完的CSS

.wrap {
    width: 500px;
    height: 500px;
    background: -webkit-linear-gradient(left, red, green);
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(left, red, green);
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(left, red, green);
    /* Firefox 3.6 - 15 */
    background: linear-gradient(left, red, green);
    /* 标准的语法 */
}

混合通过参数功能引入变量，输出多样化的样式，同样可以现实代码复用。 混合和继承都可以实现代码的复用，在使用上请注意以下两点：

如果你的代码块中涉及到变量，建议使用混合来创建相同的代码块。
如果你的代码块不需要专任何变量参数，而且有一个通用类已在文件中存在，那么建议使用 SASS 的继承。

混合宏写的代码会有冗余，而用继承写的代码冗余性较低。

函数

函数的SCSS写法

//实现px与rem的转化
@function j($px, $base-font-size: 100px) {
    @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return j($px + 0px); // That may fail.
    }

    @else if (unit($px)==rem) {
        @return $px;
    }

    @return ($px / $base-font-size) * 1rem;
}

.box{
    width:j(200);
    height:j(200);
}

编译完的CSS

.box {
    width: 2rem;
    height: 2rem;
}

函数和混合都是传入参数然后返回结果，但是个人认为函数是返回一个通过函数计算好的值，而混合它是返回一个样式代码片段。要注意的是：

一个函数可以含有多条语句，需要调用 @return 输出结果。
建议在自定义函数前添加前缀避免命名冲突，其他人阅读代码时也会知道这不是 Sass 或者 CSS 的自带功能。

叉叉酱

发布了10 篇原创文章 · 获赞 0 · 访问量 183

私信关注

SCSS与SASS的故事

变量

嵌套

继承

混合

函数

猜你喜欢