scss 1、回顾gulp的使用方法 2、sass语法 3、sass用法 4、学习scss 语法
目录
2、sass语法
2.1 css的编译模式
- css --- 普通
- sass / scss --- 高效 // *********
- less --- 高效
2.2 sass介绍
- 来源： ruby语言
- 基础的版本，后缀名为sass：没有{},只能通过缩进来实现 -- 可读性差、难以维护
// css
.box { 100px}
// .sass
.box 100px; // 据说是这样
- .scss 后缀 --- 可读性高、便于维护
html { background: red }
// scss语法--嵌套 --- 权重
.box {
color: blue;
.test {
font-size: 20px;
}
}
// ==》
.box {color: blue;}
.box .test { font-size: 20px;}
2.3 如何使用scss
最终需要使用的是css文件，编写的scss文件
转换工具 gulp / webpack / ruby工具 / 编辑器插件
选用gulp来处理scss文件
3、sass用法
3.1 安装 sass 模块
cnpm i gulp-sass -S (推荐)
cnpm i gulp-sass-china -S
3.2 配置处理scss文件gulp的任务
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')
})
4、学习scss 语法
4.1 学习scss的注释语句
- 单行注释 --- 推荐使用
使用//来完成单行注释---和js类似
并不会编译成css
- 多行注释
使用的/* */ 来完成多行注释 --- 和 js类似
先编译成css文件，然后再注释掉css文件
4.2 变量
scss给css赋予了动态语言的特性（变量、函数、条件判断、循环....）
scss对于;很敏感，记住写;
4.2.1 单值变量
// scss
$baseColor: red;
.box {
background-color: $baseColor;
}
// ==> css
.box {
background-color: red; }
4.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; }
4.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; }
4.2.4 复杂变量 - 循环
// scss
$list: (top 30px) (right 30px) (bottom 10px) (left 40px);
@each $name, $value in $list{
.box-#{$name} {
$value;
}
}
// ==>
.box-top {
30px; }
.box-right {
30px; }
.box-bottom {
10px; }
.box-left {
40px; }
// scss
$headers: (h1: 32px, h2: 20px, h3: 14px);
@each $key, $value in $headers {
#{$key} {
font-size: $value;
}
}
// ==> css
h1 {
font-size: 32px; }
h2 {
font-size: 20px; }
h3 {
font-size: 14px; }
4.3 scss嵌套
// scss
html {
font-size: 12px;
body {
background: #f66;
header {
100%;
height: 40px;
nav {
background-color: #00f;
}
}
section {
100%;
min-height: 500px;
}
footer {
100%;
height: 60px;
}
}
}
// ==> css
html {
font-size: 12px; }
html body {
background: #f66; }
html body header {
100%;
height: 40px; }
html body header nav {
background-color: #00f; }
html body section {
100%;
min-height: 500px; }
html body footer {
100%;
height: 60px; }
4.4 mixin 混入
- 无参数
// scss
@mixin marginCenter {
margin: 0 auto;
}
.container {
1000px;
min-height: 600px;
// margin: 0 auto;
@include marginCenter();
}
// ==> css
.container {
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; }
4.5 扩展 / 继承
// scss
.active {
background-color: #f66;
color: #fff;
}
.success {
// background-color: #f66;
// color: #fff;
@extend .active;
font-size: 30px;
}
// ==> css
.active, .success {
background-color: #f66;
color: #fff; }
.success {
font-size: 30px; }
4.6 函数
// scss
@function dark($color, $val) {
@return $color - $val;
}
@function light($color, $val) {
@return $color + $val;
}
.text {
color: dark(red, 200);
}
.text1 {
color: light(red, 200);
}
// ==>
.text {
color: #370000; }
.text1 {
color: #ffc8c8; }
4.7 条件判断
// scss
// @mixin flex($val: 1) {
// box-flex:$val;
// -webkit-box-flex:$val;
// -moz-box-flex:$val;
// flex:$val;
// -webkit-flex:$val;
// }
@mixin flex($val) {
@if $val == auto {
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
flex:1;
-webkit-flex:1;
} @else {
box-flex:$val;
-webkit-box-flex:$val;
-moz-box-flex:$val;
flex:$val;
-webkit-flex:$val;
}
}
.test {
@include flex(auto);
}
li {
@include flex(3);
}
// ==> css
.test {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
flex: 1;
-webkit-flex: 1; }
li {
box-flex: 3;
-webkit-box-flex: 3;
-moz-box-flex: 3;
flex: 3;
-webkit-flex: 3; }
4.8 导入另一个scss文件
// val.scss 变量
$baseColor: red;
$baseFontSize: 12px;
// base.scss 混入
@mixin flex {
flex: 1
}
// test.scss 应用
@import 'val.scss';
@import 'base.scss';
.box {
@include flex();
font-size: $baseFontSize;
}
// ==》 css
.box {
flex: 1;
font-size: 12px; }