scss入门介绍与使用

Scss介绍

scss是一款 CSS 预处理语言，是sass的升级版

SCSS 和 SASS 的具体区别

SASS 是以严格的缩进式语法规则来书写，不带大括号( { } )和分号( ; )，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似

// Sass语法
$font-stac: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量
body 
  font: 100% $font-stack;
  color: $primary-color; // 没有 {} 和 ;


// Scss语法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}

// 编译出来的css
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

SCSS在线转换： SassMeister | The Sass Playground!

Scss的基本语法

声明变量的符号 $

//scss
$color :#ffffff;
.box{
    border-color:$color;
}
//编译后
.box {
  border-color: #ffffff;
}

默认变量 !default

变量的值后面添加了 !default 标志 ，这意味着该变量如果已经赋值，那么它不会被重新赋值，但是，如果它尚未赋值，那么它会被赋予新的给定值

//scss
$color :#ffffff !default;
.box{
    border-color:$color;
}
//编译后
.box {
  border-color: #ffffff;
}

//scss
$color :#ffffff !default;
$color:#333;
.box{
    border-color:$color;
}
//编译后
.box {
  border-color: #333;
}

变量调变量

直接调用即可

//编译前
$color1 :#ccc;
$color2:$color1;
.box{
    border-color:$color2;
}
//编译后
.box {
  border-color: #ccc;
}

局部变量和全局变量

//编译前
$color1 :#ccc;
.box{
    border-color:$color1;
    a{
        $color1:#fff;
        color:$color1;
    }
}
//编译后
.box {
  border-color: #ccc;
}
.box a {
  color: #fff;
}

选择器嵌套

//编译前
.box{
    a{
        color:#ccc;
    }
    b{
        color:#fff;
    }
}
//编译后
.box a {
  color: #ccc;
}
.box b {
  color: #fff;
}

属性嵌套

CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding等

//编译前
.box{
    border:{
        color:#fff;
    }
    margin:{
        top:12px;
        left:21px;
    };
}
//编译后
.box {
  border-color: #fff;
  margin-top: 12px;
  margin-left: 21px;
}

伪类嵌套&

//编译前
.box{
    &:hover{
        color:#fff;
    }
}
//编译后
.box:hover {
  color: #fff;
}

Scss的中级用法

混合宏之不带参数

//编译前
@mixin border_base_sty {
    margin:{
        top:20px;
        left:200px;
        right:300px;
    };
}

.box{
    @include border_base_sty
}
//编译后
.box {
  margin-top: 20px;
  margin-left: 200px;
  margin-right: 300px;
}

混合宏之带参数

//编译前
@mixin border_base_sty($top,$left){
    margin:{
        top:$top;
        left:$left;
        right:300px;
    };
}

.box{
    @include border_base_sty(2px,400px)
}
//编译后
.box {
  margin-top: 2px;
  margin-left: 400px;
  margin-right: 300px;
}

混合宏之设置默认参数

//编译前
@mixin border_base_sty($top:20px,$left:20px,$right:20px){
    margin:{
        top:$top;
        left:$left;
        right:$right;
    };
}

.box{
    @include border_base_sty(666px)
}
//编译后
.box {
  margin-top: 666px;
  margin-left: 20px;
  margin-right: 20px;
}

扩展or继承【@extend】

//编译前
.text{
    text-align: center;
    color:#fff;
}

.box{
     margin-bottom: 5px;
    @extend .text
}
.contnet{
    
    padding-top:88px;
    @extend .text
}
//编译后
.text, .contnet, .box {
  text-align: center;
  color: #fff;
}

.box {
  margin-bottom: 5px;
}

.contnet {
  padding-top: 88px;
}

scss继承，是通过形成组合选择器的方式，获取要继承的样式

占位符【%】与extend搭配使用

• 单独使用’%‘占位符

//编译前
%text{
    text-align: center;
    color:#fff;
}
//编译后
--为空--

• 与extend搭配使用

//编译前
%text{
    text-align: center;
    color:#fff;
}

.box{
     margin-bottom: 5px;
    @extend %text
}
.contnet{
    padding-top:88px;
    @extend %text
}
//编译后
.contnet, .box {
  text-align: center;
  color: #fff;
}

.box {
  margin-bottom: 5px;
}

.contnet {
  padding-top: 88px;
}

%与extend搭配与extend单独使用类似，形成一个组合选择器

流程控制@if

@if语法和js类似，基本格式是@if...@else if...@else

//编译前
$num:3;
.box{
    @if $num>=3{
        color:#fff;
    }
    @else{
        color:#000;
    }
}
//编译后
.box {
  color: #fff;
}

//编译前
$num:3;
.box{
    @if $num>3{
        color:#fff;
    }
    @else if $num==3{
        color:#000;
    }
    @else{
        margin-top:10px;
    }
}
//编译后
.box {
  color: #000;
}

流程控制@for

for在条件范围内重复操作，这个指令包含两种格式：

• @for $let from <start> through <end> ==>条件范围包含 <start> 与 <end>的值

• @for $let from <start> to <end> ==>条件范围只包含<start>的值不包含<end>的值

<start> 和 <end> 必须是整数值

//to -- 编译前
@for $index from 1 to 3 {
  .box:nth-child(#{$index}) {
      width: 80 * ($index - 1) + px;
  }
}
//to -- 编译后
.box:nth-child(1) {
  width: 0px;
}

.box:nth-child(2) {
  width: 80px;
}

#{} 插值语句 ==》通过 #{} 插值语句可以在选择器或属性名中使用变量

//#{} 编译前
$name: box;
$attr: border;
.#{$name} {
  #{$attr}-color: blue;
}
//#{} 编译后
.box {
  border-color: blue;
}

//through -- 编译前
@for $index from 1 through 3 {
  .box:nth-child(#{$index}) {
      width: 80 * ($index - 1) + px;
  }
}
//through -- 编译后
.box:nth-child(1) {
  width: 0px;
}

.box:nth-child(2) {
  width: 80px;
}

.box:nth-child(3) {
  width: 160px;
}

@import 自定义导入

//common.scss 文件夹
$color:#fff;

//index.scss 文件夹
//编译前
@import "common.scss";
.box {
    border-color: $color;
}
//编译后
.box {
    border-color: #fff;
}

定义常量并用:export进行导出

 variables.scss :

// sidebar
$menuText: #bfcbd9;
$menuActiveText: #ffffff;
$subMenuActiveText: #f4f4f5;

$menuBg: #304156;
$menuHover: #263445;

$subMenuBg: #1f2d3d;
$subMenuHover: #001528;

$sideBarWidth: 210px;

// JS 与 scss 共享变量，在 scss 中通过 :export 进行导出，在 js 中可通过 ESM 进行导入
:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
}

在 layout/index.vue 中使用：

<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.fixed-header {
  //calc() 函数，用于动态计算元素的宽度值
  //在使用 calc() 函数时需要保证数学表达式中的数字、操作符和单位之间有空格分隔开
  width: calc(100% - #{$sideBarWidth});
}
</style>