scss 竟如此简单

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

大家好,我是大帅子,今天讲一下scss基本的语法吧,scss到底哪里好用,我们来剖析几点吧,OK,我们话不多说,直接进入正文我的好兄弟们

概念

scss与less类似，只是一种css样式的预处理语言 (浏览器不能直接使用的，需要转成css)

---

1. 嵌套写法

这点倒是跟less差不多,看个梨子

index.html

<div id="app">
    <div class="container">
        container
    </div>
  </div>

index.scss

#app {
    width:100%;
    height:100%;
   
   .container {
       color:red;
   }
}

这样的好处,相信大家就知道,就是层层嵌套,然后我们也不容易写错地方,就算有一样的类名,我们外面也嵌套了父元素,这样我们的元素还是不受影响滴

2. &父选择器

这个&是什么意思呢,这里解释一下,我们直接看梨子,假如你想针对某个特定子元素 进行设置

index.html

<div id="app">
    <div class="container">
        container
        <a href="#">我是小笨蛋</a>
    </div>
  </div>

index.scss

#app {
    width:100%;
    height:100%;
   
   .container {
       color:red;
       
       a{
          text-decoration: none;
          color: green;
          
          &:hover{
              color: yellow;
          }
       }
}

这样我们就发现更加有条里了,不用专门写一个 a,哈哈

3. 模块

一个.scss文件就是一个模块，多个.scss文件之间可以相互引用。例如：在一个.scss文件(base.scss)定义多个变量，然后在另一个.scss（test.scss）中引入这个文件，就可以使用其中定义的变量了

格式

@import './xxxx.scss';

4. sass使用$符号来标识变量

本人觉得最重要的就是这个,例如我们在变量中,使用了很多相同的属性,但是这些属性,我们有时候而且会改,这样改起来工作量还是蛮多的,与其有时间改,还不如学一个scss,快速改完,然后摸鱼,好了,直接看列子

定义

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

使用

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

OK我们就可以愉快的玩耍了,嘿嘿

---

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅         还需努力!大家一起进步!!!