【更好的CSS 01】SCSS入门

快速上手

SCSS是什么

加强版的CSS?

懒人版CSS
解决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（学完之后你可以自学 LESS 和 Stylus 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用法指南阮一峰

文章目录