维基百科
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）、选择器继承等。
开始上手
-
嵌套选择器
-
变量
-
mixn
-
placeholder
1.安装和运行
创建html和sass文件
但是html并不会直接解析sass文件，所以我们需要工具来转换~(不愿意折腾的小伙伴也可以进入 JsBin 或者 CodePen 在线体验scss哦~)
首先初始化目录
npm init -y
为了便于配置和打包，我们使用parcel(代替webpack)
npm i -D parcel
运行
npx parcel index.html // 会自动安装node-sass
// 如果此步出错，请自行搜索错误
成功在html使用scss！
变量
// scss文件
$red: red;
h1 {
color: $red;
}
嵌套选择器
// 以往的css文件写法
.nav {
boder: 1px solid red;
}
.nav > ul {
background: green;
}
.nav > ul > li {
border: 1px solid blue;
}
// scss写法
$border-width: 1px;
.nav {
border: $border-width solid red;
> ul {
background: green;
> li {
border: $border-width solid blue;
}
}
}
mixin
基本用法
把一堆共用样式写进一个函数里
// css写法
.nav {
border: 1px solid red;
> ul {
background: green;
> li {
width: 300px;
// 好大一块相同的css
border: 1px solid red;
background: red;
border-radius: 50%;
height: 200px;
}
}
}
.demo {
width: 400px;
// 好大一块相同的css
border: 1px solid red;
background: red;
border-radius: 50%;
height: 200px;
}
// scss写法
$border-width: 1px;
@mixin publicFn {
border: 1px solid red;
background: red;
border-radius: 50%;
height: 200px;
}
.nav {
border: $border-width solid red;
> ul {
background: green;
> li {
width: 300px;
@include publicFn;
}
}
}
.demo {
width: 400px;
@include publicFn;
}
高级用法
既然是函数，就可以传值进去
// scss文件
$border-width: 1px;
@mixin borderFn($border-color: red) { // 也可以设置默认值
border: 1px solid $border-color;
...
}
.nav {
border: $border-width solid red;
> ul {
background: green;
> li {
@include borderFn(blue); // 等同于 border: 1px solid blue;...
}
}
}
placeholder
用途和mixin差不多，用于处理大段相同css代码
当我们使用mixin时。但是我们只写了一次代码，但是页面中却写了很多次，所以我们可以看到include只机械的拷贝了代码，这是mixin的问题，所以发明了placeholder带来更好的体验！
重复！
现在我们使用placeholder
简单的把mixin改成%号，include改成extend
$border-width: 1px;
%publicFn {
border: 1px solid red;
background: red;
border-radius: 50%;
height: 200px;
}
.nav {
border: $border-width solid red;
> ul {
background: green;
> li {
width: 300px;
@extend %publicFn;
}
}
}
.demo {
width: 400px;
@extend %publicFn;
}
只写一次！
ps：mixin 和 placeholder 区别，minxin可以传参
