scss的基本语法,scss与less,sass,css的区别

5,490 阅读1分钟

less, sass, scss都是css预处理语言(也是对应的文件后缀名),它们的语法功能比css更强大。

预处理语言使用是:开发时用预处理语言,在打包上线时,用webpack再配合loader工具给转成css(Cascading Style Sheets)给浏览器使用。

细节:

  1. 后缀名:SASS(Syntactically Awesome StyleSheets)版本3.0之前的后缀名为.sass,而版本3.0之后的后缀名.scss

  2. 语法规范:

    ​ sass没有{};, 有严格的缩进规范 ;

    ​ scss和css的缩进规范是一致的

我们在实际开发过程中,scss是常用写法

scss 的基本语法:

1. 可以使用$来标识变量(可以将常用的样式标记成变量,后续复用即可,方便维护)

$highlight-color: #f40;
$basic-border: 1px solid black;

#app {
    background-color: $highlight-color;
  	border: $basic-border;
}  

2. 嵌套语法(和less语法相同)

<div id="app">
    <div class="container">container</div>
</div>
// scss语法
$highlight-color: #f90;
$basic-border: 1px solid black;

#app{
  background-color:  $highlight-color;
  border:$basic-border;
  .container{
    font-size:30px;
  }
}

3. &父选择器(跟less语法相同)

假如你想针对某个特定子元素 进行设置

$highlight-color: #f90;
$basic-border: 1px solid black;

#app{
  background-color:  $highlight-color;
  border:$basic-border;
  .container{
    font-size:30px;
  }
  a{
    color:blue;
    &:hover{
      color: red;
    }
  }
}

4. 模块化

可以将需要的变量定义在一个新的js文件中,需要使用的样式文件直接引入即可

@import './base.scss';
$highlight-color: #f90;
$basic-border: 1px solid black;
#app{
  background-color:  $base-color;
  border:$basic-border;
  .container{
    font-size:30px;
  }
  a{
    color:blue;
    &:hover{
      color: red;
    }
  }
}

当使用scss作为你的样式后,一般在html页面中不得直接引入(因为浏览器中只支持css),vscode中有个名为Easy Sass的扩展可以将sass文件或scss文件自动转移成一个css文件,我们用的时候直接引入css文件

致敬我当码农的每一天!!!