sass语法的简易语法（适合小白）

Posted 2021-03-26 goodboyzjm

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; }

可以简单先介绍到这里。可以关注后续会继续补充