快速上手

SCSS是什么

加强版的CSS?

CSS实现了变量--var支持的浏览器ok(2020),单功能单一

当使用CSS时,我们经常在一个全局环境设置,这样可能会错误地设置元素的样式。

自定义CSS(即使有CSS变量)仍然是非常冗余的。

CSS不是为我们今天所拥有的那种复杂的架构设计的

我们遇到了在另一个样式表中导入一个样式表的问题,这可能会导致一个非常大的样式库,没有适当的文档可能无法理解它。

了解为什么要使用这些预处理程序 演示如何将样式划分为更小的特定组件 不必强迫用户下载大量不需要的CSS文件

SCSS历史

维基百科

脱胎于Ruby (on Rails) 社区

Node-SASS 各端的版本

HTML HAML Pug

TS/ES6

SassScript提供以下功能:变量、嵌套、混入(Mixin)、选择器继承等。

安装与运行

课堂上用到的代码,实时看到页面效果

1
2
3
4
cd scss-1
npm init -y
npm i -D parcel
npx parcel index.html #

不要装cnpm

如果发现 node-sass安装出错,请百度。

如果需要设置 npm淘宝源,请百度。

零配置学习 - 使用parcel

零配置学习 - 使用测试


最简单的几个语法

  • $variable
  • @mixin XXX-@include XXX
  • %placeholder-@extend %placeholder

嵌套选择器 Nesting

嵌套和作用域

1
2
3
4
5
6
7
8
9
/* div>ul>li */
.nav {
    >ul {
        >li {
            border: 1px solid red;
        }
    }
    border: 2px solid blue;
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
h1 {
    color: red;
}
body {
    h1 {
        background: #ddd;
        font-size: 100px;
        color: green;
    }
}

能够推断 HTML文件的结构,同时保持实现的简短。这样做的另一个好处是,它有助于避免拼写错误

而且已经确定了一些规则的作用域,因此这些样式只用于nav

后台看调试里对CSS的请求,仍是**.css,npx parcel index.html自动编译成css语法

属性也可以嵌套,比如border-color属性,可以写成:

1
2
3
4
5
p {
    border: {
    color: red;
    }
}

注意,border:后面必须加上冒号。

在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:

1
2
3
a {
    &:hover { color: #ffb3ff; }
}

变量$

使用$来声明变量

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$r:orange;
$g:yellowgreen;
$c:cyan;
$grey:#666;
$gray:$grey;
$border-width:5px;
h1 {
    color: $r;
}
body {
    h1 {
        background: $g;
        font-size: 100px;
        color: $r;
    }
}
/* div>ul>li */
.nav {
    >ul {
        >li {
            border: $border-width solid $g;
        }
    }
    border: $border-width solid $grey;
}

如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。

1
2
3
4
$side : left;
.rounded {
    border-#{$side}-radius: 5px;
  }

@mixin支持参数

可以重用的代码块

写成函数来代替border: 1px solid red;调试

声明@mixin xxx 引入@include xxx

@mixin的强大之处,在于可以指定参数和缺省值。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* 指定参数和缺省值 */
@mixin debug($border-color:red, $background-color:gold) {
    border: 10px solid $border-color;
    background: $background-color;
}
/* 写成函数来代替border: 1px solid red;调试 */

/* 使用的时候,根据需要加入参数 */
body {
    h1 {
        background: $g;
        font-size: 100px;
        color: $r;
        @include debug(orangered, cyan);
    }
}
/* div>ul>li */
.nav {
    >ul {
        >li {
            border: $border-width solid $g;
            @include debug(purple, yellowgreen);
        }
    }
    border: $border-width solid $grey;
}
  • @include 机械地减少了代码量,但浏览器渲染时仍旧会还原css,性能一样

下面是一个mixin的实例,用来生成浏览器前缀。

1
2
3
4
5
@mixin rounded($vert, $horz, $radius: 10px) {
  border-#{$vert}-#{$horz}-radius: $radius;
  -moz-border-radius-#{$vert}#{$horz}: $radius;
  -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
  • 使用的时候,可以像下面这样调用:

    1
    2
    3
    4
    5
    6
    7
    
    #navbar li {
    @include rounded(top, left);
    }
    
    #footer {
    @include rounded(top, left, 5px); 
    }

%placeholder和继承

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
%x

div{
    @extend %x{
    /* xxx */
    }
}
p{
    @extend %x{
    /* xxx */
    }
}

刷新页面看CSS:

1
2
3
div,p{
    /* xxx */ 
}

不重复拷贝样式,而是把选择器提到相同样式前

SASS允许一个选择器,继承另一个选择器。比如,现有class1

1
2
3
.class1 {
    border: 1px solid #ddd;
}

class2要继承class1,就要使用@extend命令:

1
2
3
4
.class2 {
    @extend .class1;
    font-size:120%;
}

注释

SASS共有两种注释风格。

标准的CSS注释/* comment */,会保留到编译后的文件。

单行注释//comment,只保留在SASS源文件中,编译后被省略。

/*后面加一个感叹号,表示这是”重要注释”。

即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

1
2
3
/*!
    重要注释!
*/

总结

SCSS快速入门

SCSS(学完之后你可以自学 LESSStylus PostCSS

SCSS-lang

中文文档1

中文文档2

at-rules: @mixin @include

The Sass Way

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
/* 文本不换行 */
@mixin no-wrap(){
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
/* 使用方法: */
.box {
    @include no-wrap()
}

SASS用法指南 阮一峰