sass学习总结

傷城~ 2023-07-25 14:07 23阅读 0赞

安装官网有好多种方式，而且针对不同操作系统平台进行了介绍。由于是练习，我在本地windows平台来学习sass.

npm install -g sass

然后就可以学习sass了，安装了node环境自带了npm包管理工具。  
常用的用法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70]  
还有一个常用的参数，就是`--watch`，监视文件变化，自动编译。  
可以通过sass --help进一步了解更多参数的使用。  
不过使用HBuilder等IDE，直接在开发工具中安装sass编译插件，并配置保存时自动生成相应css文件，开发的时候还是需要讲究效率的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70 1]

另外一种安装ruby环境的，还是比较麻烦，当时也玩了以下。记录下  
查看ruby版本

ruby -v

ruby的语法讲究缩进，而且不支持花括号和分号，所以后面更多的人使用scss。

单文件编译

sass 要编译的全路径:编译后的路径

批量编译一个目录下的所有sass文件到另外一个目录

sass hbk/:css/

表示将hbk目录下的所有.scss（.sass）文件编译成.css文件，并且放到css文件夹中。

自动化编译

1、Grunt 配置 Sass 编译的示例代码

module.exports = function(grunt) {
        grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),
            sass: {
                dist: {
                    files: {
                        'style/style.css' : 'sass/style.scss'
                    }
                }
            },
            watch: {
                css: {
                    files: '**/*.scss',
                    tasks: ['sass']
                }
            }
        });
        grunt.loadNpmTasks('grunt-contrib-sass');
        grunt.loadNpmTasks('grunt-contrib-watch');
        grunt.registerTask('default',['watch']);
    }

2、Gulp 配置 Sass 编译的示例代码

var gulp = require('gulp');
    var sass = require('gulp-sass');
    
    gulp.task('sass', function () {
        gulp.src('./scss/*.scss')
            .pipe(sass())
            .pipe(gulp.dest('./css'));
    });
    
    gulp.task('watch', function() {
        gulp.watch('scss/*.scss', ['sass']);
    });
    
    gulp.task('default', ['sass','watch']);

编译之后的风格有如下四种

嵌套输出方式 nested
    展开输出方式 expanded  
    紧凑输出方式 compact 
    压缩输出方式 compressed

如下的sass文件内容

nav {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
    
      li { display: inline-block; }
    
      a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
    }

经过编译命令

sass --watch test.scss:test.css --style nested

将转化为如下风格

nav ul {
      margin: 0;
      padding: 0;
      list-style: none; }
    nav li {
      display: inline-block; }
    nav a {
      display: block;
      padding: 6px 12px;
      text-decoration: none; }

如果使用expanded，则只是大括号会另外起一行。  
compact则每一个样式独立一行。

变量的声明使用美元符

$btn-primary-color : #fff !default;

`!default`为默认值

默认变量的覆盖，只需在默认变量之前重新声明即可。

$baseLineHeight: 2;
    $baseLineHeight: 1.5 !default;
    body{
        line-height: $baseLineHeight; 
    }

编译之后的css

body{
        line-height:2;
    }

选择器嵌套

nav {
      a {
        color: red;
    
        header & {
          color:green;
        }
      }  
    }

编译之后的css

nav a {
      color:red;
    }
    
    header nav a {
      color:green;
    }

属性嵌套

.box {
      border: {
       top: 1px solid red;
       bottom: 1px solid green;
      }
    }

编译之后的css

.box {
        border-top: 1px solid red;
        border-bottom: 1px solid green;
    }

伪类嵌套

.clearfix{
    &:before,
    &:after {
        content:"";
        display: table;
      }
    &:after {
        clear:both;
        overflow: hidden;
      }
    }

编译之后的css

clearfix:before, .clearfix:after {
      content: "";
      display: table;
    }
    .clearfix:after {
      clear: both;
      overflow: hidden;
    }

混合宏，使用@mixin声明，使用@include调用  
@extend继承基类样式

%placeholder占位符，只有被@extend调用才会生成css代码

%mt5 {
      margin-top: 5px;
    }
    %pt5{
      padding-top: 5px;
    }
    
    .btn {
      @extend %mt5;
      @extend %pt5;
    }
    
    .block {
      @extend %mt5;
    
      span {
        @extend %pt5;
      }
    }

编译之后的css为

.btn, .block {
      margin-top: 5px;
    }
    
    .btn, .block span {
      padding-top: 5px;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70 2]

## sass中的高级语法 ##

在这里不多介绍，工作当中也比较少用。推荐学习下compass，一个框架。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70]: /images/20230528/b5409530bcc0413bbe62274406498a16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70 1]: /images/20230528/fff97491d7d046cb92ca569ef65f2889.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70 2]: /images/20230528/95a124e1073f4dbe99d342cdac0188af.png