Sass的认识

Abby
436 阅读4分钟
什么是Sass
    SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护.
使用Saaa的好处
    Sass的学名叫“CSS预处理器”，就是在CSS的基础上，引入了变量、嵌套、mixin（混合）、运算以及函数等功能，增加了代码的灵活性，可以让我们以更少的代码实现同样的效果，而且代码的整洁度、可读性更强.可以把反复使用的`css`属性值定义成变量，然后通过变量名来引用它们，而无需重复书写.

环境的搭建(gulp-sass)

gulp-sass-china文档 www.npmjs.com/package/gul…

前提:工作目录下gulp插件已经安装

gulp-sass的安装

安装步骤:

a 切换到项目文件夹

b glup的本地化    npm install  gulp --save-dev

c 执行npm install gulp-sass  --save-dev进行安装
sass文件的手动解析

在项目中创建.scss文件

// 变量测试
$fontColor:red;

h1 {
  color: $fontColor;
}

编写gulp文件glupFile.js

// 加载gulp
const gulp = require('gulp');
// 读取用于sass的插件
const sass = require('gulp-sass');
// 定义gulp任务
gulp.task('sass',async()=>{
    gulp.src('./sass/index.scss').pipe(sass()).pipe(gulp.dest('./css'));
});

创建html文件引入并且使用

<!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>Document</title>
  <link rel="stylesheet" href="./css/a.css">
</head>
<body>
  <h1>苦与乐都在主观的心,不在客观的事</h1>
</body>

</html>

执行文件

 gulp sass
sass文件的自动解析

通常情况下，Sass文件的修改频率并不低，如果每一次修改都要手动指定任务，并运行我们的gulp脚本，太麻烦了。我们就尝试利用gulp的watch功能，实现每当Sass文件的内容发生改变，就会自动执行对应的命令，重新进行编译。

watch("要监视的文件", 要进行的响应处理)

修改glupFile.js文件

var  gulp = require('gulp');
var  sass = require('gulp-sass');

//sass文件的解析任务
gulp.task('sass-1',function(){
     return gulp.src('./sass/*.scss').pipe(sass()).pipe(gulp.dest('./css'))
})
// 通知浏览器刷新文件

// sass文件的自动解析
var   watch = require('gulp-watch');
gulp.task('default', function () {
  watch('./sass/*.scss', gulp.parallel('sass'))
})

在index.sass中设置p的颜色和字号大小

$fontColor :red;
$pColor:green;
$pSize:20;
h1{
  color:$fontColor
}
p{
  color: $pColor;
  font: $pSize;
}

@debug

在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug:

@debug 10px + 12px;

常用的sass知识

变量

必须以$开头，如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

nth()方法，第一个参数为变量名称，第二个参数为变量的第几个值，从1开始数

例1:声明一个字体变量

    $font-size:16px;
    div{
        font-size: $font-size;
    }

例2:将变量嵌入到字符串中

$radius:radius;
.rounded{
  border-#{$radius}:10px;
  border: solid 1px #{$fontColor};
}

例3:使用nth()调取变量的值

  $linkColor:green red!default;
    div{
        color: nth($linkColor,1);
        &:hover{
            color:nth($linkColor,2);
        }
    }

sass中的map

语法
 Sass 的 map 常常被称为数据地图，也有人称其为数组，它是以 key:value 成对出现

数据以 key:value 的形式赋予，其中 key 和 value 是成对出现，并且每对之间使用逗号 (,) 分隔，其中最后一组后面没有逗号 .

$map: ( 
  key1: value1,
  key2: value2,
  key3: value3
)
map的相关函数

map-get($map, key) 获取指定的值

根据 key 参数，返回 key 在 $map 中对应的 value 值。如果 key 不存在 $map 中，将返回 null 值
此函数包括两个参数：
  $map：定义好的map
  key：需要遍历的key

例1:获取$btn-colors中map的facebook的值

$btn-colors: (  
     jd: red,
    facebook: pink,  
    github: green
 ); 

.btn {  
  color: map-get($btn-colors, facebook);
 }

 // 编译为：

map-has-key(map,map, key)

根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false
当 $key 不在 $map 中时，使用 map-get($map, $key) 函数将返回一个 null

例:判断其中是否有需要的颜色

$btn-colors: (  
     jd: red,
    facebook: pink,  
    github: green
 ); 
@if map-has-key ($social-colors, facebook){  
  .btn-facebook {  
  color: map-get($social-colors,facebook); 
  }}
  
  
  // 编译为：.btn-fackbook{ color: #3b5998; }

map-values($map) 返回集合中的values

例:将一个border的样式进行设置

$border-style: (
text:#f63,
link:#f36,
border:#ddd,
background:#fff
);

$list:map-values($color);
@debug $list

map-remove(map,map,key) 删除当前 map中的某一个map 中的某一个 key，返回值是不包含删除的key和value的map。

例:删除集合中指定的第一个颜色

$map:map-remove($btn-colors,jd);

判断

@if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用.

例1:单独的@if使用

$baColor: true;
.id{
  display:inline-block;
  @if $baColor {
     background:red;
  }
}

例2:根据传入的值判断不同的状态,显示不同颜色

$status: success;
p{
  @if $status == login { 
     color: blue;
  } @else if $status == error { 
     color: red;
  } @else if $status == success { 
     color: green;
  } @else { 
     color: black;
  }
  }
}

Sass中的循环

@for循环

for循环有两种形式，

形式1 @for $i from through

形式2 @for $i from to 。

$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

例1:先来个使用 through 关键字的例子

ul {
  list-style: none;
}

@for $i from 1 through 3{
  li:nth-child(#{$i}){
 
  background: url(../../images/#{$i}.jpg);
  float: left;
  width: 200px;
  height: 200px;
  margin: 0 20px 20px 0;
   background-size:cover;
  }
}

输出结果
li:nth-child(1) {

  background: url(../../images/1.jpg);
  float: left;
  width: 200px;
  height: 200px;
  margin: 0 20px 20px 0;
    background-size: cover;
  }

li:nth-child(2) {

  background: url(../../images/2.jpg);
  float: left;
  width: 200px;
  height: 200px;
  margin: 0 20px 20px 0;
    background-size: cover;
  }

li:nth-child(3) {
  
  background: url(../../images/3.jpg);
  float: left;
  width: 200px;
  height: 200px;
  margin: 0 20px 20px 0;
  background-size: cover;
  }

例2:to 关键字的例子

ul {
  list-style: none;
}

@for $i from 1 to 3{
  li:nth-child(#{$i}){
 
  background: url(../../images/#{$i}.jpg);
  float: left;
  width: 200px;
  height: 200px;
  margin: 0 20px 20px 0;
   background-size:cover;
  }
}
@each循环

@each 循环就是去遍历一个列表，然后从列表中取出对应的值。

@each 循环指令的形式：

@each $var in <list>

例:多字段的map循环

$style:(h1:20px,h2:10px,h3:6px);
@each $h,$s in $style{
  #{$h}{
    font-size:$s
  }
}

sass中mixin

概念

Mixins是SASS中的一个强大的功能。使用@mixin根据功能定义一个模块，然后在需要使用的地方通过@include来调用声明的mixins。其主要功能是可以让你的代码简洁高效.

基本使用

例1: 基本的使用button的样式mixin,进行调用

@mixin button {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
}

引用
.btn{
  @include button;
}
参数的使用

Mixins可以接收和使用参数,多个参数使用逗号隔开,也可以设置参数默认值

例1:定义一个button的mixin然后传递参数,更新之前的button模块，增加了名为background的参数并将其传递给模块。

@mixin button($background) {  
    font-size: 1px;  
    padding: 0.5px 1.0px;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}

注意到参数被设置为一个变量并成为backround属性的值。如果我们想创建一个绿色的按钮，那么就可以使用以下代码：

进行调用
.button-green {  
    @include button(green);  
}

例2:在例1的基础上增加$color,同时给背景设置默认颜色

@mixin button($backgroundColor,$color:red){
    font-size:1px;
    padding:0.5px 2px;
    text-decoration: none;
    color:$color;
    background: $backgroundColor;
}
.button-green{
    @include button(green);
}

自定义函数

要实现函数的声明和返回内容我们需要使用function和return两个指令，类似于其他语言中的关键字。

语法

 @function 函数名(形参) {
   @return;
 }

例1:将宽度乘以2然后,返回

@function getWidth($w) {
  @return $w * 2;
}


.main{
  max-width: #{getWidth(20)}px;
}
mixin与function的区别

函数可以有多个语句组成，但是必须设定返回值(return)。但是混合(mixin)就可以不用设置返回值即可操作。函数(function)传入的值也可以带有变量

gulp静态服务搭建

var gulp=require("gulp");
var plugins=require("gulp-load-plugins")();
var server=require("browser-sync").create();

function renderCss(){
    gulp.src("./src/scss/*.scss")
    .pipe(plugins.sass())
    .pipe(plugins.concat("main.css"))
    .pipe(plugins.minifyCss())
    .pipe(plugins.rename("main.min.css"))
    .pipe(gulp.dest("./dist/css/"))
    .on("end",server.reload);
}

function renderHtml(){
    gulp.src("./*.html")
    .pipe(gulp.dest("./"))
    .on("end",server.reload);
}

function renderJs(){
    gulp.src("./src/js/*.js")
    .pipe(plugins.concat("main.js"))
    .pipe(plugins.uglify())
    .pipe(plugins.rename("main.min.js"))
    .pipe(gulp.dest("./dist/js/"))
    .on("end",server.reload);
}

gulp.task("default",function(){
    renderCss();
    renderJs();
    renderHtml();
    server.init({
        server:"./",
        port:4010
    });
    gulp.watch("./src/scss/*.scss",renderCss)
    gulp.watch("./*.html",renderHtml)
    gulp.watch("./src/js/*.js",renderJs)
})
avatar
文章
阅读
粉丝