sass基础

简介

1.什么是sass? 作用?

sass是一种css预处理器, 在css的基础上添加了例如变量, 嵌套, 混合, 导入等等功能,

使用sass提高开发效率

2.css预处理器

css预处理器就是css语法扩展版本

3.常见的css预处理器

 sass/less/stylus

4.sass和scss的区别?

sass是css预处理器的名字

早期语法叫sass

新版语法叫scss

环境搭建

1.如何搭建开发环境

<1> 安装依赖库

cnpm install node-sass sass-loader style-loader --save-dev

<2> 修改sass-loader配置文件(vue)

文件地址:build/webpack.base.conf.js

{ test:/\.scss$/, loaders:['style','css','sass'] }

<3> 样式

<style lang="scss">
</style>

使用

1.注释

css只支持 /**/注释

scss支持 /**/注释 //注释

2.变量

2.1.如何定义变量

通过$定义变量, 定义scss变量, 变量名符合 样式名,id名规则

2.2.使用直接通过变量名使用

定义变量  嵌套

$warning-color: yellow; 
$error-color: red; 
$success-color: green; 
.box1 .item1{ 
       background-color: $error-color; 
    } 
.box1 .item2{
       background-color: $error-color; 
    } 
.box2{ .item1{ 
      background-color: $warning-color; 
    }
.item2{ 
    background-color: $success-color; 
    }
 }

css 定义样式只能一个一个定义

混合(理解为函数)

// 定义混合

@mixin one-box($w,$h,$bc){
     width: $w; 
     height: $h; 
     background-color: $bc; 
} 
.box3{ 
    .item1{ 
        //使用混合 @include one-box(100px,200px,red); 
    }
    .item2{ 
        //使用混合 @include one-box(200px,400px,blue);
     }
 }

继承

// 父样式

.s{ 
    width: 100px; 
    height: 100px; 
    background-color: lightblue; 
} 

//子样式

.box4{
    @extend .s; 
    border: 1px solid black; 
   }

导入scss文件

<1> 定义一个单独scss文件

<2> 其他style通过 @import导入样式

//样式导入

@import './hello.scss';

参考

sass中文文档: https://www.sass.hk/docs/