1、sass
Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。
SASS是对CSS3（层叠样式表）的语法的一种扩充，它可以使用巢状、混入、选择子继承等功能，可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用，也就是说它本身的语法并不太容易让浏览器识别（虽然它和CSS的语法非常的像，几乎一样），因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。
1.1css的编译模式
*css ---普通
*sass/scss ---高效
*less ---高效
1.2sass的介绍
*来源：ruby语言
*基础的版本，后缀名为sass：没有{}，只能通过缩进来实现 --可读性差、难以维护
//css
.box{witch:100px}
//.sass
.box width:100px; //听闻是这个样子的
*.scss后缀---可读性高、便于维护
html{background:red}
//scss 语法--嵌套--权重
.box{
color:blue;
color{
font-size:20px;
}
}
1.3如何使用scss
最终需要使用的是css文件，编写的scss文件
转换工具 gulp/webpack/ruby工具/编辑器插件
本人习惯gulp来处理css文件
2、sass用法
2.1安装sass模块
cnpm i gulp-sass -S (推荐)
cnpm i gulp-sass-china -S
2.2配置处理scss文件gulp的任务
const sass = require(‘gulp-sass‘);
// 处理scss文件
gulp.task(‘scss2css‘, () => {
gulp.src(‘scss/**/*‘)
.pipe(concat(‘main.scss‘)) // 合并scss文件
.pipe(sass()) // 转为css文件
.pipe(gulp.dest(‘dist/css‘))
.pipe(minifyCss())
.pipe(rename(‘main.min.css‘))
.pipe(gulp.dest(‘dist/css‘))
.pipe(connect.reload())
// 在watch中监听
gulp.watch(‘scss/**/*‘, [‘scss2css‘])
// 在build中构建
gulp.task(‘build‘, [‘copy-html‘, ‘copy-css‘, ‘copy-js‘, ‘copy-data‘, ‘copy-assets‘, ‘scss2css‘], () => {
console.log(‘success‘)
})
3、学习scss语法
3.1学习scss的注释语句
*单行注释 ----推荐使用
**使用//来完成单行注释---和js类似**
**并不会编译成css**
*多行注释
使用/* */来完成注释 ---和 js类似
**先编译成css文件，然后注释掉css文件**
（//会在scss内部显示，在转义成css文件后不会显示节约空间）
3.2变量
scss给css赋予了动态语言的特性（变量、函数、条件判断、循环）
**scss对；很敏感，要写；**
3.2.1单值变量
```
// scss
$baseColor: red;
.box {
background-color: $baseColor;
}
// ==> css
.box {
background-color: red; }
3.2.2 scss做四则运算
// scss
$baseColor: red;
html {
color: $baseColor;
border: 1px solid $baseColor - 80;
background-color: $baseColor / 2;
background: $baseColor + 200;
}
css
html {
color: red;
border: 1px solid #af0000;
background-color: maroon;
background: #ffc8c8; }
3.2.3 多值变量
**多值变量使用 nth(变量名, 索引值) 索引值起始值为1 --- 类似于css中 nth-child**
**还不如写多个单值变量 --- 并不是 --- 假设需要设定一组button按钮的样式**
// scss
$baseColor: red blue;
html {
background: nth($baseColor, 1);
color: nth($baseColor, 2);
}
// ==> css
html {
background: red;
color: blue; }
```
3.2.4 复杂变量 - 循环
// scss
$list: (top 30px) (right 30px) (bottom 10px) (left 40px);
@each $name, $value in $list{
.box-#{$name} {
width: $value;
}
}
// ==>
.box-top {
width: 30px; }
.box-right {
width: 30px; }
.box-bottom {
width: 10px; }
.box-left {
width: 40px; }
$headers: (h1: 32px, h2: 20px, h3: 14px);
@each $key, $value in $headers {
#{$key} {
font-size: $value;
}
}
h1 {
font-size: 32px; }
h2 {
font-size: 20px; }
h3 {
font-size: 14px; }
3.3 scss嵌套
// scss
html {
font-size: 12px;
body {
background: #f66;
header {
width: 100%;
height: 40px;
nav {
background-color: #00f;
}
}
section {
width: 100%;
min-height: 500px;
}
footer {
width: 100%;
height: 60px;
}
}
}
html {
font-size: 12px; }
html body {
background: #f66; }
html body header {
width: 100%;
height: 40px; }
html body header nav {
background-color: #00f; }
html body section {
width: 100%;
min-height: 500px; }
html body footer {
width: 100%;
height: 60px; }
```
3.4 mixin 混入
* 无参数
scss
@mixin marginCenter {
margin: 0 auto;
}
.container {
width: 1000px;
min-height: 600px;
// margin: 0 auto;
@include marginCenter();
}
// ==> css
.container {
width: 1000px;
min-height: 600px;
margin: 0 auto; }
* 有参数
// scss
@mixin margin($top, $right, $bottom, $left) {
margin: $top $right $bottom $left;
}
.container {
@include margin(10px, 10px, 20px, 20px);
}
// ==> css
.container {
margin: 10px 10px 20px 20px; }
* 解决兼容问题
scss
@mixin flexbox {
display:-webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.nav {
ul {
@include flexbox();
li{
color: #333;
}
}
}
footer {
ul {
@include flexbox();
li{
font-size: 14px;
}
}
}
==> css
.nav ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; }
.nav ul li {
color: #333; }
footer ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; }
footer ul li {
font-size: 14px; }
* 混入 默认参数
// scss
@mixin opacity($val: 1) {
opacity: $val;
}
.box {
@include opacity();
}
.box1 {
@include opacity(0.5);
}
// ==> css
.box {
opacity: 1; }
.box1 {
opacity: 0.5; }
可以简单先介绍到这里。可以关注后续会继续补充
原文地址：https://www.cnblogs.com/goodboyzjm/p/11663571.html