scss入门

2018-09-05

SCSS 是什么

https://zh.wikipedia.org/wiki/Sass

Sass（英文全称：Syntactically Awesome Stylesheets）

是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的类 CSS 语言。

发行时间：2007年
稳定版本：2016年3月28日

Sass 十分简洁，语法中几乎不含括号。
后来前端工程师表示不含括号看不懂，于是 Sass 的开发者又提供了 Scss，含括号。
弱弱的前端工程师终于表示能看懂了。

Sass的官方解释器是开源的并且用Ruby语言写成，但是也有用PHP、C语言、Java等实现的版本（C语言版本叫做llibSass，Java语言版本叫做JSass）。

SassScript提供以下功能：变量、嵌套、混入（Mixin）、选择器继承等。

SCSS 安装与运行

零配置学习 - 使用 parcel
零配置学习 - 使用 jsbin.com

(1)用node -v查看node的版本最好是8.11.2
(2)用npm -v查看npm的版本最好是6.1.0
(3)如果npm遇到问题,那么安装yarn 版本是1.7.0

接下来：

(1)npm install -g cnpm --registry=https://registry.npm.taobao.org 配置淘宝源千万不要装cnpm命令
(2)npm install -g http-server 用来查看当前的html
(3)http-server . -c-1
(4)点击+进入第二个窗口，输入npm init -y
(5)npm install -D parcel 这个工具名字叫parcel，代替webpack打包工具，让你不需要任何配置就能使用webpack功能的一个工具
(6)npx parcel index.html 装完后就可以使用此命令，此命令就是把index.html跑起来，自动把scss在你请求时翻译成css

最简单的几个语法

嵌套选择器
变量
mixin
placeholder 占位符

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的第一个SCSS demo</title>
    <link rel="stylesheet" href="./1.scss">
</head>
<body>
    <div class="nav">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <div class="demo">
        
    </div>
</body>
</html>

$grey:#666;
$gray:$grey;
$border-width:2px;
%box{
    box-shadow:0 0 3px #000;
    margin:10px;
    background: white;
    border-radius:5px;
}
// .nav{
//     @include debug;
//     >ul{
//         background: white;
//         >li{
//             @include debug(purple);
//         }
//     }
// }
.nav{
    >ul{
        background: $gray;
        >li{
          @extend %box;
        }
    }
}
.demo{
    height:100px;
    @extend %box;
}
// .nav > ul{
//     background: white;
// }
// .nav > ul > li{
//     border:1px solid green;
// }