SCSS的简介

2018-02-04 本文已影响0人小肥粑粑

SCSS是什么

回答这个之前, 我们先来看看这个例子:

<html>
<head>
    <style>

        .parent{
            width: 100%;
            background: pink;
        }

        .parent .child{
            width: 80%;
            background: goldenrod;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
            this is a test
        </div>
    </div>
</body>
</html>

这个带css的html很简单, 它输出如下结果:

image.png

现在我们用SCSS语法来改进这个程序. 首先要安装SCSS, 官方的安装文档在这里: (https://www.sass.hk/install/)

然后, 建议把文件夹改造成我这个样子:

image.png

然后, 在static的目录里打开命令行, 运行这句命令:

sass --watch scss/:css/

然后, 在html目录里随便加个html, 输入如下内容:

<html>
<head>
    <link  rel="stylesheet" type="text/css" href='../static/css/demo1_1.css'></link>
</head>
<body>
    <div class="parent">
        <div class="child">
            this is a test
        </div>
    </div>
</body>
</html>

然后在scss目录下新建demo1_1.scss, 输入如下内容:

.parent{
    width: 100%;
    background: pink;

    .child{
        width: 80%;
        background: goldenrod;
    }
}

通过上面的文件, 很容易就看出scss是做什么用了:

它是对css的一个增强工具集,方便你写出更容易模块化的css代码
只要你按照scss语法写出代码, 并运行scss命令监控文件. 它就会自动检查出文件更新, 并将新的css代码生成到你指定的目录. (在我们的例子里是从 static/scss --> static/css)
html文件里, 实际引用的文件还是css

这个简单的例子暂时不能看出scss有多么强大, 但其实, 比如程序员熟知的bootstrap, 它的源码就是用scss来组织css代码的. 如果你写过几千行的css代码, 你肯定会写过这样的代码:

.a{
//
}
.a .b{
//
}
.a .b .c{

}
.a .b .c .d{

}

而在scss里, bcd都可以嵌套到a 里面实现, 极大节省了代码量.

结论

这篇文章的目的是让你先建立起scss的感性认识, 安装好环境, 随着这个系列文章的深入, 你会慢慢了解用scss来写css代码的好处.

SCSS的简介

SCSS是什么

结论

猜你喜欢

热点阅读